Home
Blogging

Memasang Breadcrumb Di Blogger

Memasang Breadcrumb Di Blogger
Memasang Breadcrumb Di Blogger
Memasang Breadcrumb Di Blogger - Breadcrumb dalam istilahnya adalah navigasi web yang difungsikan untuk mengetahui posisi pengunjung ketika menjelajah.
Dalam hal lain, breadcrumb disebut juga dengan istilah Navigasi Path jika anda biasa bekerja dalam File Explorer.
Untuk pemasangan di blogger umumnya navigasi ini diletakkan di atas judul posting.
Dan dengan Breadcrumb ini pengunjung akan ditunjukkan posisinya dimana sekarang berada.
Memulai memasang breadcrumb
Penerapan di blogger sangatlah mudah, hanya dengan memanfaatkan 'itemscope' dari http://data-vocabulary.org/
Masuklah ke menu Template dan pilih edit HTML (jangan lupa copy dulu)
Kemudian cari

<b:if cond='data:post.title'>

Setelah ketemu, sisipkan kode ini di bawahnya:


<b:if cond='data:post.title'>
<br />
Setelah ketemu, sisipkan kode ini di bawahnya:<br />
<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> &#8250; </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;'> &#8250; </b:if> </b:loop> </b:if> &#8250; </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>


Lalu cari kode ini untuk menyisipkan kode CSS
]]></b:skin>
Setelah ketemu sisipkan kode CSS ini di atasnya:


.breadcrumbs{
padding:5px 5px 5px 0px;
margin: 15px 0px 15px 0px;
font-size:15px;
line-height: 1.4em;
border-top:1px solid #ffa600;
border-bottom:1px solid #ffa600;
}


*Ubah code CSS sesuai keinginan..

Setelah selesai, simpan template dan lihat hasilnya dengan meng-klik salah satu postingan sobat.

Semoga Bermanfaat..
Happy Blogging!



Cara Memasang Breadcrumb di Blog, Cara Memasang Breadcrumb di atas Judul Posting Blog, Cara Membuat/ Memasang Breadcrumbs di Blog (Blogspot), Cara Memasang Breadcrumbs/Navigasi Untuk Blogspot, Cara Membuat Breadcrumb di Blogger Agar SEO Friendly, Cara Memasang BreadCrumb Pada Blog Pribadi Kita

Post a Comment