Cara Menambahkan Breadcrumbs pada Theme Blogger

Breadcrumbs merupakan navigasi kecil yang biasanya terletak di atas judul artikel. Keberadaannya sangat penting meskipun namanya adalah remahan roti. Iya "remah-remah roti" jika diterjemahkan ke dalam bahasa kita. Dan seorang pemula harus tahu mengapa disebut breadcrumbs. Meskipun belajar desain web yang dilakukan selama ini secara otodidak.

Untuk itu, coba tarik kilas balik perjalanan hidup teman-teman semasa kecil. Barangkali dulu pernah nonton film kartun tentang Hansel dan Gretel? Saya sendiri tidak ingat judul film kartun yang ditayangkan TVRI jadul itu. Namun saat membaca dongeng itu seperti tidak asing dengan alur ceritanya. Coba saja baca sendiri tautan diatas tentang kisah dua anak kecil dan penyihir.

Sehingga wajar jika breadcrumbs dijadikan istilah dalam desain web. Karena remah-remah roti itulah yang dijadikan penunjuk jalan ke rumah. Hal ini sebagaimana cerita rakyat Jerman yang ditulis oleh Brothers Grimm tersebut.

Begitu juga dalam dunia internet yang luas dengan halaman yang banyak. Ibaratnya, breadcrumbs ini menjadi penunjuk jalan kedua setelah navigasi utama. Sama halnya dengan dongeng tadi yang terpaksa menggunakan remahan karena gagal mendapatkan kerikil putih.

Teman-teman tertarik belajar membuat template selanjutnya? Simak bahasan kali ini seputar cara menambahkan breadcrumbs.

Cara Menambahkan Breadcrumbs Theme Blogger

Seperti biasa kita akan menggunakan theme blogger yang dibangun berdasarkan Bootstrap. Theme ini karya sendiri setelah belajar web desain otodidak. Jika tertarik untuk bahan praktek bisa unduh warasfood theme terlebih dahulu.

Berikutnya, silahkan ikuti tahapan dibawah ini untuk membuat breadcrumbs. Jangan lupa backup theme untuk menghindari kesalahan sebelum menerapkan kode.

1. Login ke dashboard Blogger.

2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".

3. Copy baris kode berikut.

<!-- Breadcrumb --> <b:if cond='data:view.isPost'> <b:loop values='data:posts' var='post'> <div class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <a expr:href='data:blog.homepageUrl.canonical' itemprop='item' title='Home'> <meta content='1' itemprop='position'/> <span itemprop='name'>Beranda</span></a> </span> <b:if cond='data:post.labels'> <b:loop index='num' values='data:post.labels' var='label'>  ›  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <meta expr:content='data:num+2' itemprop='position'/> <a expr:href='data:label.url.canonical' expr:title='data:label.name' itemprop='item'> <span itemprop='name'><data:label.name/></span> </a> </span> </b:loop> <b:else/>  ›  Does not have category </b:if> </div> </b:loop> </b:if> <!--Breadcrumb-->

4. Tempatkan kode pada nomor 3 di atas sebelum baris kode h3 seperti di bawah ini. Jangan ragu jika mendapati baris kode ini terdapat pada dua tempat. Silahkan tempatkan kode pada nomor 3 di atas sebelum kode <h3 class='post-title entry-title' itemprop='name'> yang kedua dan sesudah "<b:if cond='data:post.title'>"

<h3 class='post-title entry-title' itemprop='name'>

5. Copy baris kode di bawah ini dan tempatkan diantara tag <b:skin><![CDATA[/* dan  ]]></b:skin>.

<!--Breadcrumb--> .breadcrumb { margin-bottom: 20px; } .breadcrumb, .breadcrumb a, .breadcrumb a:hover { font-size: 14px; color: #292b2c; }

6. Simpan template.

7. Link demo bisa lihat di website yang sama.

Demo

Kesimpulan

Uraaaaa............ mudah ya menempatkan script breadcrumbs pada theme Blogger. Jika ingin melakukan perubahan pada warna dan ukuran huruf juga mudah. Ukuran huruf bisa edit pada bagian "font-size: 14px;". Sedangkan warna huruf bisa edit bagian "color:#292b2c;". Kode ini keduanya bisa ditemukan pada baris kode nomor 5 di atas yang ditempatkan antara <b:skin><![CDATA[/* dan  ]]></b:skin>

Sampai tahapan ini ada yang perlu kita diskusikan? Terima kasih sudah membaca dan tunggu artikel selanjutnya seputar cara membuat theme sendiri. Akhir kata, sekian tutorial kali ini tentang cara menambahkan breadcrumbs pada theme blogger yang dibangun berdasarkan bootstrap..

Selamat mencoba.

Baca Juga