Cara membuat navigasi breadcrumb. Sebelum kita membahas tentang cara membuat navigasi breadcrum alangkah baiknya jika kita sedikit mengetahui apa sih sebenarnya yang dimaksud dengan navigasi breadcrum.

Navigasi breadcrumb 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 navigasi breadcrum ini.

Cara membuat navigasi 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>

• Selanjutnya cari <b:include data=’top’ name=’status-message’/><data:adStart/> dan tambahkan kode <b:include data=’posts’ name=’breadcrumb’/> di tengahnya. Hasilnya seperti di bawah ini.

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

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

<data:adStart/>

• Terakhir cari <b:includable id=’main’ var=’top’> lalu tambahkan kode di bawah ini tepat di atasnya.

<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 berguna untuk kita semua. Happy blogging.

Pernah menuliskan salah satunya?

cara memasang navigasi breadcrumb pada blogspot (1), cara membuat navigasi di blogspot (1), membuat navigasi breadcrumb (1),