October 7, 2013

Cara Memasang Breadcrumb di Blog Blogger Terbaru Tanpa Error

October 7, 2013

Cara Memasang Breadcrumb di Blog Blogger Blogspot Terindeks Google dan Tanpa Error.

Cara Memasang Breadcrumb di Blog

CARA membuat, menampilkan, memunculkan, atau memasang breadcrumbs di blog blogspot ini, untuk Anda yang template blognya belum dilengkapi breadcrumbs, seperti template bawaan Blogger.

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

Breadcrumbs berfungsi sebagai navigasi halaman sekaligus tautan internal (internal link) yang berisikan link ke halaman depan (home), nama label ataukategori, dan judul postingan.

Contohnya, lihat navigasi berupa "judul kecil" atas judul posting yang sedang Anda baca ini. Ini breadcrumb-nya:

Cara Memasang Breadcrumb di Blogspot



Home » Desain 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 "Desain Blog".

Cara Memasang Breadcrumb di Blog Blogger Tanpa Error

Ini cara menampilkan breadcrumb di template blog default Blogger atau belum ada breadcrumbs-nya. 

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

.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#666;font-weight:400}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666}

2. Cari kode <b:includable id='comment-form' var='post'>

3. Copas kode berikut ini di atasnya:

<b:includable id='breadcrumb' var='posts'>
<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' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' title='Home' itemprop='item'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
</b:if>
</b:loop>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

4. Cari lagi kode <b:includable id='main' var='top'>

5. Tambahkan kode ini tepat di bawahnya:

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

6. Save!

Cara Mengganti Breadcrumb Blog yang Error

Tutorial berikut ini adalah bagi yang template blognya sudah ada breadcrumb, tapi error. Biasanya dari template bukan bawaan Blogger, baik gratisan maupun premium.

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

.breadcrumbs{line-height:1.2em;width:auto;overflow:hidden;padding:0;margin:0 auto 20px;font-size:90%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#777;font-weight:400}
.breadcrumbs a:hover{color:blue}
.breadcrumbs svg{width:20px;height:20px;vertical-align:-5px;margin:0 -3px}
.breadcrumbs svg path{fill:#c8c8c8}

3. Temukan kode <b:includable id='breadcrumb' var='posts'> ... </b:includable>
4. Hapus dan ganti dengan kode breadcrumb tanpa error berikut ini:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:view.isSingleItem'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
</b:loop>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

4. Cari kode <b:includable id='main' var='top'> dan simpan kode berikut ini di bawahnya:

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

5. Save. Simpan template.
Demikian cara terbaru memasang breadcrumb di blog Blogger/Blogspot.

NOTE!
Postingan di bawah ini cara lama memasang breadcrumb yang sudah tidak berlaku.

Cara Memasang Breadcrumbs 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'/>

Itu dia cara memasang breadcrumb di Blogger versi dua atau versi lama.
 

Cara Memasang Breadcrumbs di Blogger Terbaru (Versi 3)

1. Cari kode <b:defaultmarkup type='Common'>
2. Copas kode berikut ini di bawahnya:

<b:includable id='breadcrumb' var='post'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a class='breadhomepost' expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'><svg class='icons post-HOME' viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#768187'/></svg> Home&amp;nbsp;</span></a></span>&amp;nbsp;&#8250;
<b:loop values='data:post.labels' var='label'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'> &#8250; </b:if></span>
</b:loop><span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:includable>

3. Cari kode

<div class='post-title-container'>

atau 

<article class='post-outer-container'>

4. Copas kode berikut ini di bawahnya:

<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='breadcrumb'/>
</b:if>

5. Copas kode berikut ini di atas kode ]]></b:skin> atau </stytle>

.breadcrumbs {font-size:90%;overflow:hidden;color:#ccc;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;display:block;position:relative;margin:0 auto 20px}
.breadcrumbs .icons{position:absolute;top:0;left:0;width:16px;height:16px;vertical-align:center}
.breadcrumbs .breadhomepost{position:relative;padding:0 0 0 20px;overflow:hidden}
.breadcrumbs li{list-style-type:none;display:inline-block;float:left}
.breadcrumbs span a {color:#777;padding:0 3px;}
.breadcrumbs &gt;span:last-child {width:0;color:#999;font-weight:400;padding:0 0 0 3px}
.breadcrumbs span a:hover {color:#333;}
.breadcrumbs a:hover {color:#333;}

Simpan!


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! (www.contohblog.com).*

Previous
« Prev Post
Author Image

Romeltea

Recommended Posts

Related Posts

Show comments
Hide comments

18 comments on Cara Memasang Breadcrumb di Blog Blogger Terbaru Tanpa Error

  1. wah berjaya..terima kasih

    ReplyDelete
    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
  7. makasih gan tutorialnya sangat membantu... akhirnya nongol juga tag di breadcrumb

    ReplyDelete
  8. Alhamdulillah berhasil. setiap kali mencuba coding dari blog ini belum pernah gagal.. terima kasih banyak atas perkongsian ilmunya..

    ReplyDelete
  9. Bagaimana membuat supaya border bottomnya tampil cuma single line? Soalnya saya sudah merubah kata double itu kepada single tapi malah garisannya itu hilang terus.. Mohon bantuan..

    ReplyDelete
  10. Kok saya ga berhasil ya, udah berulang kali di coba...malah terakhir muncul kalimat : parsing gitu.

    ReplyDelete
  11. Kalo bikin tutorial dites mas di template blogger yang standard, kami pake standard cari code ini ga bakal pernah ada.

    ReplyDelete

Contact Form

Name

Email *

Message *