nantikan peluncuran tampilan terbaru dari blog ini dalam waktu

Sabtu, 02 Mei 2009

Cara Membuat “breadcrumb-navigation” pada Blogger

Tahukah kalian apa itu “breadcrumb-navigation” ...??
ok, klo kmu tidak tahu, silahkan buka : www.elite-mantab.web.id dan www.x4punya.blogspot.com
Maka di situ akan ada navigasi sederhana yang berupa teks, tetapi, hal itu hanya bisa pada sebuah website, untuk www.elite-mantab.web.id adalah website dan www.x4punya.blogspot.com adalah sebuah Blogspot, nah pada blogspot ini kita bisa tambahi “breadcrumb-navigation” juga, .
untuk lebih jelasnya lagi, silahkan lihat gambar dibawah ini :


Nah, Navigasi di ataslah yang di sebut dengan namanya “breadcrumb-navigation”, dari situ, sang pembaca bisa melihat posisi artikel yang sedang di baca.

Oke deh, g usah kebanyakan omong, langsung aja kita mulai acaranya :

1. Login dulu di Blogger kalian
2. Klik Tata letak / Layout
3. Kemudian klik Edit HTML
4. Untuk antisipasi kegagalan, download template kamu terlebih dahulu, klik Download Template Lengkap

5. klik / beri tanda centang di tulisan Expand Template Widget.
6. Dan kemudian cari code : ]]></b:skin>
7. kemudian letakkan kode dibawah ini tepad berada di atasnya : ]]></b:skin>

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



8. Kemudian cari code ini : <div class='post hentry uncustomized-post-template'>
9. kemudian letakkan code ini tepat di bawahnya


<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>


10. Kemudian klik save, dan lihat hasilnya dengan cara klik salah satu judul artikel anda....

gimana? bisa kah?

Semoga bermanfaat.....

2 komentar:

Sekedar coretan untuk belajar bersam. disini saya tidak untuk bersaing, namun saya disini untuk melengkapi dan aling belajar bersama

About Me

Diberdayakan oleh Blogger.

Blog Archive

Rubrik

Follower

Shout

Layanan RSS Vivanews.com dapat diakses pada URL-URL berikut:

http://rss.vivanews.com/ Free Download Movie :