Kode HTML untuk membuat breadcrumb blog

Bagi-bagi tips dan trik blogging tentang kode HTML untuk membuat breadcrumb di blog yang dibuat dengan menggunakan CMS blogger dan wordpress yang berbayar.

Apa itu breadcrumb blog?

Untuk tahu arti, penjelasan atau definisinya, lihat dulu gambar di bawah ini!

DEMO 

Tulisan Home >> Ilmu Forex >> Perbedaan leverage 1:500 dengan 1:1000 seperti yang ada dalam kotak merah pada gambar di atas itulah yang kami maksud dengan breadcrumb blog.

Home adalah merupakan home dari blog, Ilmu Forex adalah merupakan kategori artikel blog sedangkan Perbedaan leverage 1:500 dengan 1:1000 adalah merupakan judul artikel blog.
Breadcrumb biasanya akan muncul di bawahnya kolom navigasi blog atau di atasnya artikel blog yang kita buka.
Menurut pendapat kami, dengan dipasangnya breadcrumb, tampilan blog akan tampil lebih menarik dan barangkali bisa juga untuk memudahkan blog yang dipasang breadcrumb tersebut artikelnya dapat diindex oleh search engine google.

Sekarang kamu sudah paham kan? apa itu breadcrumb blog itu?

Kode HTML untuk membuat breadcrumb seperti di atas adalah sebagai berikut :

Pertama adalah seperti ini ...

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

Kedua adalah seperti ini ...

<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'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</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>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Setelah kamu tahu kode HTML breadcrumbnya, apakah kamu tertarik dan berminat untuk memasang kode HTML breadcrumb di atas ke blog kamu?

Bila kamu tertarik dan berminat memasang kode HTML breadcrumb di atas ke blog kamu, caranya adalah :
Login ke dasbor blogger kamu - lalu klik opsi lainnya - lalu klik template - lalu klik edit HTML - lalu copy & pastekan kode HTML breadcrumb yang berwarna merah di atas di atasnya ]]></b:skin>
Kalau sudah copy & pastekan kode HTML breadcrumb yang berwarna biru di atas di bawahnya <b:includable id='main' var='top'> - lalu klik pratinjau template dulu - bila terjadi error, untuk cari aman, yaitu supaya blog kamu kembali seperti keadaan semula, silahkan kamu keluar atau log out dari dasbor blogger kamu atau kamu matikan komputer kamu saja, tetapi bila setelah kamu klik pratinjau template, tidak terjadi error, selanjutnya kamu klik tulisan simpan template.

Selesai, lalu lihatlah hasilnya dengan membuka salah satu judul artikel blog kamu.

Seperti itulah cara memasang breadcrumb blog yang di buat di blogger, tetapi bila blog atau situs web kamu di buat di wordpress selfhosting (berbayar), kode HTML untuk membuat breadcrumb'nya adalah sebagai berikut :

<div id="breadcrumb">
<a title="Go to homepage" href="http://susukambingetawaskey.blogspot.com/">Home</a> &raquo; <?php the_category(' &raquo; '); ?> &raquo; <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</div>

Keterangan : sebelum dipaste ganti dulu tulisan berwarna merah di atas dengan URL situs web wordpress kamu.

Tambahkan kode HTML breadcrumb berwarna hijau di atas di bawahnya kode get_header(); ?> yang ada di file single post (single.php) wordpress kamu.

#breadcrumb{line-height:14px;margin:5px;padding:5px}

Tambahkan kode HTML breadcrumb berwarna ungu di atas ke bagian paling bawah file stylesheet (style.css) wordpress kamu

Contoh tampilan breadcrumb di situs web wordpress selfhosting (berbayar).

Baca juga: Cara memasang breadcrumb diwebsite wordpress dengan plugin Breadcrumb NavXT.

Demikianlah informasi dari kami mengenai kode HTML untuk membuat breadcrumb blog, semoga ilmu blogging kamu jadi bertambah.

---