Menambahkan Breadcrumbs Navigation Untuk Blogger membantu pembaca Anda untuk melacak posisi mereka di blog Anda dengan menunjukkan jejak breadcrumb dengan cara ini ( Home »Label Nama» Judul Posting ) Ini navigasi muncul tepat di atas dari judul posting Anda dan link yang jejak dari homepage untuk title. Posting juga pilihan untuk menampilkan beberapa label dalam navigasi yaitu jika posting apapun memiliki lebih dari satu label maka ia akan menampilkan semua ide. Breadcrumbs Navigation asli diberikan oleh HOCTRO dan Aneesh dari bloggerplugins lebih lanjut dapat bekerja seperti di atas.
Cara Menambahkan Breadcrumbs Navigation Untuk Blogger
1. Pergi ke akun blogger Anda.
2. Pada Dasbor klick Template Edit HTML.
3. Centang Expand Template Widget ➨ Backup template Anda.
4. Sekarang Anda harus bisa mencari kode HTML, bila kesulitan mencari kode HTML silahkan klick DISINI.
5. Dalam Edit HTML temukan kode berikut
<b:include data='top' name='status-message'/>
Tepat di atasnya letakkan kode ini
<b:include data='posts' name='breadcrumb'/>
6. Sekarang cari kode di bawah ini (jika Anda menemukan dua kode yang sama, maka pilih yang kedua)
<b:includable id='main' var='top'>
Tepat di atasnya sisipkan kode berikut
<!-- Breadcrumb Navigation By http://www.otowebsite.blogspot.com/ -->
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pagename/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span>
</div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pagename/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<!-- Breadcrumb Navigation By http://www.otowebsite.blogspot.com/ -->
- Kode ini hanya akan menampilkan label terakhir dari posting di breadcrumb. Jika Anda ingin menampilkan semua label, maka Anda harus menghapus kode di baris 16 dan 18. Sekarang cari kode di bawah ini,
]]></b:skin>
Dan letakkan kode css berikut ini tepat di atasnya
.breadcrumbs {
background: #F7F7F7;
float: left;
border: 1px solid #E6E6E6;
width: 575px;
font-size: 11px;
margin: 10px 10px 10px 10px;
padding: 5px 10px 5px 10px;
}
Sekarang simpan perubahan Anda dan Anda selesai.
Jika menemukan masalah tentang kinerja Breadcrumbs Navigation ini silahkan untuk bertanya!
