Tips and Trik Bloging: Cara mengubah Icon Sidebar Blog

Cara mengubah Icon Sidebar Blog

Halo sobat Blogger, kali ini adminakan share tentang Cara mengubah Icon Sidebar Blog
Langsung saja, langkah pertama kita harus mempunyai image/icon terlebih dahulu, jika mau gampang kita tinggal cari di situs www.iconarchive.com, disana banyak tersedia icon yang menarik.
Jika sudah dapat silahkan sobat hosting/upload icon tersebut (misalnya di imageshack.us, tinypic.com atau photobucket.com)

Contoh yang saya berikan ini adalah kode css pada template saya sendiri, sobat tinggal menyesuaikan saja ditemplate sobat sendiri. Coba perhatikan pada kode html ditemplate saya dibawah ini (nah cari jg ditemplate sobat kode html kira-kira seperti ini) :

'HTML2

' locked='false' title='Popular Posts' type='HTML'/>

Pada tulisan warna biru kita bisa memulai bermain css untuk menambah icon pada judul sidebar, misalnya sobat ingin menggunakan icon yang berbeda di setiap judul sidebar (jangan lupa menambah tag h2 diujungnya) :

#HTML2 h2 {
background: url ("alamat-gambar-icon-kamu-Favs-icon.png") no-repeat left;
padding-left: 30px !important; /* ubahlah angka warna merah untuk mengatur posisi judul sidebar */
  background-position: 0 0px; /* ubahlah angka warna merah untuk mengatur posisi icon disamping judul sidebar */
}

#LinkList1 h2 {
background: url ("alamat-gambar-icon-kamu-user-group-icon.png") no-repeat left;
padding-left: 30px !important;
  background-position: 0 0px;
}

dan seterusnya...PERHATIAN!!! JANGAN ADA YANG KURANG/SALAH DALAM HAL PENGETIKAN KODE CSS, SEBAIKNYA DI COPAS LANGSUNG DI TEMPLATE SOBAT SENDIRI ( Contoh : besar kecilnya huruf, misal LinkList1 jangan diubah linklist1 atau linklist atau Linkslist)

Selanjutnya jika sobat menggunakan icon/gambar yang sama tinggal gunakan kode berikut :

#HTML2 h2, #LinkList h2, #Label1 h2 {
background: url ("alamat-gambar-icon-kamu-user-group-icon.png") no-repeat left;
padding-left: 30px !important;
  background-position: 0 -1px;
}

Maaf jika penjelasan saya kurang dimengerti, karena saya bukanlah seorang master yang biasa menulis dalam hal kode html/css. saya berterimakasih kepada saudara rizal karena sudah bertanya tentang hal ini untuk memberi penjelasan lewat postingan, kebetulan saya juga pelupa jika mengingat kode html yang menyakitkan mata

dan sekaligus catatan ini sebagai pengingat saya dikemudian hari jika saya ingin mengedit template sendiri nanti. Jika ada yang belum di mengerti saya akan mencoba semampu saya untuk membantu.

sekian artikel singkat tentang Cara mengubah Icon Sidebar Blog
semoga bermanfaat

MENU BLOGKU