2010-03-19

Cara Menambah Icon Pada Title Sidebar

Sekedar Arsip #1 : Cara Menambah Icon Pada Title Sidebar

Tips mempercantik judul sidebar dengan icon ini dimulai dari seorang sahabat saudara Rizal yang menanyakan bagaimana cara memasang atau menambah icon di setiap title/judul sidebar pada kolom komentar blog saya. 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) :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='' type='Profile'/>
<b:widget id='HTML2' locked='false' title='Popular Posts' type='HTML'/>
<b:widget id='LinkList1' locked='false' title='Blogroll' type='LinkList'/>
<b:widget id='LinkList2' locked='false' title='Pojok' type='LinkList'/>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
<b:widget id='Feed1' locked='false' title='Komentar' type='Feed'/>
</b:section> </div>

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 B-) 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.
(Bagi yang sudah mahir dalam hal edit kode html/css tolong di kasi petunjuk kepada saya. Trims.)

3 comments:

  1. mengamankan pertamaxxx dulu..
    lagi dipelajari, ternyata ribet juga ya...

    ReplyDelete
  2. bro, naruk kode css itu dimana..???

    ReplyDelete
  3. Rizal@ kode cssnya tetap diletakkan diatas kode ]]></b:skin>

    ReplyDelete

 
© 2012 Planet Jingga. Natuna Network Natuna | Abrizal.