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:

 

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

• Tweet
• Share
• Share
• Share
• Share