Membuat Navigasi BreadCrumbs di Blogspot dan Wordpress

Breadcrumbs Navigasi adalah sebuah penunjuk arah bagi pengunjung Blog yang menunjukan Posisi Postingan Yang sedang di Baca terhadap Kategori Blog yang ada. Contoh: "Home >> Kategori/Sub Kategori > Judul Postingan yang dibaca"
Beberapa waktu yang lalu saya cari kemana mana, dan mencoba salah satu tutorial yang saya baca, namun baru kali ini saya berhasil dan sukses setelah membaca tutorial dari Mas Bambang Oke.
Langsung saja kita menuju Ke TKP Blogger/Blogspot

 BLOGSPOT


Langkah Pertama Masuk Ke Dashboard Blog anda >> Edit Layout HTML
draft.blogspot.com >> Edit layout >Edit HTML (jangan Lupa Expand Widget HTML)

Cari Kode Berikut ini:
<b:includable id='main' var='top'>
(bisa menggunakan Fasilitas Pencarian atau tekan Ctrl+F)

Copy Code Dibawah ini dan Letakan tepat diatas Kode  <b:includable id='main' var='top'>

<b:includable id='breadcrumbs' var='post'><br /> <!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com --><br /> <b:if cond='data:blog.pageType == "item"'><br /> <p class='breadcrumbs'><br /> <span class='post-labels'><br /> <b:if cond='data:post.labels'><br /> You are here:<br /> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> <span style="font-weight: bold;">&gt;</span><br /> <br /> <b:loop values='data:post.labels' var='label'><br /> <b:if cond='data:label.isLast == "true"'><br /> <a expr:href='data:label.url' rel='tag'> <data:label.name/></a><br /> </b:if><br /> </b:loop><br /> <b:if cond='data:post.title'><br /> <span style="font-weight: bold;">&gt;</span> <b><data:post.title/></b><br /> <br /> </b:if><br /> </b:if><br /> </span><br /> </p><br /> </b:if><br /> <!-- End of Breadcrums Hack --><br /> </b:includable>

Cari Kode Berikut ini <b:if cond='data:post.dateHeader'>

Lalu Copas kode berikut inidan Letakan diatas kode <b:if cond='data:post.dateHeader'>

<b:include data='post' name='breadcrumbs'/>

Tambahkan Kode CSS Berikut diatas ]]></b:skin>

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

Simpan Template anda dan Lihat Hasilnya


Nah klo untuk Wordpress Begini Caranya:

• Buka template kamu pada file single.php, cari &alt;?php the_title(); ?>. Ini adalah PHP untuk menampilkan Judul postingan.

• Paste Code ini di atas title, atau atur sendiri dibagian mana anda meletakkannya.

<b>Navigation: <a href="<?php echo get_option('home'); ?>" title="<?php bloginfo('description'); ?>">
<?php bloginfo('name'); ?></a>&rarr;
<?php if (!is_attachment()) { the_category(', '); } ?>&rarr;
<?php the_title(); ?></b><br/>

Simpan dan Lihat hasilnya.

• Atau Ada cara yang lebih mudah dengan cara menggunakan Plugin yang sudah di sediakan oleh Developer Wordpress.

Tinggal Download Aja Plugin nya Berikut Pilihanya:
Yoast Breadcrumbs untuk Mendownload dan Instal Klik aja disini  Yoas Breadcrumbs
Breadcrumb Navigation XT untuk Mendownload dan Instal Klik aja disini Breadcrumb Navigation XT
Breadcrumb Trail: WordPress Plugin  untuk Mendownload dan Instal Klik aja disini Breadcrumb Trail: WordPress Plugin
Untuk Menginstal Nya saya Yakin anda sudah Bisa.

Cukup Mudah dan ga terlalu Ribet Menurut Saya, Anda Tinggal Memasang Kode kode yang ada di posisi yang sudah saya tulis di atas. Mari Berkoment Jika Anda punya pengalaman yang berbeda atau sudah menerapkan Trik ini.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini dan untuk berlangganan gratis via email silahkan isi kotak dibawah dengan email anda, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di dankerizer.com