Membuat Breadcrumb Microdata Schema.Org Memakai 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 ialah sebuah hidangan 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 menciptakan breadcrumb tampil di hasil pencarian, yang penting ada navigasi halaman berupa list.

Namun sebaiknya kita mengimplementasikan sesuatu yang direkomendasikan oleh mesin pencari ibarat Google. Salah satunya menciptakan breadcrumb dengan markup schema.org.

Jika Anda ingin Membuat Breadcrumb Microdata Schema.org Menggunakan Ikon SVG ini di blog Anda, mari kita lihat caranya berikut ini.

Silahkan copy arahan berikut ini.

            <b:includable id='breadcrumb' var='posts'>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <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 + &quot;?&amp;max-results=16&quot;' 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 != &quot;true&quot;'>
 <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 arahan <b:includable id='comment-form' var='post'>. Jika sebelumnya sudah ada arahan yang ibarat atau ibarat mirip itu, silahkan ganti dengan arahan di atas.

Kemudian tambahkan CSS style berikut semoga 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 arahan berikut di mana Anda ingin menampilkan breadcrumb.

<b:include data='posts' name='breadcrumb'/>

Sebagai contoh, Anda dapat simpan di bawah arahan <b:includable id='main' var='top'> dan breadcrumb akan tampil di bab atas postingan.

Source: https://xomlic.blogspot.com/search?q=membuat-breadcrumb-microdata-schemaorg

Share this Article