Follow by Email

Powered by Blogger.

Monday, April 5, 2010

Membuat Navigasi Breadcrumb


halo sobat blogger semua .... kali ini , saya akan menjelaskan tentang membuat navigasi breadcrumb . apa sih maksud nya ?? maksud nya begini , jika kita klik posting ini , akan muncul suatu tulisan di atas judul posting ini . kalau di sini tulisannya begini .. Browser >> Home >> Trik Blogging >> Java Script >> Membuat Navigasi Breadcrumb


tertarik bukan ?? ya sudah ... langsung saja saya akan jelaskan bagaimana cara membuat nya ...

1. Pertama , Log in ke Blogger

2. Kedua , Masuk Tata Letak >> EDIT HTML

3. Klik "Download Template Lengkap" untuk jaga jaga saat kita edit template . kalau kacau , kita tinggal upload file yang kita download tadi .

4. Jangan lupa juga centang "Expland Widget Template"

5. Cari Kode seperti ini di template anda :

]]></b:skin>


Tips : kalau susah , tekan CTRL + F . tulis kode di atas di kotak itu ... nanti akan mencari secara sendiri nya ...

6. Pastekan kode di bawah ini di atas kode tadi

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}


7. Kemudian , cari kode seperti ini .. :

<div class='post hentry uncustomized-post-template'>


Tips : kalau susah , tekan CTRL + F . tulis kode di atas di kotak itu ... nanti akan mencari secara sendiri nya ...

8. Kemudian , copy kode di bawah ini dan paste kan di bawah kode tadi

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<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>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<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:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>


9. Kemudian , Simpan Template anda .

10. Sudah di pastikan , cek segera .... semoga berhasil !!

3 comments:

  1. wah, coba dulu ah di blog percobaanku. makasih infonya sob...

    pertamax!

    ReplyDelete
  2. Info yang menarik, dan membuat blog jadi seo frindly... Qiureen.

    Dapunta

    ReplyDelete
  3. lha ini yang aku cari selama ini, makasih sob...

    maen ke blog aku ya.. jangan lupa comment

    ReplyDelete

Sampaikan pendapat, pertanyaan, atau kritik anda!