Cara Memasang Breadcrumbs Navigation di Blogger

Navigasi breadcrumb membantu pembaca Anda untuk melacak posisi mereka di blog Anda dengan menunjukkan jejak breadcrumb dengan cara ini (Home »Label Nama» Posting Judul). Navigasi ini muncul tepat di atas judul posting Anda dan link yang jejak dari homepage untuk menulis judul. Ada juga pilihan untuk menampilkan beberapa label dalam yaitu navigasi jika posting apapun memiliki lebih dari satu label maka ia akan menampilkan semua dari mereka. Ide asli breadcrumbs diberikan oleh HOCTRO dan Aneesh dari bloggerplugins lanjut bekerja di atasnya. Silakan simak Cara Memasang Breadcrumbs Navigation di Blogger.

1. Pergi ke Blogger Dashboard> Template
2. Seperti biasa men-download salinan template Anda
3. Klik pada Edit HTML
4. Tekan CTR+F untuk mempercepat pencarian.
5. Sekarang cari kode di bawah ini.

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

Copy Kode dibawah ini tepat diatas kode yang di atas.

<b:include data='posts' name='breadcrumb'/>

Sekarang cari kode di bawah ini (jika Anda menemukan dua kode ini, kemudian cari yang kedua)

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

Tepat di atasnya tempel kode di bawah,

<!-- Breadcrumb Navigation By http://mas-basir.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://mas-basir.blogspot.com/ -->

* Kode ini hanya akan menampilkan label terakhir dari pos di breadcrumb. Jika Anda ingin menampilkan semua label, maka Anda harus menghapus kode yang berwarna MERAH.

Sekarang cari kode di bawah ini, 

]]></b:skin>

tambahkan kode CSS berikut 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 menyimpan perubahan dan Anda selesai.
oke, itulah segelintir tutorial saya yang membahas tentang Cara Memasang Breadcrumbs Navigation di Blogger. Semoga bermanfaat bagi anda. dan slamat mengerjakan :)

Share this post