Membuat Breadcrumb di Blog

Membuat Breadcrumb di Blog - Kehadiran breadcrumb saat ini membuat situs seperti web/blog menjadi lebih bervarian dan memiliki tingkat kegunaan yang cukup tinggi. Breadcrumbs adalah navigasi menu untuk mempermudah pengunjung untuk melacak/mengetahui lokasi suatu artikel/konten yang sedang di bukanya secara pasti sehingga pengunjung dapat dengan mudah untuk kembali/menuju ke halaman awal. Biasanya breadcrumb ini berada di atas judul konten/artikel (tepatya di bagian bawah header).

Menurut Wikipedia, definisi breadcrumb adalah sebagai berikut :
"Breadcrumb biasanya muncul secara horizontal di bagian atas sebuah halaman web, biasanya ada di bawah bar bagian judul atau header. Breadcrumb menyediakan link penghubung kembali ke halaman sebelumnya setiap user menavigasi antar link untuk menuju ke halaman yang aktif atau halaman induk dari halaman yang aktif. Breadcrumb memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Sebuah tanda yang lebih besar dari (>) sering berfungsi sebagai pemisah hirarki, meskipun dapat menggunakan simbol lainnya (seperti » atau >), serta beragam grafik."

Untuk contoh tampilan breadcrumb ini bisa anda lihat pada gambar berikut!

Oke, langsung saja kita simak tutorial cara membuat breadcrumb di blog berikut ini!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode berikut ini :

<b:include data='top' name='status-message'/>

5. Ganti kode tersebut dengan kode di bawah ini :

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

6. Setelah itu, cari kode di bawah ini :

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

7. Lalu ganti kode tersebut dengan yang satu ini :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'><span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> » 
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/> » Unlabelled
</b:if> » <span><data:post.title/></span>
</b:loop>
</span>
</p><b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'><span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p><b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'><span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span></p></b:if>
</b:if>
</b:if>
</b:if>
</b:includable><b:includable id='main' var='top'>

8. Kemudian cari kode ]]></b:skin> dan letakkan script code berikut ini tepat di atasnya!

.breadcrumbs {
padding: 5px;
margin-bottom: 10px;
margin-top: 10px;
font-size: 95%;
line-height: 1.4em;
border-bottom: 2px solid #ccc;
}

9. Klik save/simpan template, selesai dan lihat hasilnya...

Cukup sekian postingan pada kesempatan kali ini, selebihnya saya mohon ma'af atas segala kekurangan yang ada. Semoga postingan tentang cara membuat breadcrumb di blog ini bermanfaat bagi anda dan salam sejahtera by ngeposta...

Anda sedang membaca Artikel berjudul Membuat Breadcrumb di Blog, dan dengan URL http://kabarkabaru.blogspot.com/2013/01/membuat-breadcrumb-di-blog.html. Anda boleh membagikan artikel Membuat Breadcrumb di Blog ini kepada Teman - Teman anda namun jangan lupa mencantumkan link Membuat Breadcrumb di Blog sebagai Sumbernya.Terima Kasih