Home » » Cara Memasang Breadcrumb di Blogspot

Cara Memasang Breadcrumb di Blogspot

Cara Memasang Breadcrumb di Blogspot
CARA membuat, menampilkan, memunculkan, atau memasang breadcrumbs di blog blogspot ini, untuk Anda yang template blognya belum dilengkapi breadcrumbs. Yang sudah ada, tentu saja tidak usah lagi memasang kodenya.

Bagi yang belum tau, breadcrumb adalah navigasi blog berupa "judul kecil" di atas judul posting blog, yang disertai nama label/kategori dan navigasi "home".

Breadcrumb merupakan salah satu "trik blog" karena menjadi navigasi yang berisikan label/kategori posting dan bisanya diawali dengan tombol menuju "home" (halaman depan blog/beranda/homepage).

Contohnya? Lihat navigasi berupa "judul kecil" atas judul posting yang sedang Anda baca ini. Ini breadcrumb-nya:  Home» Tips SEO Blog» Cara Memasang Breadcrumb di Blogspot. 

 Dengan adanya breadcrumb, maka itu memudahkan user untuk kembali ke halaman depan (tinggal klik "Home") atau menemukan posting lainnya di label yang sama (tinggal klik "Tips SEO Blog".

Cara Membuat/Memasang Breadcrumb di Blogspot

Ini cara terbaik memasang breadcrumbs. Kode dari Maskolis berikut tidak akan membuat breadcrumbs menggantikan Permalink posting blog kita di hasil pencarian Google.

1. Klik "Template" > "Edit HTML"
3. Cari (Ctrl+F) kode ]]></b:skin>
4. Copy + Paste kode berikut ini tepat sebelum  kode ]]></b:skin>

.breadcrumbs{ padding:5px 5px 5px 0; margin:0;font-size:90%; 
line-height:1.4em; border-bottom:1px dotted #ccc}

5. Cari kode <div class='post hentry'> dan Copas kode berikut ini tepat setelahnya:

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

6. SAVE Template!

Mudah 'kan cara memasang breadcrumb di Blogspot? Oh.... gak muncul? Coba cara lainnya berikut ini.

Cara Lain Memasang Breadcrumb Blog

1. Simpan kode di bawah ini  tepat di atas kode ]]></b:skin>

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

2. Cari dan Ganti kode <b:includable id='main' var='top'> dengan kode di bawah 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='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <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'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>


3. SAVE Template!

Masih gak muncul juga itu breadcrumb? Ah... masa sih...! Coba lagi ini yang kata sih Cara Memasang Breadcrumb di Blogspot yang SEO Friendly.

Breadcrumb Blogspot SEO Friendly

1. Simpan kode berikut ini di atas kode ]]></b:skin> 

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

2. Temukan kode <b:includable id='main' var='top'> dan ganti dengan kode 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='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <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'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Itulah Cara Memasang Breadcrumb di Blogspot untuk kepentingan user. Tapi, pentingkah breadcrumb bagi SEO Blog? Akan dibahas di posting lain.

Good Luck and Happy Blogging!

Thanks for reading & sharing Cara Memasang Breadcrumb di Blogspot

Previous
« Prev Post

11 comments:

Comment Page:
  1. Replies
    1. sama-sama.... berjaya = berhasil :))

      Delete
  2. siang, mau tanya misal saya ketik contohblognih.blogspot.com di google hasil pencariannya ada 2 postingan berjejer di bawah judul blog.

    itu caranya gimana ya?
    kenapa punya saya tidak ada ya?
    www.zeropromosi.com blog saya

    mohon bantuannya ya

    ReplyDelete
    Replies
    1. itu karena struktur data blog CB sudah benar.... pake template new johny wuss v2

      Delete
    2. Satu hal lagi: itu karena http://www.zeropromosi.com/ menghapus credit link CB Blogger !!! Fatal akibatnya lho..... Kembalikan link CB !!!

      Delete
  3. sredit link ituu yang mana kak?

    ReplyDelete
    Replies
    1. di Footer, bagian bawah banget, misalnya begini:
      . New Johny Wuss Template by CB Blogger - Original Theme by Mastemplate.
      Nah, itu JANGAN DIHAPUS......

      Delete
  4. Lagi belajar edit template ni gan.Tutorialnya keren.makasih y

    ReplyDelete
  5. Kesulitan gan, kode ]]> kog ngk ada di template simple ya..

    ReplyDelete
    Replies
    1. simpan aja kodenya di bawah kode < / style > dengan diapit kode < style > kode si sini < / style >

      Kode < style > dan < / style > nya dirapatkan!

      Delete
  6. HHaaaa.. asli saking semangatnya saya sampe ngotak-atik dan ngga liat kalo ada 3 cara. Wkwkkk.. sukses deh bikin aku jleb hahaa. Anyway, berhasil diterapkan, Kak.
    Makasih ya tutorialnya. Aku seneng lama- lama ngulik di CB :)

    Mau dong diintipin, blog aku SEO friendly ga ya itu? hahaa.. berkali-kali ganti template, akhirnya balik ke bawaan blogger aja trus customisasi sendiri. CB membantu banget!

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox