Cara Bina Breadcrumbs Pada Blogspot

Asalamualaikum dan Salam Sejahtera.

Hari ini Saya akan Kongsikan bagaimana menghasilkan breadcrumbs pada blogspot dengan css yang lebih stylish. Breadcrumbs adalah tetingkat link yang memaparkan setiap label yang terdapat pada sesebuah artikel.

Breadcrumbs sangat penting bagi membolehkannya mudah di index oleh search engine dalam masa yang sama ia memberi kelebihan kepada blogger dalam meningkatkan lagi pageview berdasarkan link-link label yang terpapar.

Breadcrumbs akan kelihatan seperti ini

Home page > Section page > Subsection page or Home page >> Section page >> Subsection page.

Berikut adalah cara meletakkan Breadcrumbs pada blog anda:
Langkah 1:
Login Ke account Blogspot anda

Langkah 2:
Klik Template >> Edit HTML

Langkah 3:
Tekan Ctrl (Win)/Command (mac)+ F untuk menghidupkan fungsi carian. Cari kod berikut:

 <div class='post hentry'>

Tak Jumpa? Cari Kod Ini Plak

 <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

 Letakkan kod berikut Selepas <div class='post hentry'>:

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <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>


Langkah 4:
Langkah terakhir adalah dengan meletakkan CSS Style pada breadcrumbs tersebut. Cari Kod berikut:

]]></b:skin>


Gantikan Dengan Kod Berikut:

/* Breadcrumbs CSS info @ http://seo.rahmadgraphic.my/ */
.breadcrumbs{background:#ebebeb;height:30px;line-height:30px;border:solid 1px #c2c2c2;width:auto;overflow:hidden;padding-left:10px;font-size:95%;margin:0}
.breadcrumbs li{list-style-type:none;display:inline-block;float:left}
.breadcrumbs a{display:inline-block;background-image:url(http://4.bp.blogspot.com/-WLPWocFdw1g/T8pvm1tUvQI/AAAAAAAAGeo/RdXYGXddUmY/s1600/breadcrumb.gif);background-repeat:no-repeat;background-position:right;padding-right:10px;text-decoration:none;outline:none;}
.breadcrumbs a:hover{color:#000}
]]></b:skin>


Jika mahu gunakan Style CSS standard

Gantikan Dengan Kod Berikut:

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef}
]]></b:skin>

Langkah 5:
Klik Save Template Dan Lihat Hasilnya.

Tamat. Mudah Bukan? Jika anda mengalami sebarang masalah jangan malu untuk bertanya pada ruangan komen.