ZAKIARI BLOG

Pada kesempatan kali ini saya akan menuliskan tentang cara membuat navigasi breadcrumb di blog. mungkin akan banyak yang bilang bahwa masa tutorial seperti ini aja gak tau, atau ah basi, namun nyatanya tutorial yang katanya "basi" ini masih di butuhkan terutama para blogger pemula yang sama sekali gak ngerti apa itu breadcrumb. Nah karena itu lah, saya membuat tentang bagaimana cara membuat navigasi breadcrum di blog dan akan sedikit menjelaskan apa yang di maksud dengan Breadcrumb.

Apa itu Breadcrumb ?

Breadcrum adalah link penghubung untuk kembali ke halaman sebelumnya, setiap pengguna mengarahkan antar link ke halaman yang aktif atau halaman induk dari halaman yang aktif.

masih bingung ? okelah, kita lihat penampakan dari breadcrumb. seperti inilah penampakannya :

biasanya navigasi Breadcrumb tersebut berada di atas postingan.

Fungsi Breadcrumb

breadcrumb berfungsi sebagai peta atau petunjuk agar pengunjung mengetahui pada kategori apa artikel tersebut. breadcrum juga dapat menambah nilai SEO pada blog.

Cara Membuat Navigasi Breadcrumb

Setelah artikel di beri label kita bisa memulai untuk membuat breadcrum, caranya adalah sebagai berikut :

1. Login ke Blog anda

2. Pilih menu Template - edit HTML

3. Tekan CTRL + F kemudian cari kode <b:includalbe id=’main’ var=’top’>

4. Ganti kode <b:includalbe id=’main’ var=’top’> dengan kode berikut 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'>
<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>

.breadcrumbs {padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:90%;
line-height: 1.4em;
border-bottom:3px double #eee;
}