Cara Membuat Menu Navigasi Breadcrumbs di Blogger

Menu navigasi BreadCrumbs adalah navigasi yang berada di bagian atas postingan, yang muncul secara horizontal. Navigasi breadcrumbs ini menyediakan link untuk kembali ke halaman sebelumnya, dan menunjukkan urutan isi halaman dari Bagian depan halaman (Homepage) hingga ke posting/artikel. Menu navigasi tidak akan muncul di bagian halaman depan (Homepage). Urutan navigasi breadcrumbs yaitu di mulai dari Home » Label posting  » Posting, seperti pada gambar di bawah ini:

View Demo

Berikut langkah-langkah membuat menu navigasi breadcrumb di blogger:

1. Pada Dashboard pilih Design > Edit Html.

2. Backup template dahulu dengan mengklik Download Full Template, untuk antisipasi bila terjadi error pada template anda.

3. Beri centang pada Expand Widget Templates

4. Letakkan kode CSS di bawah ini, di ATAS kode ]]></b:skin>

.breadcrumbs {float: left;width: 590px;font-size: 11px;margin: 5px 10px 20px 10px;padding: 0px 0px 3px 0px;border-bottom: double #EAEAEA;}

5. Cari kode <b:includable id='main' var='top'> dan GANTI dengan kode di bawah ini:

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<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 == &quot;item&quot;'>

<!-- 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'>

<b:if cond='data:label.isLast == &quot;true&quot;'>

 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>

</b:if>

</b:loop>

 &#187; <span><data:post.title/></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 == &quot;archive&quot;'>

<!-- 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 == &quot;index&quot;'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

<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.  Save Template
7. Selesai..

Rating: 5.0

Anda sedang membaca artikel tentang Cara Membuat Menu Navigasi Breadcrumbs di Blogger, Anda boleh menyebar luaskan atau mengcopy - paste artikel di atas jika memang sangat bermanfaat bagi anda. Dengan syarat anda harus meletakkan link di bawah ini sebagai sumbernya. Saya akan berlakukan DMCA Complaint, atas copy-paste yang tidak benar!
<a href="http://blog-dollar98.blogspot.com/2012/06/cara-menu-navigasi-breadcrumbs-blogger.html">Cara Membuat Menu Navigasi Breadcrumbs di Blogger</a>

Jika terdapat Problem / Masalah seperti Broken link atau Tutorial yang sudah tidak bekerja, harap beri tahu saya melalui kotak komentar yang sudah tersedia. Thanks!

Nur Wahid - Saturday, June 23, 2012

Enjoyed This Post? Share It! : Tweet