Cara Membuat Breadcrumb di Blogspot

Tips Blog ini berkaitan dengan Cara membuat breadcrumb di blogspot. Sebelum kita membahas tentang cara membuat breadcrum di blogspot alangkah baiknya jika kita sedikit mengetahui apa sih sebenarnya yang dimaksud dengan navigasi breadcrum.

Breadcrumb di blogspot adalah pemetaan navigasi dimana kita berada dalam sebuah blog. Biasanya berada di bagian atas sebelum judul postingan sebuah blog. Karena berada di bagian paling atas, otomatis navigasi breadcrumb ini menambah semakin SEO Friendly
dan oleh karenanya tidak ada ruginya bukan jika kita sedikit meluangkan waktu untuk memasangnya di blog kita.

Malam mulai larut, baiklah langsung saja kita mulai operasi pemasangan breadcrum di blogspot ini.

Cara membuat breadcrumb di blogspot: 

• Masuk ke dasbord >> rancangan >> edit HTML (gunakan 'ctrl+f' untuk mempermudah)

• Cari kode HTML ]]></b:skin> (gunakan 'ctrl+f' untuk mempermudah)

• Masukan kode CSS dibawah tepat di atas kode ]]></b:skin>

 .breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}

maka hasilnya:

  .breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}

]]></b:skin> 

• Cari kode HTML <b:include data='top' name='status-message'/> (gunakan 'ctrl+f' untuk mempermudah)
• Masukan kode berikut ini di antara kode  <b:include data='top' name='status-message'/> dan <data:defaultAdStart/>

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

maka hasilnya:

<b:include data='top' name='status-message'/>

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

<data:defaultAdStart/>

• Terakhir cari kode HTML <b:includable id='main' var='top'> (gunakan 'ctrl+f' untuk mempermudah
• Masukan kode di bawah ini 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'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable> 

Selesai, perhatikan penempatan kode yang baru dipasang sekali lagi sebelum menyimpan.

Semoga Tips Blog Cara membuat breadcrumb di blogspot ini bermanfaat untuk anda.