KLIPING DUNIA: Fungsi & Cara Membuat Navigasi Breadcrumbs Untuk Blogspot

Sobat sudah tentu tau apa itu breadcrumbs dan sudah tau fungsinya seperti apa, namun jika diantara sobat belum tau apa-apa tentang breadcrumbs ini, baiklah saya jelaskan terlebih dahulu mengenai fungsi dan penjelasan breadcrumbs ini sebelum lanjut ke pemaparan tentang cara pemasangannya pada blog.

1. Breadcrumbs menurut wikipedia

Breadcrumbs biasanya muncul secara horizontal di bagian atas sebuah halaman web, biasanya ada di bawah bar judul atau header. Breadcrumbs menyediakan link kembali ke halaman sebelumnya kepada setiap pengguna menavigasi antar link untuk menuju ke halaman yang aktif atau halaman induk dari halaman yang aktif. Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Sebuah tanda yang lebih besar dari (>) sering berfungsi sebagai pemisah hirarki, ataupun dapat menggunakan simbol lainnya seperti » atau >, serta beragam grafik.

Breadcrumbs biasanya terlihat seperti ini:

Home page > Nama Kategori > Judul Postingan

atau

Home page : Nama Kategori : Judul Postingan

Sumber : Wikipedia

2. Breadcrumbs menurut Saya (lostsector)

Breadcrumbs adalah petunjuk yang memudahkan bagi para vistor untuk mengetahui posisi pada sebuah blog/website dimana pada breadcrumbs ini terdapat dua sampai tiga tag yang berisikan link aktif (penghubung) sehingga memudahkan pengunjung untuk kembali ke halaman / label sebelumnya atau bahkan kembali pada menu homepage blog/web.

Nah, selain hal tersebut di atas, breadcrumbs juga sangat baik untuk SEO karena akan memperkaya keywords pada setiap halaman atau postingan. Berikut contoh gambar breadcrumbs :

Sekarang, untuk pemasangannya sendiri memerlukan ketelitian dalam penempatan kode-kodenya karena jika terjadi kesalahan, maka breadcrumbs ini tidak akan berfungsi atau tidak bisa ditampilkan pada blog/website.

Beri centang pada "Expand Template Widget"

Copy kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin>

.breadcrumbs {

background: #fff;

float: left;

border: 1px solid #E6E6E6;

width: 575px;

font-size: 11px;

margin: 10px 10px 10px 10px;

padding: 5px 10px 5px 10px;

}

Lanjutkan dengan mencari kode di bawah ini :

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

Jika sudah ketemu, copy kode di bawah ini dan pastekan tepat di bawah kode di atas

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

Langkah selanjutnya, cari kode <b:includable id='main' var='top'> kemudian copy kode di bawah ini dan pastekan tepat di bawahnya

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType == "static_page"'>

<div class='breadcrumbs'>

<span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pagename/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == "item"'>



<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' rel="v:url" property="v:title">Home</a></span>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == "true"'>

» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>

</b:if>

</b:loop>

» <span><data:post.title/></span>

</div>

<b:else/>

<div class='breadcrumbs'>

<span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span>

</div>

</b:if>

</b:loop>

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>



<div class='breadcrumbs'>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pagename/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == "index"'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == ""'>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>

<b:else/>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

Keterangan :

Kode yang saya tandai dengan warna biru di atas adalah kode yang menampilkan label terakhir dari postingan, tetapi jika ingin menampilkan semua label pada menu navigasi breadcrumbs, maka hapus kode tersebut.