29 Cara Menambahkan Icon Disamping Link

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Pada tutorial kali ini kita akan belajar lagi menambahkan variasi icon pada template blogger. Sebelumnya saya sudah pernah membahas bagaimana menambahkan icon disamping titel atau judul posting. Postingan kali ini saya akan berbagi lagi bagaimana cara menambahkan icon disamping links pada sidebar dan bottom yang contohnya bisa dilihat pada screenshot berikut atau pada blog ini:

 menambahkan icons disamping link pada sidebarmenambahkan icon pada link-link difooter atau bottom

1. Untuk menambahkan icon atau image disamping link-link pada sidebar ikuti tutorial berikut:

  • Pada dasbor>>> Klik Tata Letak>>> Edit HTML>>> Cari kode seperti berikut:

.sidebar ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}

  • Kalau sudah menemukan kode tersebut tambahkan kode berikut persis dibawah kode tadi:

.sidebar li {
  list-style-type:none; 
background: url("Alamat url image sobat letakkan disini") no-repeat 0px .20em;
padding-left:25px; padding-top:3px;
margin-top:2px;
}

2. Sedangkan untuk menambahkan icon pada link-link yang berada pada footer atau bottom

  • Cari kode seperti berikut:

#bottom ul {
padding:0;
margin:0;
color:#333;
}

  • Kalau sudah menemukan kode diatas, tambahkan kode berikut:

#bottom ul li {
list-style-type:none; 
background:url("Alamat url image sobat letakkan disini") no-repeat 0px .17em;
padding-left:17px;
margin-top:2px;
}

  • Tulisan berwarna biru ganti dengan alamat icon sobat.
  • Simpan template
  • Selesai

Semoga bermanfaat.

Sumber gambar: dari sini dan sini


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

29 komentar :

  1. Congratulation Atas Postingan Terbarunya, And Template Pinknya. Smg Terus Melangkah Maju Dengan Persembahan2 Nyata Yang Sarat Guna. Salam Sukses!

    BalasHapus
  2. Syukron, Jazaakumullahu khrn dah ikut jd komentator

    BalasHapus
  3. perlu dicoba,tp templteku udah ada icon link nya dari sono,,:D

    BalasHapus
  4. iya sebagian template dah ada, klu pingin ganti tinggal ganti url image iconx

    BalasHapus
  5. ini yg aq cari.... sip nih langsung coba, oy mo tanya, caranya bikin sudut melingkar itu caranya gimana ? d tunggu jawabannya

    BalasHapus
  6. InsyaAllah anaa buat postingannya sbagai jwbn

    BalasHapus
  7. aq masih bigung aq tunggu postingannya aja

    BalasHapus
  8. Makasih infonya. Salam kenal.

    BalasHapus
  9. terimakasih jg apresiasinya

    BalasHapus
  10. Terimakasih saharing ilmunya, bermanfaat banget untuk bloger newbie kaya saya.

    BalasHapus
  11. newbie? sama saya jg. terimakasih apresiasinya

    BalasHapus
  12. Terimakasih banyak, saya mau coba ini.
    Salam.

    BalasHapus
  13. Oooopppsss, saya tidak ketemu "#bottom ul" di template saya.
    Tidak apa-apa.
    Terimakasih.

    BalasHapus
  14. kalau tidak nemu bisa ditambahkan sendiri

    BalasHapus
  15. g' nemu krn mmg tdk ada elemen diatas footernya khn?

    BalasHapus
  16. tipsnya menarik Ikh...langsung coba ah...

    BalasHapus
  17. kalau ditambahin seperti ini nambah berat blog tidak ya mba?
    memang jadi cantik sih...

    BalasHapus
  18. kak,,aQ gak tw cari icon tweetyna dmn? ywd tserah kk aja yg mana..hehe..syukron ya ukhti

    BalasHapus
  19. @ insanitis37: smg berhasil
    @ narti: tidak jg krn size iconx kecil
    @ suciyellow: udah anaa dpt iconsx de' sabar aja lg.

    BalasHapus
  20. waduh blogq jadi acak acakan nih

    BalasHapus
  21. Biar tidak acak2kn tips sblm ngedit template back up dl. Untuk icon sesuaikn sizex, prhatiin margin n paddingx jg.

    BalasHapus
  22. Ukhti gimna punyakabar? aku ganti lagi lHo eh bisa bntu ana gak?? ana minta tolong yg ini kok nda bisa yg di bottom itu yah??

    BalasHapus
  23. Salam sahabat.., ilmunya dah brhasil di terapkan di blog aq.., thanks ya.., moga sukses selalu..

    BalasHapus
  24. lha, kalo yang mau diganti jumlahnya banyak gimana gan?

    BalasHapus
  25. Nice share sahabat, langsung implementasi & sukses. Terimakasih banyak atas ilmunya.

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!