Cara Membuat BreadCrumb Navigation Di Atas Posting Blogspot

Tutorial, tips dan trik blogspot ini ada hubungannya dengan salah satu tekhinik seo. Yaitu dengan memasang Breadcrumb Navigation Di Atas Posting Blogspot. Breadcrumb Navigation mungkin masih terasa asing bagi kita, bagi yang belum mengetahui apasih Breadcrumb Navigation?

Baiklah saya akan menjelaskannya, BreadCrumb Navigasi adalah sebuah navigasi Link untuk memudahkan pembaca blog kita dalam mengakses sebuah Halaman yang memiliki banyak Kategori. Bentuk Breadcrumb adalah seperti di atas postingan ini yaitu adanya link Browse >> Home >> Kategori Blog >> Judul Artikel. dan jika dalam satu posting memasang lebih dari satu kategori maka breadcrumb juga akan menampilkannya dengan banyak kategori. Seperti gambar di bawah ini

Berikut ini Adalah cara pemasangannya:

• Login ke bloger.com dengan akun anda.
• Klik Design kemudian Edit HTML.
• Jangan lupa klik Download Full Template.
• Centang Expand Widget Templates.
• Cari Kode berikut  ]]></b:skin>
• Copy kode dibawah ini di atas ]]></b:skin>

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

• Cari Kode <div class='post hentry uncustomized-post-template'> atau <div class='post hentry'>
• Copy paste script kode berikut ini dan letakan di bawah nya

 <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>

• Simpan tamplate.
• selesai dan lihat hasilnya

Selamat Mencoba...

Artikel Terkait:

Get this widget