Cara Memasang Breadcrumb Pada Blog

Cara memasang Breadcrumb pada blog - Breadcrumb ialah 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 bab sebelumnya atau halaman depan dengan cepat. Breadcrumb sendiri biasanya  terletak di atas atau dapat 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 bab sebelumnya atau ke halaman depan dengan cepat. 

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

Ok eksklusif 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 instruksi berikut ini
   

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

   agar mempermudah pencarian gunakan ctrl+f
   
4.  hapus instruksi 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 teman tambahin sedikit CSS semoga tampilannya lebih menarik, cari instruksi
   

   ]]></b:skin>

6.  Copy/salin instruksi 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 teman blogger yang baca ini, jangan lupa tinggalkan komentar teman disini hehe atau jikalau mau baca nih ada artikel menarik Cara Memasang Like Box Facebook di Blog

Tweet

Subscribe to receive free email updates: