Membuat Breadcrumbs Untuk Blogger

Dengan adanya “breadcrumb-navigation” maka pembaca dapat dengan mudah melihat posisi artikel yang di baca serta mencari artikel dalam satu kategori.Breadcrumbs merupakan salah satu kelengkapan navigasi suatu blog, hal ini untuk membantu pengunjung (pembaca) dalam menelusuri satu demi satu halaman blog atau website.

Browse » Home » Finance » Selain Payoneer, Kartu Debet/Credit Mastercard Gratis LimitlessONE


Silahkan login ke blogger degan ID anda.

Langkah 1: Simpan Template
Go to Layout, dan klik Edit HTML. Download Template lalu simpan di harddisk mu. Supaya jika terjadi kesalahan bisa diperbaiki dengan Upload Code XML tadi Yang tersimpan di Harddisk.

Langkah 2: Expand the widget code
Silahkan beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.


Langkah 3: Add a new Includable
Kita akan memodifikasi kode dari Blog-widget

Scroll down silahkan cari kode berikut pada template anda :

<b:includable id='main' var='top'>  <!-- posts -->  <div class='blog-posts hfeed'>    <b:include data='top' name='status-message'/>    <data:adStart/>

Tambahkan code hingga seperti ini :

<b:includable id='main' var='top'>  <!-- posts -->  <div class='blog-posts hfeed'>  <!-- disable default status message    <b:include data='top' name='status-message'/>  default status message disabled --> 

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

<data:adStart/>

Kemudian silahkan cari kode <b:includable id='main' var='top'> Copy lalu paste kode di bawah ini persis di atas kode <b:includable id='main' var='top'>


<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on front page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
<b:else/>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Langkah 4: Tambahkan CSS pada skin blogger
Silahkan cari kode ]]></b:skin> Copy lalu paste kode di bawah ini persis di atas kode ]]></b:skin>

.breadcrumbs {  float: left;  width: 590px;  font-size: 11px;  margin: 5px 10px 20px 10px;  padding: 0px 0px 3px 0px;  border-bottom: double #EAEAEA;}

Klik tombol Save Template, Tunggu beberapa saat sampai template anda tersimpan. Buka halaman blog anda, klik pada judul artikelnya. Silahkan lihat hasilnya. Selesai.
Author google.com