Terbaru Membuat Breadcrumb Menggunakan Ikon SVG
Navigasi Breadcrumb
berfungsi menyediakan tautan kembali ke setiap halaman sebelumnya yang dilalui
pengguna, dan menunjukkan lokasi pengguna saat ini di situs web. Secara
sederhana, breadcrumb pada halaman menunjukkan posisi halaman dalam hierarki
situs tersebut. Jangan kuatir Breadcrumb
ini tentu SEO Friendly dan Valid HTML5
Dalam hal ini, Google Search juga menggunakan markup breadcrumb dari sebuah halaman web untuk mengkategorikan informasi dari halaman dalam hasil pencarian. Dengan begitu, pengguna dapat tiba di suatu halaman dan pengguna dapat kembali ke halaman web yang sama dengan kategori yang sama dengan halaman sebelumnya.
Saat ini masih banyak situs atau blog yang menggunakan breadcrumb dengan markup data-vocabulary.org. Namun markup schema.org merupakan markup untuk breadcrumb terbaru yang direkomendasikan.
Sebenarnya tidak perlu markup apa pun untuk membuat breadcrumb tampil di hasil pencarian, yang penting ada navigasi halaman berupa list.
Namun apa pun itu, sebaiknya kita mengimplementasikan sesuatu yang direkomendasikan oleh mesin pencari seperti Google. Salah satunya membuat breadcrumb dengan markup schema.org.
Kali ini saya akan membagikan cara membuat breadcrumb untuk Blogger dengan menggunakan markup microdata schema.org dengan menambahkan ikon SVG sebagai separator dari tiap labelnya.
Untuk membuat seperti itu, silahkan ikuti langkahnya berikut ini.
Silahkan copy kode berikut
ini.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' title='Home' itemprop='item' itemtype='https://schema.org/Thing'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + "?&max-results=16"' expr:title='data:label.name' itemprop='item' itemtype='https://schema.org/Thing'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != "true"'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
</b:if>
</b:loop>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>
Silahkan simpan di atas kode
<b:includable
id='comment-form' var='post'>. Jika sebelumnya sudah ada kode
yang seperti atau mirip seperti itu, silahkan ganti dengan kode di atas.
Kemudian tambahkan CSS style berikut agar tampilan breadcrumb menjadi rapih.
/* Breadcrumb */
.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:#888;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:#666;font-weight:400}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666}
Terakhir, simpan kode
berikut di mana Anda ingin menampilkan breadcrumb.
<b:include data='posts' name='breadcrumb'/>
Sebagai contoh, Anda bisa
simpan di bawah kode <b:includable id='main' var='top'> dan
breadcrumb akan tampil di bagian atas postingan.
Selamat mencoba dan semoga
bermanfaat.