Menambah 'Breadcrumbs Trail'.


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.

Malaysia Blogger Hack

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>

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

11. Save Template.

12. Untuk melihat hasilnya klik pada tajuk post/entri anda dan lihat di bahagian atas.

Sumber Hoctro

2 comments:

Eldy Voon said...

nice tutorial, tapi gua rasa tiada makna (bukan post bro/ blog bro) tapi function seperti ini .. haha

SyamZone™ said...

T.Kasih eldy..Biar btol tiada makna...Dh try ke blom...haha...

Post a Comment