Navigasi Breadcrumb di blogspot

Navigasi dalam blog merupakan tombol cepat yang bisa kita gunakan untuk menuju ke halaman- halaman/ link-link tertentu. Dengan adanya navigasi adalah memudahkan setiap pengunjung untuk menjelajah dari isi blog karena biasanya navigasi ditanamkan beberapa link yang sebagian besar adah link dari sebuah artikel yang dianggap penting, dan juga bisa menuju ke label tertentu. Mungkin kita telah mengenal beberap anavigasi dalam blog. kali ini kita akan bahas mengenai navigasi breadcrumb. Yaitu sebuah navigasi yang memudahkan untuk kembali ke halaman sebelumnya atau halaman tertentu. 

Biasanya susunannya yaitu browse >Home > label > judul posting.  Bagi sobat yang belum tahu cobalah lihat demonya disini [lihat di atas judul artikel]

Langsung saja bagaimana cara pembuatannya.

• Pertama Login ke akun blogger sobat.
• Pada halaman Dashboard Pilih Tata Letak - Edit HTML
• Jangan lupa centang kotak kecil Expand Template Widget
• Back up dahulu untuk antisipasi kesalahan fatal, Download Template Lengkap
•  Carilah kode ]]></b:skin>  [tekan F3 atau Ctrl + F untuk memunculkan jendera pencarian]
•  Letakkan Kode-kode di bawah ini di atas kode ]]></b:skin>  tadi
  

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

  sehingga menjadi seperti ini:
  

  .breadcrumbs {
  padding:5px 5px 5px 0px;
  margin: 0px 0px 15px 0px;
  font-size:95%;
  line-height: 1.4em;
  border-bottom:3px double #e6e4e3;
  }
  ]]></b:skin>

• Lalu cari kode berikut ini:
  <div class='post hentry uncustomized-post-template'>
• Letakkan kode-kode berikut tepat di bawah kode tadi
  

  <b:if cond='data:blog.homepageUrl == data:blog.url'>
  <b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='breadcrumbs'>
  
  Browse &#187; <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 == &quot;true&quot;'> &#187;
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
  </b:if>
  &#187; <span><data:post.title/></span>
  </b:loop>
  </b:if>
  </b:loop>
  
  </div>
  </b:if>
  <b:else/>
  <b:if cond='data:blog.pageType == &quot;archive&quot;'>
  <div class='breadcrumbs'>
  Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; 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>

• Klik Simpan
• Lihat hasilnya dengan membuka satu artikel saja...
• selesai

Sangat mudah dan simple bukan. Kita berjumpa pada postingan selanjutnya.

BELAJARLAH DARI SEBUAH KESALAHAN, MENCOBA- DAN TERUS MENCOBA SAMPAI KAU BISA