Skip to main content

Cara Memasang Breadcrumb di Template Notable Blogspot

Pada dasarnya ini bisa dipasang di Template manapun hanya saja memerlukan sedikit penyesuaian lagi jadi karena saya hanya mencoba ini pada Notable saja maka saya sebut begitu.

Ada berbagai macam model kode breadcrumb setidaknya ada 3 jenis, JSON-LD, RDFa, Microdata dan HTML, pada intinya semua sama saja dan kode yang saya bagikan ini jenis RDFa schema.org khusus tunggal bukan ganda.

Untuk info2 penting lainnya, apa itu breadcrumb? Contohnya dll, terkait itu semua silakan baca saja selengkapnya di https://developers.google.com/search/docs/data-types/breadcrumb?hl=id

Catatan: Merujuk pada developers tersebut bahwa kesalahan memasang Breadcrumb dapat menyebabkan Blog kita dikenai tindakan manual alias diabaikan dengan kata lain kesalahan yang dimaksud (menurut pemahaman saya) adalah jika label pada blog kita lebih dari satu. Jadi jika ada sebagian label pada posting kita yang memiliki lebih dari satu label saran saya sebaiknya jangan memasang Breadcrumb, alih2 ingin Blog kita keren malah bakal dicuekin Google. Mengapa saya berkata seperti itu sebab Breadcrumb ada 2 jenis, jenis tunggal dan beberapa jejak alias ganda. Jika memiliki banyak label/kategori kodenya harus menggunakan formasi jenis ganda.

Contoh Jenis Tunggal (1 label):
Home > Label > Judul Posting.

Contoh Jenis Ganda (3 label A, B, C):
Home posisi-1 > Label A posisi-2 > Judul Posting posisi-3.
Label B posisi-1 > Judul Posting posisi-2.
Label C posisi-1 > Judul Posting posisi-2.

Kedua contoh diatas berdasarkan pemahaman saya dari membaca di developers, lalu apakah boleh seperti ini?

Apakah boleh susunan seperti ini? saya juga tidak tahu!
Home posisi-1 > Label A posisi-2 > Label B posisi-2 > Label C posisi-2 > Judul Posting posisi-3.

Atau susunan seperti ini? saya juga tidak tahu!
Home posisi-1 > Label A posisi-2 > Label B posisi-3 > Label C posisi-4 > Judul Posting posisi-5.

Bingung? Sama saya juga bingung. Tapi sepertinya begitulah pemasangan breadcrumb untuk label yang lebih dari satu buah. Ya sudah lupakan saja jika bingung, saya juga gak ngerti2 banget. Lanjut saja.

Style yang saya gunakan dalam css ini yaitu model ellipsis dimana teks judul posting dalam breadcrumb hanya ditampilkan beberapa huruf saja selebihnya titik tiga biji. Jika di tap pada judul akan ditampilkan secara penuh, tap di area lain judul akan kembali memendek.

Cara pemasangannya sederhana:
1. Salin css dibawah ini dan pasang pada bagian css dalam template.
2. Salin kode <b:includable id='breadCrumb'> dibawah dan letakkan di bagian <b:defaultmarkups>, bebas letakkan dimana saja tapi harus pasang diluar includable lain.
3. Salin kode include berikut <b:include cond='data:view.isSingleItem and data:widget.type != &quot;PopularPosts&quot;' name='breadCrumb'/> dan tempatkan di dalam <b:defaultmarkups> bagian dalam <b:includable id='normalPost'> dalam class "post-content" bagian dalam "post-title-container" seperti gambar dibawah ini.


Mungkin anda bertanya mengapa ada kata2 PopularPosts pada kode include tersebut, itu bermaksud agar tidak ditampilkan di PopularPosts. Sedangkan view.isSinggle adalah hanya menampilkan ini khusus pada posting tunggal/individual.

<!-- css -->
.breadcrumb ol{
font-size:14px!important;
margin:0 0 30px 0;
padding:0;
display:flex
}
.breadcrumb li{
list-style:none;
display:inline-block
}
.breadcrumb li.last{
width:100px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.breadcrumb li.last:hover{
overflow:visible
}

<!-- kode -->
<b:includable id='breadCrumb'>
<div class='breadcrumb'>
<ol vocab='https://schema.org/' typeof='BreadcrumbList'>
<li property='itemListElement' typeof='ListItem'>
<a property='item' typeof='WebPage' expr:href='data:blog.homepageUrl'><span property='name'>Home</span></a>
<meta property='position' content='1'/>
</li>
&amp;nbsp;&amp;rsaquo;&amp;nbsp;
<li property='itemListElement' typeof='ListItem'>
<b:loop values='data:post.labels' var='label'>
<a property='item' typeof='WebPage'
expr:href='data:label.url'><span property='name'><data:label.name/></span></a>
</b:loop>
<meta property='position' content='2'/>
</li>
&amp;nbsp;&amp;rsaquo;&amp;nbsp;
<li class='last' property='itemListElement' typeof='ListItem'>
<span property='name'><data:post.title/></span>
<meta property='position' content='3'/>
</li>
</ol>
</div>
</b:includable>



Setelah berhasil terpasang pada Template/Blog silakan lakukan pengujian hasil karya di https://search.google.com/test/rich-results?id=https://blog.anda.com dan Masukkan Url Blog anda disana dan tes. Apapun kesalahan yang anda lakukan petunjuk cara memperbaikinya ada disana. Saya tidak memasang Breadcrumb di Blog ini karena sepertinya alat tes tersebut tidak bisa memuat widget followers model modal pada Blog ini, dengan kata lain jika Blog ini ingin memasang Breadcrumb maka style model modal widget followers di Blog ini sepertinya harus di hapus tapi saya tidak mau menghapusnya. Demikian, Selamat mencoba dan Semoga bermanfaat!

Comments