Cara Membuat Navigasi Breadcrumbs dan Google Translate

Cara Membuat Navigasi Breadcrumbs dan Google Translate

Sekarang saya akan membahas tentang Cara Membuat Navigasi Breadcrumbs dan Google Translate. Sebelumnya apa itu breadcrumbs? Breadcrumbs adalah navigasi di atas postingan yang berbentuk hirarki. Dalam  hal ini digunakan dalam istilah website menjadi navigasi postingan yang menunjukan dimana adanya postingan tersebut.

Pada blog berbasis WordPress akan lebih tersusun secara hirarki karena bisa membuat child category, memudahkan visitor mengetahui letak artikel tersebut. Pada blog berbasis Blogspot / Blogger, breadcrumbs tidak bisa tampil seperti itu. Namun hanya menampilan label dimana berada postingan tersebut. Apabila terdapat 2 label atau lebih, maka semua label akan di tampilkan.

Keuntungan Memakai Breadcrumbs:

1. Mempermudah visitor untuk mengetahui kategori postingan
2. Hanya satu klik untuk menuju menu Home
3. Memperkecil  Bounce Rate
4. Menambah  keyword dalam postingan
5. Memberikan informasi yang dibutuhkan Search Engine, seperti Google dalam memahami struktur / skema sebuah Web/Blog.
6. SEO Friendly

Disamping itu terdapat translate ke bahasa inggris yang berada di sebelah kanan breadcrumbs itu sendiri,saya buat simple dari tutorial yang di buat mas Taufik pada postingannya. Anda bisa lihat pada screentshoot di atas.

Untuk caranya bisa ikuti tutorial dibawah ini:

1. Masuk blogger.com

2. Pilih blog yang mau di pasang, bila mempunyai lebih dari satu blog

3. Pilih template dan klik Edit HTML

4. Cari Kode ]]></b:skin> dan pastekan kode CSS berikut di bawahnya

.breadcrumbs{
padding:0px 5px 5px 0;
margin-bottom:20px;
font-size:11px;
color:#5B5B5B;
border-bottom:1px dotted #bbb;
}
.breadcrumbs span.kanan {
float:right;
}

5. Cari Kode <b:includable id='main' var='top'>...</b:includable> dan ganti dengan kode berikut:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
<span class='kanan'> 
<a expr:href='&quot;http://translate.google.com/translate?u=&quot; + data:blog.url + &quot;&amp;amp;langpair=id%7Cen&amp;amp;hl=en&quot;' rel='nofollow' target='_blank' title='English'>Translate &amp;#9658;</a>
</span>
</div>
<b:else/>
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187;  <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

6. Simpan template
Untuk Mengecek silahkan kunjungi : http://www.google.com/webmasters/tools/richsnippets

Update 2 Juni 2014:

Agar breadcrumbs ini valid HTML 5 silahkan ganti kode :

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>

dengan kode berikut:

<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>

Semoga Ulasan diatas bisa membantu Anda dan selamat mencoba.