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!

Labels: Desain Blog

Related Posts

11 Komentar untuk "Cara Memasang Breadcrumb di Blogspot"

wah berjaya..terima kasih

sama-sama.... berjaya = berhasil :))

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

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

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

sredit link ituu yang mana kak?

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

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

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

simpan aja kodenya di bawah kode < / style > dengan diapit kode < style > kode si sini < / style >

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

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!

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *