Selasa, 16 Agustus 2011
Breadcrumb adalah nama yang di berikan ke menu link , biasanya breadcrumb ini di tampilkan di atas posting di blog dan di bagian atas link website . Navigasi breadcrumb akan menunjukan jejak saat ini . Navigasi ini sudah sangat cukup populer dan mungkin telah banyak di gunakan oleh para blogger lain .
Berikut ini adalah contoh gambar dari navigasi breadcrumb ini

Cara memasukkan Breadcrumb di Blogger anda
1. Masuk pada akun blogger anda lalu pergi ke design > edit html > expand widget template

2. Setelah itu cari kode berikut ini <b:include data='top' name='status-message'/>
3. Jika anda telah menemukan kode tersebut , hapus kode itu lalu ganti dengan kode dibawah ini.
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
4. Kemudian cari kode <b:includable id='main' var='top'> , lalu ganti kode tersebut dengan kode dibawah ini
5. Kemudian cari kembali kode ]]></b:skin> , lalu letakkan kode dibawah ini tepat sebelum atau diatas kode ]]></b:skin> .
/* Breadcrumbs Css info @ http://vianjb.blogspot.com/ */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
6. Save Template dan blog anda pun sudah mempunyai navigasi breadcrumb
Berikut ini adalah contoh gambar dari navigasi breadcrumb ini

Cara memasukkan Breadcrumb di Blogger anda
1. Masuk pada akun blogger anda lalu pergi ke design > edit html > expand widget template

2. Setelah itu cari kode berikut ini <b:include data='top' name='status-message'/>
3. Jika anda telah menemukan kode tersebut , hapus kode itu lalu ganti dengan kode dibawah ini.
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
4. Kemudian cari kode <b:includable id='main' var='top'> , lalu ganti kode tersebut dengan kode dibawah ini
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<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 == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<!--Breadcrumbs code info @ http://vianjb.blogspot.com/-->
5. Kemudian cari kembali kode ]]></b:skin> , lalu letakkan kode dibawah ini tepat sebelum atau diatas kode ]]></b:skin> .
/* Breadcrumbs Css info @ http://vianjb.blogspot.com/ */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
6. Save Template dan blog anda pun sudah mempunyai navigasi breadcrumb

0 komentar:
Posting Komentar