Cara Membuat Navigasi Breadcrumb

Pada pertemuan kali ini kita membahas tentang Navigasi breadcrumb atau breadcrumb navigation. Pasti penasaran kan gimana bentuknya, coba lihat contoh di bawah ini.

 

Klik gambar untuk memperbesar

Navigasi breadcrumb atau breadcrumb navigation adalah sebuah link tautan internal pada bagian atas atau bawah halaman situs web yang memudahkan pengunjung untuk kembali ke halaman sebelumnya atau ke halaman dasar dengan cepat. Namun saat ini penempatan breadcrumb lebih sering digunakan pada bagian atas halaman artikel posting. Urutan link breadcrumb dimulai dari home (homepage) dan diakhiri dengan judul artikel posting yang sedang dibaca.
Contohnya: Browse » Home » SEO » Cara Membuat Navigasi Breadcrumb.Nah untuk membuatnya sangat lah mudah. ikuti langkah-langkah di bawah ini.

• Log in dulu ke blogger
• Tata letak
• Edit HTML
• Download tamplate anda dan
• Kasi tanda centang di kotak kecil kanan atas
• Kemudian cari kode ]]></b:skin>
  
• Letak kan kode dibawah ini persis di atas nya
  
  
  
  .breadcrumbs {
  padding:5px 5px 5px 0px;
  margin: 0px 0px 15px 0px;
  font-size:95%;
  line-height: 1.4em;
  border-bottom:3px double #e6e4e3;
  }
  
  
• Kemudian temu kan kode ini <div class='post hentry uncustomized-post-template'>
• Copy paste kode berikut tepat di bawah kode diatas
  
  
  
  <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>
  
  
• Kemudian simpan tamplate
  
• Lihat blog kamu dan coba klik satu judul artikel dan lihat hasilnya.

Selamat mencoba...