Navigasi Breadcrumb Blogger

Sebuah breadcrumb adalah bar navigasi yang biasanya ditampilkan di atas posting. Jika diartikan ke dalam Bahasa Indonesia, breadcrumb berarti remahan roti. Breadcrumb dapat berfungsi sebagai pemandu arah bagi kita dan pengunjung untuk memberikan informasi peta blog kita. Pengunjung harus dapat menemukan informasi yang mereka inginkan dengan cepat dan mudah. Jika tidak, mereka akan pergi dan mencari situs lain yang lebih mudah dipahami. Biasanya breadcrumb akan terlihat seperti seperti yang ditunjukkan di bawah ini.

Home » Blog » Navigasi Breadcrumb Blogger

Untuk posting ini kita dapat menambahkan atau memasang breadcrumb dengan cara menambahkan dua kode html dan satu kode css.

Cara memasukkan kode-kode untuk keperluan breadscrumb:

1. Login dan masuk ke akun blog.
2. Masuk ke Edit HTML. Template > Edit HTML > Lanjutkan.
3. Centang Expand Template Widget yang terletak di kiri atas.
4. Cari (Ctrl+F) kode HTML berikut: <b:skin><![CDATA[/*
5. Tempelkan kode CSS berikut dibawahnya: 
   .breadcrumbs {
   padding:5px 5px 5px 0px;
   margin: 0px 0px 15px 0px;
   font-size:95%;
   line-height: 1.4em;
   border-bottom:3px double #e6e4e3;
   }
6. Cari lagi kode HTML:
   <b:includable id='main' var='top'>
   <!-- posts -->
   <div class='blog-posts hfeed'>
   <b:include data='top' name='status-message'/>
7. Tempelkan kode HTML berikut dibawahnya: <b:include data='posts' name='breadcrumb'/>
8. Cari lagi kode HTML: <b:includable id='main' var='top'>
9. Tempelkan kode HTML berikut diatasnya:
   <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>
10. Akhiri dengan menyimpan HTML tersebut dengan mengklik tombol 'Simpan template'.
11. Silahkan dilihat tampilan blog anda. 

Jika anda mempunyai permintaan tutorial silahkan berkomentar. Terima Kasih telah berkunjung di D-dig.