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 .
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 :
Cari Kode : ]]></b:skin> letakkan kode CSS di bawah ini di atas nya.
Kemudian Simpan 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.
Kemudian cari kode ]]> </b:skin> dan letakkan kode css di bawah ini di atas nya.
Kemudian simpan template
<b:includable id='breadcrumbs' var='post'>Kemudian cari kode ini : <b:if cond='data:post.dateHeader'>
<!-- 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> >
<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'>
> <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>
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 TemplateCari 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 == "item"'> <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> > </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 != "true"'> > </b:if> </b:loop> </b:if> > </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
Harga : *Belum termasuk Ongkos kirim
