Breadcrumbs adalah salah satu fitur dalam blog/situs internet. Breadcrumbs biasanya terletak di bagian atas halaman.
Fungsi breadcrumbs adalah menginformasikan kepada pembaca posisi halaman yang sedang dibuka ada di dalam kategori dan subkategori apa, sehingga pembaca bisa mengetahui posisi halaman. Lewat breadcrumbs pembaca juga dapat terbantu untuk memahami isi halaman. Pembaca juga bisa saja menjadi tertarik untuk melihat post lainnya dalam kategori yang ditunjukkan.
Kok namanya breadcrumbs?
Kata breadcrumb secara harfiah bila diterjemahkan ke Bahasa Indonesia berarti remah roti. Sedangkan bentuk jamaknya, breadcrumbs dapat berarti (banyak) remah-remah roti atau bisa juga berarti tepung roti (panir).
Ternyata pemberian nama breadcrumbs (remah roti) untuk bagian ini berasal dari dongeng anak-anak. Istilah ini diambil dari dongeng Jerman Hansel dan Gretel (Inggris: Hansel and Gretel, Jerman: Hänsel und Gretel; dibaca: Hénsel und gretel, "é" seperti huruf "e" pada kata cetak).
Dalam dongeng Hansel dan Gretel, ada satu saat ketika orang tua dari kakak beradik Hansel-Gretel ingin membuang mereka ke hutan karena tidak kuat mengurus mereka dalam keadaan miskin dan kelaparan. Karena Hansel mengetahui rencana jahat orang tua mereka, di sepanjang jalan Hansel pun menebarkan remah roti (breadcrumb) agar dari hutan mereka bisa mengikuti jejak remah roti dan kembali ke rumah, walaupun setelah itu ternyata mereka gagal pulang karena remah rotinya dimakan burung.
Berdasarkan dongeng itulah muncul istilah breadcrumbs dalam situs/blog, yang tujuannya mirip dengan dongeng. Di dongeng, fungsi si "remah-remah roti" ini adalah untuk menunjukkan posisi si Hansel dan Gretel dari rumah dan melacak jalan kembali ke rumah. Sedangkan di website, si "remah-remah roti" ini berfungsi untuk menunjukkan posisi halaman dari halaman beranda (home) dan dapat mengarahkan kembali ke beranda.
Desain breadcrumbs
Artikel ini menjelaskan kode untuk membuat breadcrumb hanya untuk blog blogger/blogspot, tidak untuk yang lain, karena data blog diambil dari Blogger JSON Feed API. Bahasa yang digunakan adalah HTML dan JavaScript.
Ini adalah desain breadcrumb yang akan dibuat:
Kode
- Tambahkan kode HTML ini tepat di atas judul post (di atas conditional tag <b:if cond='data:post.title'> dan elemen <h1 class="post-title entry-title">) melalui edit tema (Tema » Panah di sebelah kanan "Sesuaikan" » Edit)
- Tambahkan kode javascript di bawah ini di dalam tag <head></head>. Salin bersama dengan kode //<[CDATA[ dan //]]>.
- Tambahkan ini di bagian akhir halaman (sebelum tag </body>) atau di bagian akhir post (sebelum komentar):
- Tambahkan kode CSS. Kurang lebih seperti di bawah ini. Bebas untuk mengatur bagaimanapun gayanya.
- Opsional: Buat satu post baru, atau buka post yang sudah ada. Di bagian akhir masukkan script ini:
<div id='breadcrumb'/>
<b:if cond="data:view.isPost"> /* Blogger conditional tag untuk membuat breadcrumbs
hanya terlihat di Post, tidak di halaman lain */
<script>
//<[CDATA[
var tagOrder;
function breadcrumb_generator(a){ /* a = data JSON Feed blog yang didapat dari
Blogger JSON Feed Api */
// mengambil tag dengan ID "breadcrumb" yang sudah ditambahkan lewat proses di atas
var breadcrumb = document.getElementById('breadcrumb');
// mengambil judul post dari halaman
var postTitle = document.getElementsByClassName('post-title')[0];
// data entry post
var post = a.feed.entry;
// Mulai dari homelink (halaman beranda)
var homelink = document.createElement('a');
hlink.innerHTML = 'Home';
hlink.href = '/';
breadcrumb.appendChild(hlink);
// Menambahkan kategori
for (var i = 0; i < post.length; i++){
if (post[i].title.$t == postTitle.innerHTML){
/* post[i].title.$t atau a.feed.entry[i].title.$t adalah judul post ke sekian (i)
dalam JSON Feed API. kondisi ini mengecek apakah judul post di satu halaman
sesuai dengan judul di JSON Feed Api */
var postCategory = post[i].category; /* mengambil semua kategori dalam satu
post berjudul post[i].title.$t */
for (var j = 0; j < postCategory.length; j++){
// Menambahkan separator (pembatas) tanda "»"
var separator = document.createElement('span');
separator.classList.add('separator');
separator.innerHTML = '»'; // "»" adalah kode HTML untuk tanda "»"
breadcrumb.appendChild(separator);
// Menambahkan kategori dan linknya
var categorylink = document.createElement('a');
// Mengecek jika var tagOrder ada
if (!tagOrder) {
categorylink.innerHTML = postCategory[j].term;
}
else {
categorylink.innerHTML = postCategory[tagOrder[j]].term;
}
categorylink.href = `https://domainblog.blogspot.com/search/label/${categorylink.innerHTML}`;
breadcrumb.appendChild(categorylink);
}
/* Menambahkan judul di akhir breadcrumbs*/
separator = document.createElement('span');
separator.classList.add('title');
separator.innerHTML = '»';
breadcrumb.appendChild(separator);
var judul = document.createElement('span');
judul.innerHTML=`<b>${pos[i].title.$t}</b>`;
breadcrumb.appendChild(judul);
}
}
}
//]]>
</script>
</b:if>
<script src="https://domainblog.blogspot.com/feeds/posts/summary?max-results=999&alt=json-in-script&callback=breadcrumb_generator"></script>
<style>
#breadcrumb {
font-size: 14px; /* Sebaiknya lebih kecil dari font paragraf */
font-family: serif; /* Sesuaikan dengan tema */
}
#breadcrumb b {
font-weight: bold; /* Bebas */
}
.separator {
margin: 0 5px;
font-weight: bold; /* Bebas */
}
</style>
<script>
tagOrder = [1,2,0]; // penjelasan di bawah
</script>
Array tagOrder, seperti yang sudah disebutkan di kode javascript pertama, adalah urutan tag yang mau ditampilkan terlebih dahulu di breadcrumbs. Blogger selalu mengurutkan tag/kategori sesuai dengan urutan abjad Latin (ABCD~~Z). Semua tag tersebut juga kedudukannya sama, tidak ada yang berperan sebagai sub-kategori atau sub-sub-kategori. Contohnya bila ada 3 tag yang ditambahkan: "Media Sosial", "Internet", "Fesbuk"; maka akan ditampilkan sebagai: "Fesbuk", "Internet", "Media Sosial".
Variabel tagOrder ditentukan bila ingin membuat seolah-olah post tersebut memiliki kategori utama, sub-kategori, dan sub-sub-kategori. contohnya, post termasuk dalam kategori "Internet", sub-kategori "Media Sosial", dan sub-sub-kategori "Fesbuk"
Dalam urutan tag yang disusun oleh blogger: "Fesbuk", "Internet", "Media Sosial", "Fesbuk" memiliki urutan/index 0, "Internet" memiliki urutan 1, dan "Media Sosial" memiliki urutan 2. Bila kita ingin menampilkan sesuai susunan ini: "Internet", "Media Sosial", "Fesbuk" maka buat isi array tagOrder menjadi [1,2,0]. Namun array ini tidak perlu diberi nilai jika tidak ingin mengurutkannya.
Sekian
Itu adalah kode untuk membuat breadcrumbs menggunakan HTML (+CSS) dan JavaScript. Bila ada kesalahan atau kode tidak berfungsi mohon tulis di komentar, agar kesalahan dapat diperbaiki. Boleh juga saling berbagi kode di komentar.
Komentar
Posting Komentar