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 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:
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".
1. Klik Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>
3. Temukan kode <b:includable id='breadcrumb' var='posts'> ... </b:includable>
4. Hapus dan ganti dengan kode breadcrumb tanpa error berikut ini:
4. Cari kode <b:includable id='main' var='top'> dan simpan kode berikut ini di bawahnya:
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:
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 == "item"'>
<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 + "?&max-results=16"' 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 != "true"'>
<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 + "?&max-results=10"' 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.
1. Klik "Template" > "Edit HTML"
3. Cari (Ctrl+F) kode ]]></b:skin>
4. Copy + Paste kode berikut ini tepat sebelum kode ]]></b:skin>
5. Cari kode <div class='post hentry'> dan Copas kode berikut ini tepat setelahnya:
6. SAVE Template!
Mudah 'kan cara memasang breadcrumb di Blogspot? Oh.... gak muncul? Coba cara lainnya berikut ini.
2. Cari dan Ganti kode <b:includable id='main' var='top'> dengan kode di bawah ini:
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.
2. Temukan kode <b:includable id='main' var='top'> dan ganti dengan kode berikut ini:
Itu dia cara memasang breadcrumb di Blogger versi dua atau versi lama.
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.
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 == "item"'> <div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> » <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 != "true"'> , </b:if> </b:loop>
</b:if> » <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 == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- 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'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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 == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- 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'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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&nbsp;</span></a></span>&nbsp;›<b:loop values='data:post.labels' var='label'><span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?max-results=6"' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != "true"'> › </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 >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).*
Good Luck and Happy Blogging! (www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
wah berjaya..terima kasih
ReplyDeletesama-sama.... berjaya = berhasil :))
Deletesiang, mau tanya misal saya ketik contohblognih.blogspot.com di google hasil pencariannya ada 2 postingan berjejer di bawah judul blog.
ReplyDeleteitu 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
DeleteSatu hal lagi: itu karena http://www.zeropromosi.com/ menghapus credit link CB Blogger !!! Fatal akibatnya lho..... Kembalikan link CB !!!
Deletesredit link ituu yang mana kak?
ReplyDeletedi Footer, bagian bawah banget, misalnya begini:
Delete. 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
ReplyDeleteKesulitan gan, kode ]]> kog ngk ada di template simple ya..
ReplyDeletesimpan aja kodenya di bawah kode < / style > dengan diapit kode < style > kode si sini < / style >
DeleteKode < 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.
ReplyDeleteMakasih 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!
makasih gan tutorialnya sangat membantu... akhirnya nongol juga tag di breadcrumb
ReplyDeleteAlhamdulillah berhasil. setiap kali mencuba coding dari blog ini belum pernah gagal.. terima kasih banyak atas perkongsian ilmunya..
ReplyDeleteBagaimana 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..
ReplyDeleteKok saya ga berhasil ya, udah berulang kali di coba...malah terakhir muncul kalimat : parsing gitu.
ReplyDeleteKalo bikin tutorial dites mas di template blogger yang standard, kami pake standard cari code ini ga bakal pernah ada.
ReplyDeletenetworkanimenewes
ReplyDeleteanimemania
film animasi
healty
trick
baca manga
ilmu pengetahuan
back link
jualan online
Owalaaaaahhh spam! Wkwkwk....!
Delete