Cara memasang Breadcrumb pada blog

Cara memasang Breadcrumb pada blog - Breadcrumb adalah suatu navigasi yang berisikan kategori atau label dari postingan dan bisanya selalu di awali dengan tombol atau link menuju home (halaman depan blog) dengan adanya breadcumb memudahkan para pembaca untuk menavigasi balik atau kembali ke bagian sebelumnya atau halaman depan dengan cepat. Breadcrumb sendiri biasanya  terletak di atas atau bisa juga di bawah judul postingan, dengan adanya breadcrumb maka blog anda lebih SEO Friendly.

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

seperti kita ketahui bahwa search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label atau Kategori. Maka dari itu semakin relevan sebuah label dengan isi postingan, maka akan semakin mendapatkan kesempatan tampil di halaman depan google. Lihat gambar dibawah ini contoh Breadcrumb.

Ok langsung saja kita praktekan Cara memasang Breadcrumb pada Blog

Cara Memasang Breadcrumb

1. Seperti biasa anda harus login ke Blogger.
2. Langsung Edit HTML. 
3. Carilah kode berikut ini
   

   <b:includable id='main' var='top'>

   agar mempermudah pencarian gunakan ctrl+f
   
4.  hapus kode tersebut dan ganti dengan kodi berikut ini :
   

   <b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Archive for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.searchQuery'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>All post</span> <b:else/> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/>

5. Setelah itu tinggal sobat tambahin sedikit CSS agar tampilannya lebih menarik, cari kode
   

   ]]></b:skin>

6.  Copy/salin kode CSS di bawah ini dan taruh diatasnya
   

   .breadcrumbs { font-size: 11px; color: #666; padding: 10px 0px; margin: 10px 0px 20px; border-bottom: 1px solid #ddd;}

    
7. Simpan template dan lihat hasilnya
   semoga berhasil

Nah itu tadi sedikit tutorial Cara Memasang BreadCrumb pada Blog, semoga bermanfaat buat sobat blogger yang baca ini, jangan lupa tinggalkan komentar sobat disini hehe atau kalau mau baca nih ada artikel menarik Cara Memasang Like Box Facebook di Blog

Share this post