Ini tentang cara bagaimana menambahkan breadcrumbs ke dalam template template blogger yang lebih tuaan seperti template sederhana, awesome, perjalanan, jendela air dst. Pokoknya template asli bawaan blogger sebelum 4 varian template terbaru blogger di rilis (contempo, soho, emporio dan notable). Bukan pula template custom atau template hasil buatan pihak ketiga.
 |
| breadcrumb micro Data HTML untuk blogger |
Karena breadcrumb itu ibarat sebuah papan nama atau rambu rambu jalan di dalam HTML atau dengan kata lain sebagai navigasi bagi mesin pencari maka ia sangat penting sekali bagi SEO karena membuat data menjadi terstruktur. Dan karena kami sedikit fokus kepada template template bawaan maka kami akan menunjukan cara menerapkannya dengan benar ke dalam template bawaan blogger yang lebih lama.
1. PEMASANGAN BREADCRUMBS MICRO DATA HTML
Ini adalah pemasangan yang paling disukai oleh kalangan blogger, karena breadcrumbs tampil di atas judul postingan, sehingga terpampang jelas bahwa template yang sedang kita pergunakan memang sedang menggunakan fitur breadcrumbs.
1. Langkah pertama
- Masuk ke pengaturang blogger
- Pilih tema
- Pilih Edit HTML
Lalu di halaman editor HTML blogger cari kode berikut:
<h3 class='post-title entry-title' itemprop='name'>
Pada template sederhana, Awesome dst ada terdapat dua kode yang sama, pilih yang kedua dan letakan kode berikut tepat di atasnya:
<!-- 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'>Berada</span></a>
</span>
<b:if cond='data:post.labels'>
<b:loop index='num' values='data:post.labels' var='label'> &nbsp;›&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>
<b:else/>
&nbsp;›&nbsp; Does not have category
</b:if>
</div>
</b:loop>
</b:if>
2. Langkah kedua
Agar tampilan breadcrumb rapi, masih di dalam pengaturan editor HTML Blogger temukan kode </head> dan letakan kode CSS berikut tepat di atasnya:
<style>.breadcrumb { margin-bottom: 20px; } .breadcrumb, .breadcrumb a, .breadcrumb a:hover { font-size: 11px; color: #555; } <style>
Lalu Save template.
Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!