Cara Membuat Navigasi Breadcrumb di Blogger

Sejenak arahkan pandangan anda ke bagian atas posting ini! Tepatnya di atas judul artikel yang sedang anda baca. Anda akan melihat tautan link seperti ini: Browse >> Home >> Blogger >> Cara Membuat Navigasi Breadcrumb di Blogger.

Navigasi Breadcrumb merupakan salah satu plugin milik Wordpress, tetapi tidak tertutup kemungkinan untuk diterapkan juga di blogspot. Fungsi Navigasi Breadcrumb adalah untuk memperindah tampilan halaman/artikel, memudahkan pembaca menelusuri halaman blog, dan mengoptimalkan halaman blog di Search Engine Optimization (SEO).

Langkah - langkah Membuat Navigasi Breadcrumb di Blogger atau Blogspot adalah sebagai berikut:

• Login ke Blogger 
• Masukkan Email dan Sandi anda
• Klik Rancangan
• Pada Rancangan klik Edit HTML
• Jangan lupa Download Tamplate Lengkap
• Beri tanda centang di kotak kecil di samping Expand Template Widget
• Kemudian cari kode ]]></b:skin>
  Tips: Untuk mempercepat pencarian gunakan tombol (Ctrl+F)
• Copy kode dibawah ini dan paste di atas kode ]]></b:skin>
  
  .breadcrumbs {
  padding:5px 5px 5px 0px;
  margin: 0px 0px 15px 0px;
  font-size:95%;
  line-height: 1.4em;
  border-bottom:3px double #e6e4e3;
  }
  
  
• Selanjutnya cari kode <div class='post hentry uncustomized-post-template'>
• Copy kode dibawah ini dan paste di bawah kode <div class='post hentry uncustomized-post-template'>
  
  <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/>
  
  
• Klik Simpan Template
• Buka blog anda dan pilih salah satu artikel
• Lihat sekarang hasilnya

Hasilnya kira - kira seperti ini:

 

 

Tips: Kata Browse, bisa di ganti dengan kata lain yang anda inginkankan, contohnya: Anda di... Anda berada di... atau Anda Membuka ... . Lihat yang di bawah ini!

 

 

Demikianlah Cara Membuat Navigasi Breadcrumb di Blogger. Semoga tulisan ini bermanfaat adanya dan dapat juga diterapkan di blog anda.

Terima kasih.