Cara membuat Breadcrumb di blog

Cara membuat Breadcrumb di blog - breadcrumb adalah teks navigasi agar memudahkan pada visitor menjelajah blog kita, dan breadcrumb juga agar membuat blog kita SEO Friendly. ok bagi sobat deimon yang pengen masang breadcrumb langsung aja ke tutornya.

1. Login terlebih dahulu ke Dasbor Blogger sobat

2. Kemudian pilih tab Rancangan >> Edit HTML >> download dulu Template blog sobat untuk jaga-jaga kalo gagal

3. Kita mulai menambah CSS nya, cari kode ]]></b:skin> ingat gunakan Ctrl + F atau F3 untuk memudahkan pencarian, kemudian tambahkan kode berikut di atas  ]]></b:skin>

.breadcrumbs
{
padding:5px 5px 5px 0;
margin: 0 0 5px;
font-size:inherit;
font-family: Georgia, trebuchet ms, Verdana;
line-height: 1.4em;
border-bottom:4px double #000000;
}

4. kalo sudah kemudian cari kode <b:include data='top' name='status-message'/>, bila tedapat 2 kode <b:include data='top' name='status-message'/> tambahkan saja kode berikut di setiap kode <b:include data='top' name='status-message'/>

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

5.  Kemudian cari kode <b:includable id='main' var='top'> lalu tambahkan kode berikut di atasnya 

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

 6. Klik simpan dan lihat hasilnya :)

semoga bermanfaat bagi sobat :)