Cara Membuat Navigasi Breadcrumbs dan Google Translate

Sekarang saya akan membahas tentang  Cara Membuat Navigasi Breadcrumbs dan Google Translate . Sebelumnya apa itu breadcrumbs?  Breadcrumbs ...

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.
plustranslate

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 :D atau bisa lihat DEMO 

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.

COMMENTS

BLOGGER: 60
Loading...
Name

Adsense,5,CSS,8,Font,1,HTML,5,Javascript,5,Jquery,1,Lain-lain,5,PHP,1,SEO,3,Template,45,Tips,2,Tutorial,50,Widget,1,
ltr
item
HBT Blog: Cara Membuat Navigasi Breadcrumbs dan Google Translate
Cara Membuat Navigasi Breadcrumbs dan Google Translate
http://2.bp.blogspot.com/-Y5TCUG1LL8k/UtNRPDsQVgI/AAAAAAAAACc/GOQqwPDBU8w/s1600/breadcrumbplustrnslate.png
http://2.bp.blogspot.com/-Y5TCUG1LL8k/UtNRPDsQVgI/AAAAAAAAACc/GOQqwPDBU8w/s72-c/breadcrumbplustrnslate.png
HBT Blog
http://hollabacktexas.blogspot.com/2014/01/cara-membuat-navigasi-breadcrumbs-dan.html
http://hollabacktexas.blogspot.com/
http://hollabacktexas.blogspot.com/
http://hollabacktexas.blogspot.com/2014/01/cara-membuat-navigasi-breadcrumbs-dan.html
true
4727374246882403435
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy