Cara Buat Breadcrumb Navigation di bloggger

Tweet

Breadcrumbs adalah nama yang diberikan untuk link navigasi biasanya ditampilkan di atas postingan di blog dan di bagian atas halaman di link website. Jejak link dari halaman Anda sedang kembali ke home page. Jadi misalnya di blog Anda memiliki home page link, link ke sebuah label yang digunakan untuk posting menjadi title.Postingan ini akan ditampilkan seperti ini 'Home>Label>Judul Posting'. Ini adalah jenis navigasi yang sangat populer pada segala macam situs dan dalam hal ini posting saya akan menunjukkan cara untuk menambahkannya ke blogger. 

Langkah :

1. Buka akun blogger Anda
2. Masuk ke menu Template > Proceed > edit HTML > centang Expand Template Widget
3. Cari kode dibawah ini :

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

    4.  Pastekan kode dibawah ini, dibawah pada kode diatas :
         (kode diatas mungkin ada 2, jadi pastekan pada ke-2 kode tersebut)

<b:include data='posts' name='breadcrumb'/>

    5.  Cari kode dibawah ini :

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

    6.  Dan ganti kode diatas menjadi kode dibawah  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'>
<!--Breadcrumbs code info @ http://d-copy.blogspot.com/-->

   7.  Cari kode dibawah ini :

]]></b:skin>

   8.  Pastekan kode dibawah ini, diatas pada kode diatas :

/* Breadcrumbs Css info @ http://d-copy.blogspot.com/ */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

   9.  Preview dan Save Template Anda.

Keterangan :

• Jangan lakukan perubahan pada kode http://d-copy.blogspot.com/
• Anda bisa mengatur kode berwarna biru sesuai dengan keinginan Anda.