Screenshot di atas adalah contoh 'Breadcrumbs Trail'.
'Breadcrumbs Trail' akan berada di atas tajuk post/entri.
1. Sign in akaun blogger anda.
2. Pilih LAYOUT --> EDIT HTML.
3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.
4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.
5. Cari kod ini.
<b:includable id='main' var='top'>
6. Copy kod di bawah dan letakkan di atas kod tadi.
<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> >
<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:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> >
<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:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>
7. Cari kod ini.
<b:if cond='data:post.dateHeader'>
8. Copy kod di bawah dan letakkan di atas kod tadi.
<b:include data='post' name='breadcrumbs'/>
9. Sekarang cari kod ini.
]]></b:skin>
10. Kemudian Copy kod CSS di bawah dan tambahkan di atas kod tadi.
.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}
11. Save Template.
12. Untuk melihat hasilnya klik pada tajuk post/entri anda dan lihat di bahagian atas.
2 comments:
nice tutorial, tapi gua rasa tiada makna (bukan post bro/ blog bro) tapi function seperti ini .. haha
T.Kasih eldy..Biar btol tiada makna...Dh try ke blom...haha...
Post a Comment