Desember 03, 2010

Merubah Background Sidebar atau Gadget Blog Blogspot

Postingan ini saya buat atas permintaan sobat yang baik hati, hehe. Bagaimana cara merubah background Sidebar? Ada dua cara yang biasa saya gunakan; Pertamamembuat atau merubah backgrund yang berbeda-beda pada setiap gadgetKeduamembuat atau merubah background yang "berlaku" untuk semua sidebar atau gadget. Dari kedua cara ini, sobat dapat memilih salah satu atau ke duanya, terserah.

Membuat atau merubah background yang berbeda-beda pada setiap gadget.
Keuntungan cara ini adalah kita dapat membuat tampilan gadget yang unik, berbeda setiap gadget dan implikasinya dapat mempercantik blog (tergantung kemampuan kita "meramu" background yang sepadan). Pada cara ini, ada 3 komponen gadget yang harus diketahui:
  1. Tempat berpijahnya gadget (aku bingung milih katah yang tepat, wkwkwk). Intinya, "tempat berpijah" ini adalah komponen paling luar dari gadget.
  2. Judul Gadget
  3. Isi Gadget
Dari ketiga komponen tersebut, masing-masing dapat diberi background, apakah itu backround warna atau background gambar. Saya sendiri lebih memilih "bermain" warna, selain tidak punya skill membuat gambar (hahaha), ini juga mempengaruhi kecepatan loading blog (ini akan sangat terasa jika menggunakan modem yang super lemotttttt)

Oke, kita langsung ke intinya.
Kenali terlebih dahulu ID gadget yang akan diubah. Caranya, masuk pada menu Rancangan > Elemen Laman. Pilih gadget mana yang akan kita 'utak-atik', jika sudah memilih, klik kanan pada tombol "Edit" >Copy Link Location. Jika masih bingung, perhatikan gambar di bawah ini:

Setelah meng-copy linknya, pastekan pada Notepad. Perhatikan contoh link yang saya Copy dari gadget Followers:
http://draft.blogger.com/rearrange?blogID=xxxxxxxxx&widgetType=Followers&widgetId=Followers1&action=editWidget 
 Klo yang di bawah ada contoh link gadget HTML:
http://draft.blogger.com/rearrange?blogID=5464543678584934039&widgetType=HTML&widgetId=HTML5&action=editWidget
Yang saya beri tanda merah, itulah ID Gadget-nya (setiap gadget memiliki ID yang unik).

Nah, langkah selanjutnya tinggal masuk pada halaman Edit HTML, kita akan membuat Kode CSS untuk merubah atau memasang backgrund gadget. Buatlah kode seperti pada gambar berikut ini (klik gambar agar lebih jelas):

Yang berwarna merah ganti dengan ID Gadget yang akan diberi background (Perhatikan penulisan ID;contoh penulisan yang SALAHhtml5 atau followers1 atau HTML[spasi]5Contoh penulisan ID yang BENARHTML5 atau Followers1)
Yang berwarna biru adalah kode background, silahkan ganti dengan kode warna yang di inginkan (Lihat kode warna di sini). Jika ingin menggunakan backgroud gambar, silahkan ganti warna biru dengan kode seperti di bawah ini:
url(http://lh3.ggpht.com/_MEEUyOZwM1s/TEz6gCgus9I/AAAAAAAAAFY/p2TwKVcR93g/s128/topnav.png) 
Warna Biru Tua adalah alamat penyimpanan gambar.
Jika sudah membuat kodenya, paste kode tersebut tepat di atas kode ]]></b:skin>
Langkah Terakhir, silahkan Klik Save Template.

0 komentar:

Posting Komentar

Design by : Sponsored by: