108: [siri tutorial blogger] #05 - cara tambah breadcrumb untuk blogger.

Tutorial kali ini adalah untuk menambah breadcrumb trail pada blogspot. Bagi pengguna Wordpress tak ada masalah sebab breadcrumb trail ni memang dah boleh diaktifkan melalui plugins kat dashboard je. Tapi pengguna Blogspot kena godek-godek coding HTML sikit baru boleh tambah breadcrumb trail ini.

Breadcrumb trail ni merupakan bantuan navigasi yang membantu pembaca blog tahu dari mana lokasinya entri tersebut dan dari kategori mana. Jadi, kalau diorang nak patah balik atau nak baca semua entri dari kategori yang sama lebih mudah.

Selepas siap pasang, breadcrumb trail tu akan muncul macam ni:

cool, tak? hehehe...

Jom cekidaut cemana nak buat breadcrumb nih...

• Dari Dashboard, pergi ke Design -> Edit HTML
• Backup template anda dan klik pada kotak 'Expand Widget Template'
• Cari kod ni:

<b:include data='top' name='status-message'/>

• Dan gantikan dengan yang ini:

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

• Seterusnya cari pula kod ni:

<b:includable id='main' var='top'>

• Dan gantikan dengan kod 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'>

Kalau nak, tukar semua perkataan 'Home' yang dah ditandan dengan warna merah tu dengan perkataan lain macam 'Laman utama' atau 'Kembali' atau apa-apalah yang merujuk kepada muka depan blog korang. Kalau tanak tukar pun takpe. Hehehe....

• Akhir sekali cari kod ni:

]]></b:skin>

• Dan gantikan dengan yang ini:

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

Dah selesai, PREVIEW dulu. Kalau dah puas hati, SAVE. Selamat mencuba!

Kthnxbai.

[sumber]