Cara Membuat Menu Breadcrumb di Platform Blogger

Gambar ilustrasi beberapa hierarki dalam menu Breadcrumb

Tehnologi informasi dimulai dari menulis. Kita pemilik situs web atau blog pribadi masih tetap melangkah meskipun tampaknya dunia blogging jarang diminati. Ada salah satu tema lama tapi sampai detik ini menjadi bagian tak terpisahkan dari sebuah halaman. Itu adalah menu Breadcrumb yang sederhana. Artikel ini akan memberi informasi tentang cara membuat menu breadcrumb di platform Blogger. 

Breadcrumb atau dalam Bahasa Indonesia disebut remah roti, adalah navigasi sekunder yang menunjukkan posisi halaman saat ini dalam struktur situs web. Breadcrumb memudahkan pengunjung untuk memahami di mana mereka berada dan menavigasi ke tingkat yang lebih tinggi dalam hierarki/urutan setiap bagian situs web.

Dalam konteks penulis yang menyimpan karya mereka pada platform Blogger, menu breadcrumb pada umumnya menunjukkan link 3 jalur yaitu jalur dari beranda, ke kategoi/label lalu postingan blog yang sedang dibaca. Breadcrumb tidak hanya meningkatkan pengalaman pengguna (UX), tetapi juga dapat membantu SEO dengan memberikan struktur yang jelas bagi mesin pencari. Implementasinya cukup baik dari sudut pandang tampilan halaman khususnya menu tambahan yang terlihat pada bagian kiri atas judul artikel. 

Pertanyaan mengapa breadcumb perlu kita tampilkan? Untuk memberi nilai lebih tentang cara pengelolaan situs. 

Apakah itu penting? Untuk membantu optimasi SEO,  bisa jadi itu penting. 

Bukankah sudah ada menu bawaan template yang siap kita gunakan? Iya, tapi dengan memberi kesan pertama pada bagian atas judul artikel, diharapkan situs kita tidak mudah dillupakan. 

Mengapa Breadcrumb Penting untuk Blog Anda?

Ada hal-hal sederhana tapi tak bisa ditinggalkan oleh karena kegunaannya yang membantu meningkatkan peran kita sebagai penulis konten.

Meningkatkan Navigasi

Breadcrumb menyederhanakan navigasi, terutama untuk situs web dengan struktur yang kompleks. Pengunjung dapat dengan mudah kembali ke kategori atau halaman induk tanpa harus menggunakan tombol "kembali" atau menu utama.

Meningkatkan User Experience (UX)

Kemudahan navigasi berkontribusi pada pengalaman pengguna yang positif. Pengunjung yang puas cenderung menghabiskan lebih banyak waktu di situs Anda dan kembali lagi di masa mendatang.

Membantu Optimasi SEO Situs

Breadcrumb memberikan struktur yang jelas bagi mesin pencari, membantu mereka memahami hierarki situs Anda dan mengindeks konten dengan lebih efektif.  Ini dapat meningkatkan peringkat pencarian Anda.

Mengurangi Bounce Rate

Dengan memudahkan navigasi, breadcrumb dapat mengurangi bounce rate (persentase pengunjung yang meninggalkan situs setelah hanya melihat satu halaman).

Meningkatkan Profesionalisme

Breadcrumb memberikan tampilan yang profesional dan terorganisir pada blog Anda. Bayangkan Anda adalah pemilik usaha toko asesories HP. Di depan toko pada bagian kiri pintu masuk,  Anda menyediakan spanduk yang menunjukkan informasi produk Anda. 

Dengan spanduk/baner yang memuat informasi tentang  toko dan semua produk,  maka calon pembeli dapat lebih mudah mencari produk. Sehingga mereka akan lebih banyak memberi tanggapan baik tentang toko Anda. 

Langkah-Langkah Membuat Breadcrumb Di Blogger

1. Login ke Blogger: Masuk ke akun Blogger Anda dan pilih blog yang ingin Anda tambahkan menu breadcrumb.

2.  Buka Tema:  Di menu sebelah kiri, klik "Tema".

3. Edit HTML: Klik tombol panah bawah di sebelah tombol "Kustomisasi" dan pilih "Edit HTML".

4. Cadangkan Tema Anda: Sebelum melakukan perubahan apa pun, sangat disarankan untuk mencadangkan tema Anda.  Mengapa dicadangkan? Mungkin saja setelah Anda memasang kode ke template, ada kesalahan kode yang tidak bisa diterima oleh template bawaan blogger. Caranya adalah klik ikon tiga titik di pojok kanan atas editor HTML dan pilih "Unduh tema".

5. Tambahkan Kode Breadcrumb.

Berikut adalah 3 langkah untuk memasang  kode breadcrumb:

Langkah 1: 

Cari kode ]]></b:skin> dan letakkan kode CSS berikut ini di atasnya.

.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#000;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap} .breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#000;font-weight:400} .breadcrumbs a:hover{color:#089416}.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px} .breadcrumbs svg path{fill:#000}

Langkah 2: 

Cari kode <b:includable id='commentForm' var='post'> dan tambahkan kode berikut ini di atasnya. 

Langkah 3: Sekarang Anda pasang kode pemanggilnya, geser lagi ke bawah dan cari kode <h3 class='post-title entry-title'> 

Kode yang diawali tag h3 di atas adalah kode html untuk judul postingan. Anda dapat memukannya di widget "Blog1" pada halaman HTML template.  Kalau sudah ketemu, letakkan kode berikut ini di atasnya. 

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

Pastikan Anda memeriksa kembali kode-kode yang baru saja Anda masukkan ke template. 

6. Simpan.

Untuk membuka dan menguji hasil pemasangan menu Breadcrumb,  buka salah satu post artikel di blog Anda. 

Baca juga: Tips Untuk Blog Penerbit Iklan Google