728x90 AdSpace

Latest News

02 November 2010

Tutorial:Tunjukkan Ikon Khusus Di Bawah Tajuk Pos

Lecturer:Aideal Fitri
Class:Blogger

Di tutorial ni,korang akan belajar cara untuk menunjukkan ikon atau apa apa teks/imej khusus bagi sebarang label/kategori di bawah tajuk pos blog korang.Boleh lihat contoh di bawah sekali dekat post ni.

Sebagai contoh,jika ada empat topik utama/kategori untuk blog korang:Muzik,Kewangan,Filem dan Cerpen jadi untuk pos cerpen korang boleh tunjukkan ikon ni:

Ikon Buku

Dan kalau untuk muzik,kewangan dan filem korang boleh guna ikon ni

Ok,sekarang mari kita letakkan kat blog

NOTA 1: Kalau korang nak tunjukkan ikon kat bawah tajuk semua pos korang ikut label yang diguna,ikutla tutorial ni

NOTA 2
: Korang mesti dah ada tag/label/kategori sebelum memulakan toturial

NOTA 3: Sebelum memulakan tutorial,pastikan anda dah donwload full template sebagai backup.

LANGKAH #1:
Log in ke Blogger, pergi ke Layout -> Edit HTML dan tandakan kotak "Expand Widget Templates"

LANGKAH #2
Cari(CTRL+F)kod ni dalam template korang

<div class="post-header-line-1">

dan di BAWAH/SELEPAS kod tu, pastekan pula kod ni:

<b:loop values="data:post.labels" var="label">
<b:if cond="data:label.name == &quot;NAMA_LABEL_#1&quot;">
TEKS ATAU LINK KE IMEJ DI SINI
</b:if>
</b:loop>

PERHATIAN:*Kalau korang tak jumpa kod yang first tu,cari kod ni

<data:post.body/>

Tapi yang ni,kod kedua dekat Langkah #2 tu diletakkan DI ATAS/SEBELUM kod ni

Kalau korang nak tunjukkan ikon ni untuk empat label(lihat contoh diatas/dibawah sekali),jadi gunakan kod ni:

<b:loop values="data:post.labels" var="label">
<b:if cond="data:label.name == &quot;NAMA_LABEL_#1&quot;">
TEKS ATAU LINK KE IMEJ DI SINI
</b:if>
<b:if cond="data:label.name == &quot;NAMA_LABEL_#2&quot;">
TEKS ATAU LINK KE IMEJ DI SINI
</b:if>
<b:if cond="data:label.name == &quot;NAMA_LABEL_#3&quot;">
TEKS ATAU LINK KE IMEJ DI SINI
</b:if>
<b:if cond="data:label.name == &quot;NAMA_LABEL_#4&quot;">
TEKS ATAU LINK KE IMEJ DI SINI
</b:if>
</b:loop>

Gantikan kod NAMA_LABEL dengan nama yang betul-betul serupa dengan nama pada label/kategori korang(termasuk ruang " " antara dua perkataan).Dan gantikan teks 'TEKS ATAU LINK KE IMEJ DI SINI' dengan link ke ikon yang korang mahu guna.Contohnya,jika nak gunakan ikon buku yang ditunjukkan di atas,gantikan teks 'TEKS ATAU LINK KE IMEJ DI SINI' dengan kod ni:

<img alt="Cerpen" src="http://4.bp.blogspot.com/_P7J-V68xQZ4/TM9z-HHLnVI/AAAAAAAAC54/aZSHRgbuJQA/s1600/book_icon.gif" />

Akhir sekali,save template.

Ini adalah contoh,bagaimana hasilnya nanti:Ok Selamat Mencuba


Tutorial:Tunjukkan Ikon Khusus Di Bawah Tajuk Pos
  • Blogger Comments
  • Facebook Comments

0 ulasan:

Catat Ulasan

Top