Tambah icon pada setiap post title Hierarchy Blog Archive.


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.

Post a Comment

22 Comments

  1. waahhhh comelnya icon kat setiap post entry!

    ReplyDelete
  2. alolo...comelnya...
    yang highliht current page dekat archive tu pun tak buat2 lagi...mata nie tak larat nak merenung coding2 tu semua...kikiki

    ReplyDelete
    Replies
    1. InsyaAllah boleh buat. Cuma kena spend masa sikit.

      Delete
  3. haaa terima kasih berkongsi dan terima cadangan sy
    sy nampak dah kat mana yg silap

    ReplyDelete
  4. ni 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...
    so 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...

    ReplyDelete
    Replies
    1. 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.

      Delete
  5. alhamdulillah
    dah boleh da. sy dah update
    terima kasih byk2 tau!

    ReplyDelete
  6. Wah.. Comelnya.. Memang jadi lebih menarik..

    ReplyDelete
  7. Masuk emoji kat tajuk terus boleh juga kan? Boleh buat lain2 untuk tiap pos.

    ReplyDelete
    Replies
    1. Boleh 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.

      Delete
  8. wahhhhh... comel².
    Ni kalau nak buat kena mengadap lama sket skrin.

    ReplyDelete
  9. comelnya mcm tu.. hehe.. tq for the tutorial

    ReplyDelete
  10. Wah dah bertambah comel dengan adanya icon smile 😊

    ReplyDelete
  11. wow good tips, cantik kejadianya blog archieve tu

    ReplyDelete