Hari ini kita akan mencoba menerapkan " Navigasi Breadcrumb " pada template blog kesayangan kita ini. Tapi mungkin ada diantara anda belum tahu apa itu " Navigasi Breadcrumb " ?, Navigasi Breadcrumb perfungsi untuk memberikan informasi kepada Pengunjung Blog kita dimanakah persisnya Posting yang mereka baca berada...

Contoh Tampilan :

Dari gambar diatas bisa kita perhatikan : Explorer » Home » Label Posting » Judul Posting. Gimana...? Anda tertarik ?.

Berikut Langkah-langkah pembuatan Navigasi ini :

1. Silahkan  Login pada Blog anda.

2. Setelah halaman Dasbor terbuka langsung menuju Tata Letak » Edit HTML, setelah halaman Edit HTML terbuka jangan lupa untuk mengklik tanda " Expand Template Widget ".

Backup Template anda agar bila terjadi kesalahan dalam pengeditan nanti, anda bisa mengembalikan Template anda kesemula.

3. Copy/Paste Code dibawah ini :

.breadcrumbs {
padding:5px 5px 5px 10px;
margin: 0px 0px 5px 0px;
font-size:95%;
line-height: 1.4em;
text-color:Green;
background:#f1f1f1;
} 

 
Letakkan Code tersebut Tepat diatas

]]></b:skin>

jangan sampai salah ya....

4. Temukan Code :

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'>



( Atau )

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>


5. Setelah anda menemukan Code di atas, Copy/pastekan Code dibawah ini Tepat dibawah Code di atas :

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<b style='color:Green;'>Explore</b> <strong>&#187;</strong> <
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;'> <strong>&#187;</strong>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
<strong>&#187;</strong> <span><
b style='color:Green;'><data:post.title/></b></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Explore <strong>&#187;</strong> <
a expr:href='data:blog.homepageUrl'>Home</a> <strong>&#187;</strong> 
Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>


6. Dengan anda mengCopy Code di atas maka Selesailah Tugas Kita dalam pembuatan Navigasi Breadcrumb ini.

Bagaimana.....? Cukup Mudahkan !

7. Jangan lupa Save Setingan anda Ya...!, lalu lihat Hasilnya