Cara Membuat Navigasi Breadcrumb Di Blog

artikel ini membahas fitur navigasi yang terletak di atas atau bisa juga di bawah judul postingan, biasa kita kenal dengan nama breadchumb. Pengertian breadcrumb adalah navigasi berisikan kategori atau label postingan dan bisanya selalu di awali dengan tombol menuju home (halaman depan blog).

      Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat. 

Jadi manfatnya seperti ini : search engine selalu membaca label atau tags postingan blog, karena saat ini google tidak menggunakan meta tag keyword untuk mengindeks suatu website/blog, jadi perhitungan google saat ini adalah meta description dan label (kategori). semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

ikuti cara berikut:

• anda harus login blogger
• pilih template>edit HTML

• klik Expand Template Widget.
• cari kode ]]></b:skin> (agar lebih cepat gunakan tombol Ctrl+F)

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

• letakkan kode diatas sebelum code ]]></b:skin>
• lalu cari lagi code <div class='post hentry'>

 

<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'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

• letakkan kode diatas setelah kode <div class='post hentry'>
• klik simpan template

Enjoy