Semalam dalam entri aku pasal cermin mata, blogger Anies ada tinggalkan komen yang menarik perhatian aku. Pasal cara nak tambah icon comel kat tajuk entri dalam widget Blog Archive.
Senang je sebenarnya nak buat macam tu. Ada 2 cara untuk tambah icon kat situ. Sama ada nak masukkan link gambar atau nak gunakan icon Font Awesome. Paling penting, pastikan Blog Archive tu dalam format Hierarchy. Kalau format lain, aku tak pasti lah hasilnya macam mana.
Cara 1: Guna URL gambar.
.BlogArchive ul .posts a:before {
content: "";
background-image: url(URL GAMBAR);
background-size: 100% 100%;
display: inline-block;
height: 12px;
width: 12px;
margin-right: 5px;
}
Letakkan code ni atas code ]]></b:skin> yang ada dalam Theme > Edit HTML. Gantikan ruang URL GAMBAR tu dengan link gambar yang berkenan. Kalau gambar tu terlalu besar atau kecil, boleh edit height dan width dalam code tu.
Cara 2: Guna icon Font Awesome.
.BlogArchive ul .posts a:before {
content: '\f118';
font-family: FontAwesome;
float: left;
font-size: 14px;
text-align: center;
margin-right: 20px;
}
Letakkan code ni atas code ]]></b:skin> yang ada dalam Theme > Edit HTML. Font Awesome ni semacam icon tapi dalam format font gitu. Kepelbagaian icon Font Awesome boleh tengok kat sini: Font Awesome Icons.
Search je nak icon pesen apa. Ambil Unicode icon tu dan gantikan code f118 kat atas tu. Contohnya aku nak gunakan code bintang ni. Jadi, aku ambil Unicode nya iaitu f005 dan masukkan dalam ruangan content, maka hasilnya content: '\f005';. Senang kan?
Kemudian, masukkan code bawah ni ke dalam Theme > Edit HTML. Kedudukan code ni perlu diletak bawah <head>. Kalau dah ada code ni, abaikan step ni.
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Lepas dah masukkan, klik Save dan keluar dari situ. Boleh view blog macam biasa untuk tengok perubahannya.
Semua tajuk entri dalam Blog Archive
 |
 |
Teknik yang aku buat ni, mampu memunculkan icon comel dalam semua tajuk entri Blog Archive tu tanpa segan silu. Bukan je entri terkini, tapi semua entri lepas pun akan ada icon comel kat sebelah tajuk tu. Semoga bermanfaat untuk semua.
22 Comments
waahhhh comelnya icon kat setiap post entry!
ReplyDeleteKann. Boleh cuba lah nanti.
Deletealolo...comelnya...
ReplyDeleteyang highliht current page dekat archive tu pun tak buat2 lagi...mata nie tak larat nak merenung coding2 tu semua...kikiki
InsyaAllah boleh buat. Cuma kena spend masa sikit.
Deletehaaa terima kasih berkongsi dan terima cadangan sy
ReplyDeletesy nampak dah kat mana yg silap
Sama-sama. 😁
Deleteni cadangan je. sy rs kan kalau awak free cuba buat tutorial blog even yg simple2 mcm disable right click ke, background warna-warni ke etc. TAPI kat title, masukkan perkataan TERKINI ke, 2024 ke... etc. sbb mostly yg sy jumpa kebanyakan yg lama2...
ReplyDeleteso kalau awak buat, x mustahil tutorial tu boleh duduk kat front page google bla org search nanti... akan dtg, or 10 thn akan dtg just update je tutorial tu...
Memang dah plan nak wujudkan balik tutorial versi kemas kini. Cuma kekangan masa. Banyak jugak saya tengok tutorial dulu-dulu yang tak update. InsyaAllah ada masa lebih nanti saya buat.
Deletealhamdulillah
ReplyDeletedah boleh da. sy dah update
terima kasih byk2 tau!
Sama-sama. 😁
DeleteWah.. Comelnya.. Memang jadi lebih menarik..
ReplyDeleteTerima kasih. 😃
DeleteMasuk emoji kat tajuk terus boleh juga kan? Boleh buat lain2 untuk tiap pos.
ReplyDeleteBoleh cuma tak praktikal. Sebab nanti kalau berubah angin nak customize blog, kena ubah satu per satu tajuk entri. Kalau buat macam dalam tutorial ni, hanya perlu tukar gambar kat dalam coding je.
Deletewahhhhh... comel².
ReplyDeleteNi kalau nak buat kena mengadap lama sket skrin.
Betul. Kena ada masa baru boleh fokus.
Deletecomelnya mcm tu.. hehe.. tq for the tutorial
ReplyDeleteSama-sama. 😁
DeleteWah dah bertambah comel dengan adanya icon smile 😊
ReplyDeleteKann. Tapi contoh je tu. 😆
Deletewow good tips, cantik kejadianya blog archieve tu
ReplyDeleteTerima kasih. 😃
Delete