English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Sabtu, 30 Juni 2012

Cara Menambahkan Icon berbeda untuk tiap Widget/Gadget di Blog

Sebagian besar template blogspot memiliki icon yang sama untuk judul sidebar pada setiap widget/gadget. Agar tampilan blog anda menjadi makin menarik, kita bisa mengubah icon tersebut menjadi berbeda pada setiap widget.
Jika anda ingin melakukannya, anda harus melakukan beberapa persiapan. Langkah awal persiapan adalah, pastikan bahwa design dan tata letak dari widget anda sudah fix dan tidak berubah-ubah lagi. Jika nanti akan melakukan perubahan, bisa menyesuaikan kemudian.

langkah berikutnya anda silahkan mencari icon yang sesuai dengan widget anda, 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.

Icon yang digunakan sebaiknya berukuran sekitar 16×16 atau 32×32 pixel dengan format PNG. Simpan icon-icon tersebut ditempat penyimpanan gambar anda.
Bagaimana cara menambahkannya ?
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 anda 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-anda) no-repeat scroll left center; 
  padding:10px 0px 5px 38px; 
}
Keterangan :
#Label1 : diambil dari nama widget ID yang anda gunakan.
h2 : biasanya template menggunakan tag h2 untuk judul widget/gadget.
5. Simpan template anda, dan lihat hasilnya. Jika belum muncul, berarti ada CSS lain yang mempengaruhi Style anda. Karena pembuat template memiliki cara penulisan berbeda untuk templatenya.
Selamat Mencoba. Jika mengalami kendala, silahkan komentar di form komentar.




Sumber : http://www.belajarpc.info
Cara Menambahkan Icon berbeda untuk tiap Widget/Gadget di Blog 9out of 10 based on 10 ratings. 9 user reviews.

Ditulis Oleh : Unknown Admin Tempat Berbagi Ilmu Untuk Sesama

Artikel Cara Menambahkan Icon berbeda untuk tiap Widget/Gadget di Blog Ini Diposting Oleh Unknown Pada Hari Sabtu, 30 Juni 2012. Terimakasih atas kunjungan Anda Serta Kesediaan Anda Membaca Artikel Ini. Kritik dan Saran Dapat Anda Sampaikan Melalui Kotak Komentar.

Comments
0 Comments

0 komentar

Posting Komentar

Sebelum dan sesudahnya saya ucapkan ribuan terimakasih kepada kalian yang telah berkunjung maupun berkomentar di blog saya ini.

Bagi Sobat yang ingin berkomentar tentang blog atau postingan saya,mohon jangan membuat SPAM