January 10, 2019

Cara Memasang Breadcrumb di atas Judul Posting Blog

January 10, 2019

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


Cara Memasang Breadcrumb di atas Judul Posting Blog

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

Breadcrumb di Atas Judul Posting

Pada gambar di atas, baris tulisan 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 bagian sebelumnya atau ke halaman depan dengan cepat, juga membuka semua posting yang ada dalam satu kategori (label). 

Menurut Maskolis, sang mastah yang sudah tidak asing lagi di kalangan blogger, 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 (kategori). Maka dari itu, semakin relevan sebuah label dengan isi postingan (artikel), maka akan semakin mendapatkan 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 tentang Breadcrumbs)

Namun ternyata, ada juga template keren yang belum dipasangi breadcrumb. Bagi yang templatenya belum dipasangi breadcrumb, misalnya 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 kode 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 kode seperti ini :

<div class='post hentry'>
4. Letakkan kode berikut ini tepat setelah kode <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 bisa dipasang dengan kode dan cara sebagai berikut:

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

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

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

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

4. Hapus kode tersebut dan ganti dengan kode 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 kode CSS breadcrumbs blogger berikut ini di atas kode ]]></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! (www.contohblog.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

6 comments on Cara Memasang Breadcrumb di atas Judul Posting Blog

  1. di blog saya tidak ada kode div class='post hentry'
    gan... mohon bantuannya

    ReplyDelete
    Replies
    1. coba cari ini gan 'post hentry'
      kalau saya letak dibawah kode ini..<article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype=

      Delete
  2. thanks breadcruamb dan template cb. buat jadi lebih seo lagi di tambahin script apa cb ???

    ReplyDelete
    Replies
    1. Itu sudah seo friendly, tak perlu skrip ekstra

      Delete

Contact Form

Name

Email *

Message *