Membuat Breadcrumb Microdata Schema.org Menggunakan Ikon SVG
Membuat Breadcrumb Microdata Schema.org Menggunakan Ikon SVG - Pada kesempatan kali ini Saya akan coba posting dengan judul cara Membuat Breadcrumb Microdata Schema.org Menggunakan Ikon SVG.
Breadcrumb adalah sebuah menu navigasi berupa list yang akan di tampilkan di halaman pencarian. Breadcrumb akan tampil dibawah url blog anda di hasil pencarian.
Sebenarnya tidak perlu markup apa pun untuk membuat breadcrumb tampil di hasil pencarian, yang penting adalah ada navigasi halaman berupa list.
Namun sebaiknya kita mengimplementasikan sesuatu yang direkomendasikan oleh mesin pencari seperti Google. Salah satunya dengan membuat breadcrumb dengan markup schema.org tersebut.
Nah, jika Anda ingin Membuat Breadcrumb Microdata Schema.org Menggunakan Ikon SVG ini di blog Anda, mari kita lihat caranya dibawah 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'>
<a expr:href='data:blog.homepageUrl' title='Home'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg> <span>Home</span></a>
<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' itemscope='itemscope' itemtype='https://schema.org/Thing'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+1' 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.
Komentar