Bahas Tuntas Breadcrumb di Blogger

Breadcrumb Blogger Blogspot

Breadcrumbs atau breadcrumb trail adalah bantuan navigasi yang digunakan dalam user interface. Hal ini memberikan pengguna cara untuk melacak lokasi suatu artikel dalam suatu program atau dokumen. Istilah ini berasal dari jejak  Hansel dan Gretel .
bahas tuntas breadcrumb di blogger blogspot

Ide breadcrumb asli berdasarkan Kode Hoctro itu dari hack breadcrumb HOCTRO. Ini telah dimodifikasi untuk mengakomodasi Halaman Pencarian, Halaman Label dan pasca breadcrumb Archives.

Fungsinya adanya lacak breadcrumb di bagian atas posting memberikan solusi yang baik untuk SEO Google . Yang biasanya, anda selalu dapat mengklik pada label / kategori sebelumnya, atau klik "Home" link untuk kembali ke halaman depan.

Penerapan Lacak Breadcrumb :

Home>Label>Postname

Contoh Penerapan Lacak Breadcrumb di Postingan :

Home > Gadget > Jadwal Penerbangan > Widget > Widget Jadwal Penerbangan Pesawat

Cara Pasang Breadcrumb di Blogspot di antaranya.

1. Cara pasang Breadcrumb di Blogspot menurut HOCTRO

Klik Template - Edit HTML kemudian checklist Expand Widget Template , kemudian lihat posisi / cari Blog1 widget <b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">.

Cari kode :  <b:includable id='main' var='top'>

kemudian letakan di atasnya kode berikut ini :
<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
&gt; <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>
Kemudian cari kode ini :  <b:if cond='data:post.dateHeader'> 

dan letakkan kode di bawah ini di atasnya.
<b:include data='post' name='breadcrumbs'/>

Cari Kode  :   ]]></b:skin> letakkan kode CSS di bawah ini di atas nya.
.breadcrumbs {border-bottom:1px dotted #000;margin:2em 0 0.5em;padding:0 0 0.5em;}
 
Kemudian Simpan Template


2. Cara Pasang Breadcrumb Schema.org .

Klik Template - Edit HTML kemudian checklist Expand Widget Template
Cari kode ini <div class='post hentry'> atau <div class='post hentry uncustomized-post-template'>
Kemudian letakkan kode di bawah ini di bawah nya.
<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> <span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"> <a expr:href='data:blog.homepageUrl' itemprop="url"><span itemprop="title">Home</span></a> &gt; </span><span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' itemprop="url"><span itemprop="title"><data:label.name/></span></a> <b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if> </b:loop> </b:if> &gt; </span><span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title"><data:post.title/> </span></span></div> </b:if></b:if>

Kemudian cari kode ]]> </b:skin> dan letakkan kode css di bawah ini di atas nya.
.breadcrumbs{padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px;font-size:95%;line-height:1.4em;
border-bottom:3px double #cadaef;}

Kemudian simpan template
Bahas Tuntas Breadcrumb di Blogger
Bahas Tuntas Breadcrumb di Blogger

Harga : *Belum termasuk Ongkos kirim
Pesan via whatsapp Pesan via Email
Next Post Previous Post

Spesial Promo

5 % off

Paket Pasang Parabola Mini dan Jaring.

Dapatkan Sekarang
avatar
Admin Salaam, if you have anything to ask please via our WhatsApp
Admin Hi there! Hello, Can I help you?
:
Chat WhatsApp