Anda pengunjung yang ke:

Traffic Counter

BANNER SAHABAT

Sabtu, 24 November 2012

Cara Membuat Icon Berbeda Pada Tiap Widget Blog

Filled under: ,



Masih dalam area Tips Blogging nih sob, kebetulan lagi asik blogwalking eh gak taunya nemu tips Blogging yang lumayan manaps.

Sebagian besar template blogspot memiliki icon yang sama untuk judul sidebar pada setiap widget/gadget. Agar tampilan blog sobat menjadi makin menarik, kita bisa mengubah icon tersebut menjadi berbeda pada setiap widget. Sebagai contoh, sobat bisa lihatdemo disini.


langkah berikutnya anda silahkan mencari icon yang sesuai dengan widget sobat, bisa dicari pada situs-situs berikut ini :

  • http://www.iconfinder.com
  • http://www.iconspedia.com
  • http://www.freeiconsweb.com
  • http://www.vistaicons.com
  • dan di Google image.hehehehehe...
Icon yang digunakan sebaiknya berukuran sekitar 16×16 atau 32×32 pixel dengan format PNG. Simpan icon-icon tersebut ditempat penyimpanan gambar sobat.

Mari kita simak Cara Membuat Icon Berbeda Pada Tiap Widget Blog.


1. Lakukan pengeditan pada salah satu widget yang ingin diubah, dengan mengklik tulisan edit. Misalnya pada widget “Labels”




2. Hasilnya akan menampilkan halaman popup. Lalu lihat ID dari widget yang anda gunakan.



Seperti yang terlihat pada gambar diatas, Widget Label yang saya gunakan memiliki ID “Label1”. ID ini akan kita gunakan untuk melakukan editing CSS pada template blog.


3. Langkah berikutnya adalah masuk ke menu Design > Edit HTML. Backup template sobat terlebih dahulu. Karena dalam pengeditan membutuhkan kejelian dalam membaca kode. Jika salah pengeditan bisa dikembalikan lagi. 


4. Tambahkan kode dibawah ini sebelum tag ]]></b:skin> :



#Label1 h2 {
  margin: 0 0 1em 0;
  font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-transform: uppercase;
  background:url(http://alamat-icon-sobat) no-repeat scroll left center;
  padding:10px 0px 5px 38px;
}


Keterangan : 

#Label1 : diambil dari nama widget ID yang sobat gunakan. 
h2 : biasanya template menggunakan tag h2 untuk judul widget/gadget.

5. Simpan template sobat, dan lihat hasilnya. Jika belum muncul, berarti ada CSS lain yang mempengaruhi Style sobat. Karena pembuat template memiliki cara penulisan berbeda untuk templatenya.

Selamat Mencoba. Jika mengalami kendala, silahkan komentar di form komentar.



Sumber : http://www.vikrymadz.web.id/2012/05/cara-membuat-icon-berbeda-pada-tiap.html

Ditulis Oleh : SyariĆ’™ ~ Tips dan Trik Blogspot

Syarip Hidayat Sobat sedang membaca artikel tentang Cara Membuat Icon Berbeda Pada Tiap Widget Blog. TuTorial Ku UnTuK Mu™ Memperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya



Baca Artikel Lainnya.!:

3 komentar:

  1. terimakasih infonya..bagus banged blognya :)

    BalasHapus
  2. @Hanum Azkawaty : makasih ya untuk kunjungannya dan pujiannya, kamu juga bisa kok buat blog sederhana seperti saya ini :P

    BalasHapus
  3. postingan yang menarik bro kunjungan balik www.naufalthedarkness.blogspot.com

    BalasHapus