Navigasi Breadcrumb Pada Postingan Blog

Pada gambar yang dicorot oleh tanda merah tersebut merupakan contoh dan preview dari Navigasi Breadcrumb.

Mungkin sebagian blogger ada yang bertanya untuk apa sih Navigasi Breadcrumb yang simple ini ? huffttt... Jgn salah sob !!! Setelah saya check, ternyata Navigasi Breadcrumb ini berpengaruh dengan Seo. 

Adapun pengertian dari Navigasi Breadcrumb (breadcrumb navigation ) itu sendiri yaitu adalah sebaris link tautan internal pada bagian atas atau bawah halaman situs web yang memudahkan pengunjung untuk kembali ke bagian sebelumnya atau ke halaman dasar dengan cepat.

Lalu, bagaimana cara membuatnya ? Ikuti Langkah-langkahnya :
1. Login pada Blogger

2. Masuk ke bagian Layout, kemudian ke bagian Edit HTML
    Back up Template dengan cara Mengklik : Download Template Lengkap

    Setelah itu, beri tanda cek pada Expand Widget Templates.

 3. Copy kode di bawah ini :

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:2.3em;
}

    Paste Kode tersebut diatas kode  ]]></b:skin>

4. Copy kode dibawah ini :

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

     Paste Kode tersebut diatas kode <div class='post hentry uncustomized-post-template'>

5. Lalu Klik Simpan Template. Lihatlah hasilnya !!!


Bagaimana ? Menarik ?
Jika iya, Jgn lupa beri komentarnya dan jika ada kendala mohon beritahu saya segera !!!

HAPPY BLOGGING SOBAT !!!

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :