KianHome - Gadget/widget adalah salah satu bagian cukup penting dalam membantu tampilan dan performa sebuah blog atau website.

Bisa dibilang widget/Gadget adalah penghias dari menu utama blog yang kita punya, bisa juga kita artikan sebagai menu tambahan untuk memberi informasi lain selain menu utama.

Kali ini kita akan membahas mengenai "Cara pasang gambar pada judul Gadget/widget Blog", dimana ini adalah request dari sobat "Around The World" yang beralamat pada http://ramadhansk.blogspot.com/. Berikut tutorialnya :

Pengenalan Dasar,

1. Siapkan sebuah gambar yang memiliki ukuran yang kamu anggap pas untuk tampilan judul dari widget blog kamu, bisa menggunakan ukuran ,36x36,45x45,50x50 jika berupa ikon. Ukuran harus disesuaikan dengan lebar dan tinggi kolom judul widget. Perbandingannya adalah jika ukuran kolom judul widget adalah 300(lebar)x60(tinggi), maka gunakan ukuran ikon dibawah tinggi dari kolom tersebut. yang menjadi perhatian adalah tinggi kolom widgetnya.
2. Untuk ukuran gambar hampir sama dengan ukuran ikon, namun gambar sendiri biasa memiliki lebar dan tinggi yang berbeda. jadi yang diperhatikan yaitu tinggi dari gambar itu sendiri, jangan sampai melebihi tinggi kolom widget.

Koding Image
JIka semua persyaratan sudah dipenuhi maka, kita fokuskan cara memasang kodenya. akan sedikit sulit mengingat kita akan menempatkan gambar sebagai latar (Background), bukan gambar utama. perhatikan kode dibwah ini

.sidebar h2{background:#ffffff;
border-bottom:#76312D solid 1px;
color:#800;
font-family:Georgia,Century gothic,Arial,sans-serif;
font-size:14px;
padding:6px;
}

ini adalah kode standar untuk sidebar blog, meskipun kolom widget tidak sama antar blog, yang harus kamu perhatikan adalah kode widget dengan style <--h2-->, dimana kode ini biasa diimplementasikan sebagai judul.

Selanjutnya kita akan menambahkan gambar pada judul kolom widget tersebut, perhatikan kembali kode dibawah ini (yang berwarna merah)

.sidebar h2{background: url(https://sites.google.com/site/kianbersama/javascript/headcontent.gif)no-repeat left;
background-indent:10px;
border-bottom:#76312D solid 1px;
color:#800;
font-family:Georgia,Century gothic,Arial,sans-serif;
font-size:14px;
padding:6px;
text-align:right;}

Penjelasan :

• background: url(https://sites.google.com/site/kianbersama/javascript/headcontent.gif)no-repeat left;, kode background sudah menggunakan format gambar, dimana keterangan:
• no-repeat : Agar gambar yang kita pasang tidak berulang, atau muncul banyak.
• Left : Adalah posisi dari sigambar itu sendiri, dimana dia berada di sebelah kiri. Jika ingin meletakkannya dikanan cukup mengganti "left" menjadi "right".
• background-indent :10px;, adalah kode untuk jarak antara gambar dengan judul widget, jika dirasa perlu ukuran bisa ditambah agar tampilan lebih maksimal lagi.
• Padding:6px;, ini adalah hal yang cukup menjadi perhatian, mengingat padding mengatur jarak antara tulisan dengan garis tepi dari judul kolom widget.
• text-align:right;, inipun sobat semua juga sudah tahu, namun perlu menjadi perhatian. karena letak tulisan mempengaruhi tampilan. jika gambar yang kita pilih, sebaiknya tulisan judul berada dikanan. jika ikon yang dipilih sebaiknya tulisan judul berada dikiri, namun perlu sedikit pengaturan untuk "Background-indent"nya.

Oke, itu saja yang bisa k'ian bagi, semoga bermanfaat..apabila masih ada pertanyaan silahkan tuliskan pada kotak komentar.. Thank's