Cara Membuat/ Memasang Breadcrumbs di Blog (Blogspot)

Santos el Salam

18 September 2020

Berawal dari sebuah pertanyaan yang masuk pada kolom komentar di salah satu postingan lama blog ini, pengunjung bertanya kepada saya tentang cara membuat tampilan struktur link (maksudnya breadcrumbs) seperti yang muncul di atas judul postingan di blog saya ini. Nah, pada kesempatan kali ini, saya ingin menjawabnya sekalian berbagi tutorial kepada anda yang mungkin belum memasang fitur ini di template blog kesayangan anda. 

Contoh tampilan breadcrumbs di blog ini

Beberapa waktu lalu sebenarnya saya juga pernah membuat postingan tentang pemasangan breadcrumbs di blog. Tapi postingan tersebut saya buat berkaitan dengan breadcrumb yang bermasalah (kadaluwarsa) sehingga isinya lebih kepada cara mengganti breadcrumb tersebut dengan yang baru dan masih berlaku. Baca: Mengatasi Breadcrumbs Error Karena data-vocabulary.org schema deprecated

Meskipun begitu, tutorial pada artikel tersebut sebetulnya isinya akan hampir sama dengan yang hendak saya bagi kali ini, hanya saja kali ini bukan sekedar mengganti tapi memasang atau menambahkan. 

Pentingnya Keberadaan Breadcrumb

Keberadaan Breadcrumbs sendiri seakan sudah menjadi hal wajib di kalangan blogger. Pembuat (desainer) template blog juga kebanyakan/ hampir semua sudah menyertakan fitur ini di masing-masing template yang dibagikan atau dijualnya. Namun bagi anda yang masih menggunakan template bawaan yang disediakan blogspot, biasanya ada yang belum dilengkapi fitur ini sehingga ada baiknya anda tambahkan fitur ini agar blog anda lebih keren dan berkinerja maksimal. 

Apa Itu Breadcrumbs? 

Breadcrumbs atau secara harfiah berarti jejak remah roti ini memang cukup penting keberadaannya. Ibarat alat penunjuk jalan, breadcrumb berfungsi untuk mengarahkan pengunjung agar mereka tahu dimana posisi mereka saat membuka sebuah postingan di sebuah blog. Fitur ini juga akan menampilkan hierarki dari postingan tersebut berupa link kategori serupa hingga halaman beranda (home) sehingga pengunjung akan lebih mudah untuk menjelajahi isi dalam blog tersebut secara lebih leluasa. 

Bagi faktor SEO, keberadaan breadcrumbs di suatu blog juga cukup penting karena berkaitan dengan kelengkapan navigasi di blog tersebut. Dengan adanya fitur ini, navigasi di blog tersebut akan menjadi lebih jelas dan lebih mudah dibaca pada halaman pencarian Google sehingga pengunjung yang menemukannya akan langsung melihat kategori yang menjadi induk dari artikel tersebut.

Nah sekarang bagaimana cara memasangnya?, silahkan simak langkah-langkah di bawah ini.

Cara Memasang Breadcrumbs di Blogger

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Cari kode ]]></b:skin> atau kode </style>, kemudian letakkan kode CSS berikut ini di atasnya.

.breadcrumb { margin-bottom: 20px; } .breadcrumb, .breadcrumb a, .breadcrumb a:hover { font-size: 12px;}

4. Masih di dalam html template, selanjutnya cari kode <b:includable id='comment-form' var='post'>. 

Jika sudah ketemu, tambahkan kode berikut ini di atas kode tersebut. 

<b:includable id='breadcrumb' var='posts'> <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'>Home</span></a> </span> <b:if cond='data:post.labels'> <b:loop index='num' values='data:post.labels' var='label'> &amp;nbsp;&#187;&amp;nbsp; <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> &amp;nbsp;&#187;&amp;nbsp; <span><data:post.title/></span> <b:else/> &amp;nbsp;&#187;&amp;nbsp; Tidak Ada Kategori </b:if> </div> </b:loop> </b:if> </b:includable>

5. Jangan disimpan dulu, terakhir cari lagi kode <b:includable id='main' var='top'>. 

Jika sudah ketemu, letakkan kode berikut ini di bawahnya:

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

Kalau kode <b:includable id='main' var='top'> tidak bisa anda temukan, silahkan cari kode seperti di bawah ini:

<h1 class='entry-title'>

Atau:

<h2 class='entry-title'>

Atau juga:

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

Kode-kode tersebut intinya adalah kode html untuk judul postingan. Kalau sudah ketemu, letakkan kode <b:include data='posts' name='breadcrumb'/> di atas kode html untuk judul postingan tersebut. 

6. Simpan kembali template anda. 

Silahkan anda bisa melihat hasilnya, fitur breadcrumbs pun sudah muncul di atas judul artikel blog anda. 

Ohya, beberapa blogger biasanya ada yang menghilangkan judul postingan di tampilan breadcrumbsnya. kalau anda juga ingin menghilangkannya, silahkan hapus yang saya beri warna merah pada kode di atas. Demikian. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Membuat/ Memasang Breadcrumbs di Blog (Blogspot). Please share...!

Facebook

Twitter