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 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
dan di BAWAH/SELEPAS kod tu, pastekan pula kod ni:
PERHATIAN:*Kalau korang tak jumpa kod yang first tu,cari kod ni
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:
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:
Akhir sekali,save template.
Ini adalah contoh,bagaimana hasilnya nanti:Ok Selamat Mencuba
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 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 == "NAMA_LABEL_#1"">
</b:loop>
<b:if cond="data:label.name == "NAMA_LABEL_#1"">
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 == "NAMA_LABEL_#1"">
<b:if cond="data:label.name == "NAMA_LABEL_#2"">
<b:if cond="data:label.name == "NAMA_LABEL_#3"">
<b:if cond="data:label.name == "NAMA_LABEL_#4"">
</b:loop>
<b:if cond="data:label.name == "NAMA_LABEL_#1"">
TEKS ATAU LINK KE IMEJ DI SINI
</b:if><b:if cond="data:label.name == "NAMA_LABEL_#2"">
TEKS ATAU LINK KE IMEJ DI SINI
</b:if><b:if cond="data:label.name == "NAMA_LABEL_#3"">
TEKS ATAU LINK KE IMEJ DI SINI
</b:if><b:if cond="data:label.name == "NAMA_LABEL_#4"">
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2l_ek79ppZIqC0XkQzWAfOiXMRVEU2SThLrBbtG0RdhL1hGjHxWSa_HDnRXxnVLPBBwSfDWD3HhV7FMAjID87xR-mdw0KuQU9XDuXK0H-OXzpuGxFr9nIvvMhZajBYFBHpWWxuXrlvEE/s1600/book_icon.gif" />
Akhir sekali,save template.
Ini adalah contoh,bagaimana hasilnya nanti:Ok Selamat Mencuba
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.