Fitur Navigasi Breadcrumb di Blogspot

Bookmark and Share
Fitur Navigasi Breadcrumb yang fungsinya untuk lebih memudahkan pengunjung Blog(Optimasi Blog) untuk mengarahkan pada pembaca dengan navigasi Breadcrumb yang bisa di pasang diatas artikel postingan memudahkan pembaca untuk penelusuran Halaman artikel kita dengan navigasi Home>>Label>>Judul Artikel Yang tentunya lebih SEO freindly menurut Google, Langsung aja cara pasangnya di bawah ini

1. Login akun blogspot
2. Pilih Tata Letak>>Edit Html
3. Downloads full template (untuk backup kalau terjadi kesalahan)
4. Centang Expand widget Template
5. Cari Kode:


<b:include data='top' name='status-message'/>

Sekarang Ganti dengan Kode di bawah ini

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

Cari lagi Kode ini:

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

Hapus dan Gantikan dengan kode di bawah ini

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> <b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<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:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for
<data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under
<data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

Cari lagi kode yang satu ini:

]]></b:skin>

Gantikan dengan Kode di Bawah ini

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
]]></b:skin>
6. Simpan template/Save Template dan lihat hasilnya, Bisa lihat hasilnya di postingan Mengembalikan Jati Diri Bangsa ,Gampang khan caranya.

{ 2 comments... Views All / Send Comment! }

afdil mengatakan...

breadcrumb ini hampir sama dengan daftar isi blog ya ?

chandra mengatakan...

permisi numpang lewat...

http://chandra-unikom.blogspot.com

terima kasih. akan saya coba.

Poskan Komentar