Cara Membuat / Memasang Menu Navigasi Breadcrumbs di Blogspot

Struktur template blog yang bagus biasanya tidak akan mempersulit semua pengunjung kita. Salah satu menu navigasi yang memudahkan pengunjung untuk menemukan informasi lain yang berkaitan dengan postingan kita adalah menu breadcrumbs soalnya teman menu navigasi breadcrumbs ini biasanya terletak di bagian atas jadinya mudah untuk ditemukan dan masing - masing posting dikelompokkan ke dalam sub kelompok tertentu (label) seperti ini :

Andai kata sub kelompok (label) diklik maka kita akan mendapatkan tambahan pageview dan mungkin postingan lain yang ada dalam list tersebut dapat diketemukan sehingga menjadi terbaca..

Cara Membuat / Memasang Menu Navigasi Breadcrumbs di Blogspot

Lalu gimana ni cara membuat menu navigasi breadcrumbs di template blogspot / blogger ?? kalau ada diantara teman semua ingin mencoba memasang menu navigasi breadcrumbs, silahkan ni baca tutorial singkat di bawah ini :
1. Pertama kita harus mengedit template blogspot, caranya silahkan teman baca di postingan ini :
Cara Mengedit Template Blogspot
2. Nah saat teman semua dah nyampe di halaman Edit HTML, disini baru kita bisa menambahkan script khusus yang bisa menampilkan navigasi breadcrumbs di template blogspot / blogger kita.
Mari kita lakukan hal berikut ini :
1. Temukan kode html di bawah ini,

<b:includable id='main' var='top'>

Lalu 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 == &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'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span><a expr:href='data:label.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'/>

2. Temukan kode css di bawah ini,

]]></b:skin>

Lalu ganti dengan kode berikut

.breadcrumbs {
background:url(http://4.bp.blogspot.com/_b0xJ7qk6DTc/TJjSxfOwxAI/AAAAAAAABIk/ll_LdQe3ZrY/s1600/box2-top.gif);
float: left;
border: 1px solid #E6E6E6;
width: 595px;
font-size: 11px;
margin: 0px 10px 10px 10px;
padding: 5px 10px 5px 10px;
}
]]></b:skin>

3. Terakhir yang harus dilakukan adalah menyimpan hasil editan ini, klik tombol Simpan Template dan Tutup. Selesai...

Catatan :
Bila teman semua kesulitan mencari kode - kode diatas di dalam menu edit template blogspot pergunakan bantuan dari browser untuk mencarinya. Tinggal klik menu find atau tekan Ctrl+F dan masukkan beberapa bagian yang dicari pada kotak yang tersedia.

Semoga postingan tentang Cara Memasang / Membuat Menu Navigasi Breadcrumbs di Blogspot bermanfaat buat teman semua...