Cara Memasang Breadcrumb Di Atas Judul Posting Blog

Cara Membuat, Menampilkan, atau Memasang Breadcrumbs di Atas Judul Posting Blog - Baris Navigasi sebagai Internal Link untuk Meningkatkan Pageviews.

TEMPLATE blog terbaru dipastikan sudah memasang breadcrumbs di atas judul goresan pena halaman dalam. Bagi yang belum tahu (masa sih?) apa itu breadcrumb, berikut ini penampakannya:

Pada gambar di atas, baris goresan pena Home » News » Kunci Sukses Blog ...dst. itulah yang disebut breadcrumb. 

Breadcrumb merupakan navigasi berupa internal link (tautan kedalam) yang memungkinkan pengunjung untuk menavigasi balik ke bab sebelumnya atau ke halaman depan dengan cepat, juga membuka semua posting yang ada dalam satu kategori (label). 

Menurut Maskolis, sang mastah yang sudah tidak ajaib lagi di kalangan blogger, search engine selalu membaca label atau tags setiap postingan blog, alasannya ketika ini google sudah tidah memakai meta tag keyword lagi untuk mengindeks suatu website/blog. 

Maka yang jadi perhitungan google ketika ini yakni meta description dan label (kategori). Maka dari itu, semakin relevan sebuah label dengan isi postingan (artikel), maka akan semakin mendapat kesempatan tampil di halaman depan Google (SERP).

Jelas, bepata benting breadcrumb ini ada di blog kita. Makanya, template seo friendly dipastikan sudah memasangnya. (Baca juga: Penjelasan Google perihal Breadcrumbs)

Namun ternyata, ada juga template keren yang belum dipasangi breadcrumb. Bagi yang templatenya belum dipasangi breadcrumb, contohnya template bawaan blogger, atau mau ganti tampilan breadcrumb, maka berikut ini cara memasangnya.

Cara Memasang Breadcrumb di atas Judul Posting Blog

1. Klik Tema > Edit HTML.
2. Copas arahan berikut ini di atas  kode ]]></b:skin>

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

3. Cari arahan ibarat ini :

<div class='post hentry'>

4. Letakkan arahan berikut ini sempurna sehabis arahan <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'>
<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>

5. Save Template! Beres.

Cara Lain Pasang Breadcrumbs

Sebagai alternatif, breadcrumbs blog juga dapat dipasang dengan arahan dan cara sebagai berikut:

1. Tema > Edit Html
2. Copas arahan berikut ini di bawah arahan <b:include data='top' name='status-message'/>

<b:include data='posts' name='breadcrumb'/>

3. Temukan (Ctrl+F) arahan berikut  ini:

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

4. Hapus arahan tersebut dan ganti dengan arahan ini:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
» Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

5. Copas arahan CSS breadcrumbs blogger berikut ini di atas arahan ]]></b:skin>

.breadcrumbs {padding:0 0 5px 0;margin: 0 0 15px 0;font-size:95%;line-height: 1.4em;border-bottom:1px solid #e6e4e3;}

6. Simpan template!

Kini breadcrumbs sudah terpasang di  atas tiap postingan blog Anda.

Demikian Cara Memasang Breadcrumb di Atas Judul Posting Blog. Good Luck & Happy Blogging!