Cara Menciptakan Navigasi Breadcrumbs Dan Google Translate

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

Pada blog berbasis WordPress akan lebih tersusun secara hirarki alasannya sanggup menciptakan child category, memudahkan visitor mengetahui letak artikel tersebut. Pada blog berbasis Blogspot / Blogger, breadcrumbs tidak sanggup tampil ibarat 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 sajian Home
3. Memperkecil  Bounce Rate
4. Menambah  keyword dalam postingan
5. Memberikan isu yang diperlukan Search Engine, ibarat Google dalam memahami struktur / sketsa 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 sanggup lihat pada screentshoot di atas.

Untuk caranya sanggup ikuti tutorial dibawah ini:

1. Masuk blogger.com

2. Pilih blog yang mau di pasang, kalau memiliki lebih dari satu blog

3. Pilih template dan klik Edit HTML

4. Cari Kode ]]></b:skin> dan pastekan instruksi 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 instruksi 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 instruksi :

<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 instruksi 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 sanggup membantu Anda dan selamat mencoba.

Bagikan Artikel ini