6 Langkah Cara Membuat/Memasang Breadcrumbs di Blog (Blogspot)

Banyak audiens yang bertanya di kolom komentar di salah satu postingan lama blog ini, beberapa pengunjung bertanya kepada saya tentang cara membuat tampilan struktur link (maksudnya breadcrumbs) seperti yang muncul di atas judul postingan di blog saya ini. Cara membuat breadcrumb bisa dibilang mudah karena hanya memasukkan beberapa kode html pada sebuah blog, untuk itu pada kesempatan kali ini, saya akan menjelaskan secara sederhana dan menjawab pertanyaan-pertanyaan seputar breadcrumb. Ada juga cara membuat favicon blog di postingan sebelumnya yang bisa anda pelajari juga.

Pada kesempatan ini saya akan menjawabnya sekaligus berbagi tutorial kepada Anda yang mungkin belum memasang fitur ini di template blog anda, dan yang terpenting adalah memperhatikan secara detail langkah-langkahnya.

Pentingnya Keberadaan Breadcrumb

Seberapa penting breadcrumb ini pada sebuah blog? Tentunya breadcrumb sendiri seakan sudah menjadi hal wajib di kalangan para blogger. Khusus para pembuat template blogger juga hamper semua sudah memasang fitur ini di masing-masing template yang dibuatnya atau yang dijualnya. Namun bagi anda yang masih menggunakan template bawaan/default yang disediakan blogspot, biasanya ada yang belum dilengkapi dengan fitur ini sehingga ada baiknya anda memasang fitur ini agar blog anda lebih bekerja dengan maksimal.

Breadcrumbs atau arti dari Bahasa inggris nya berarti jejak remah roti ini memang cukup penting keberadaannya. Diibaratkan seperti sebuah penunjuk arah atau penunjuk jalan. breadcrumb berfungsi untuk mengarahkan pengunjung agar mereka tahu dimana posisi mereka saat membuka sebuah postingan di sebuah blog. Pada fitur ini 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 nyaman.

Dampak terhadap SEO (Search Engine Optimazation), keberadaan breadcrumbs di blog juga cukup penting karena berkaitan dengan kelengkapan navigasi pada blog tersebut. Fitur ini menjadikan sebuah navigasi pada sebuah web atau blog untuk memperjelas dan lebih mudah dibacar pada halaman pencarian Google sehingga visitor yang menemukan postingan anda melihat langsung kategori yang menjadi induk dari artikel tersebut.

Nah, selanjutnya bagaimana cara memasangnya?, silahkan simak langkah-langkahnya berikut ini;

Cara Memasang Breadcrumbs di Blogger 

1. Buka akun blogger Anda.

 
2. Pilih menu theme 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. Perhatikan 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'/>

Jika 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 yang ini

<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. 

Beberapa Blogger biasanya menghilangkan judul postingan di tampilan breadcrumbsnya. Kalau anda juga ingin menghilangkannya, silahkan hapus kode yang saya beri tanda warna merah. Seperti itu cara memasang breadcrumb pada blogspot. Semoga artikel sederhana ini bermanfaat untuk teman-teman semuanya. Pada artikel lain ada juga cara membuat blog silahkan dicek ya.

Share

Mulki

https://www.mulkiaja.com/

Blogger