Cara Memasang Breadcrumb di Blogger

Cara Memasang Breadcrumb Blogger?Tahukah anda bagaimana caranya memasang breadcrumb pada Blogspot??berikut tips dan triknya. Sebenarnya breadcrumb sendiri kalau pada wordpress tinggal install plugin, namun pada blogspot tidak tersedia yang namanya plugin. Jadi kita harus pandai-pandai bergulat dengan script html..hahaha mudah kok, jangan tegang dulu..ambil nafas sdulu. Ok, baiklah kita langsung saja menuju ke TKP bagaimana cara memasang breadcrumb pada blogger.

Cara Memasang Breadcrumb Google di Blogspot / Blogger

Langkah pertama untuk memasang Breadcrumb Google tentu saja anda harus login dulu ke blognya kwkwk.

Seperti biasa, ke halaman design > edit HTML > Expand Widget Templates (jangan lupa selalu backup template sebelum editing)

Cari kode <b:include data='top' name='status-message'/> , biasanya ada 2 kode tersebut. Kalau sudah di temukan, silahkan paste kode berikut ini tepat di atasnya (paste aja di atas 2 kode yang anda temukan biar ga bingung).

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

Sekarang cari kode <b:includable id='main' var='top'> dan kalau sudah ketemu, paste kode berikut tepat di atas kode <b:includable id='main' var='top'>

<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'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</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>

Simpan Template dan selesai, anda berhasil memasang breadcrumb google di blog anda.

Untuk mempercantik Breadcrumb google yang sudah anda pasang, sekarang tambahkan sedikit sentuhan Css berikut ini yang perlu anda tambahkan di atas kode ]]></b:skin>

.breadcrumbs{margin-left:10px;padding: 5px 0;border-bottom: 1px dotted; line-height:1.4em;}

Ok itu saja artikel kali ini dan mudah-mudahan bermanfaat buat para blogger. Semoga bisa bermanfaat bagi sobat blogger semua. Amin, langsung ke TKP kawan.