Menampilkan Breadcrumb di Blog - Breadcrumb adalah salah satu cara navigasi dan teknik untuk mempermudah pengunjung blog kita mencari informasi ataupun kembali ke halaman sebelumnya yang berhubungan dengan topik yang kita baca.
Contoh Breadcrumb:
 |
| Contoh breadcrumb yang di terapkan di San Blogs |
Tanpa basa-basi lagi, berikut caranya:
Untuk membuat dan menambah supaya muncul navigasi breadcrumb silahkan masuk dulu ke Draft Blogger
Dalam Dasbor --> Masuk Ke Rancangan --> Edit HTML
Kemudian Centang Expand Template Widget
Cari kode berikut
<b:include data='top' name='status-message'/>Kemudian ganti dengan kode di bawah
<div id='places'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='breadcrumbs'>
Welcome to <data:blog.title/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
<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>
» <span class='post-title entry-title'><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
</div>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='breadcrumbs'>
Welcome to <data:blog.title/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
<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>
» <span class='post-title entry-title'><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
</div>
Kemudian Simpan dulu hasilnya.
Sekarang kita tinggal membuat kode untuk CSS nya, untuk itu copy kode CSS berikut :
#places {
border: 1px solid $bordercolor;
padding: 5px 15px;
margin: 10px 0;
line-height: 1.4em;
}Kemudian cari kode ini dan tempatkan kode CSS diatas kode ini </b:skin> .Jangan Lupa di simpan.
Keterangan :- Tulisan " Welcome To " atau tulisan yang berwara merah bisa kita ganti dengan tulisan apa saja, karena tulisan ini tampil di halaman muka ( HOME ) bagian atas postingan kita, misalkan dengan title blog kita.