Membuat background widget warna-warni

Maksud dari judul posting diatas adalah untuk membuat setiap widget pada blog memiliki warna yang berbeda-beda sesuai dengan keinginan kita. Trik ini mungkin akan sangat berguna bagi anda yang hoby mengutak-atik tampilan atau template blog (seperti saya hehe..).
Ok kita mulai dari pengertian dasar tentang widget ID, karena ini sangat penting jadi anda harus memahami tentang widget ID ini. Setiap Widget yang kita pasang di blog kita akan memiliki widget ID masing-masing misal anda memiliki sebuah widget link dengan title “Link Teman” maka widget ID link anda seperti berikut:
<b:widget id='LinkList1' locked='false' title='Link Teman' type='LinkList'/>

Jadi widget ID link tersebut yaitu “Linklist1”, lalu jika anda menambahkan satu widget link lagi maka akan menjadi “Linklist2” dan seterusnya. Untuk mengetahui widget ID ini anda harus dalam jendela edit HTML. Anda cukup melakukan search (tekan Ctrl+F) dan masukkan title atau judul widget anda (dalam contoh diatas Link Teman) sampai menemukan kode seperti diatas. Lalu bagaimana jika anda tidak memberi judul atau title pada widget anda? Berikan saja judul untuk sementara dan anda bisa menghapus lagi setelah berhasil menemukan widget ID.

Untuk widget lain misal widget HTML/Java script maka widget ID akan menjadi HTML1, HTML2..dst, widget Label akan menjadi Label1, Label2..dst.

Nah setelah anda mengetahui widget ID dari masing-masing widget maka selanjutnya anda dapat melakukan perubahan-perubahan yang diinginkan. Caranya anda harus menambahkan kode seperti dibawah ini diantara kode <head> dan </head> setelah tanda }. Untuk lebih mudahnya letakkan saja kode-kode tersebut tepat diatas kode </head>. Contoh:
#LinkList1{
background: #DDDFFF;
}
#Label1{
background: #FCDFFF;
}
#HTML1{
background: #FF49C6;
}
#HTML2{
background: #FFFFFF;
}

Teks yang berwarna merah adalah widget ID yang harus anda sesuaikan dengan template anda, teks berwarna hijau adalah kode warna background, untuk mengetahui kode-kode warna silahkan klik di sini.

Setelah anda menambahkan kode-kode diatas, silahkan Preview/Pratinjau sebelum melakukan Save. Contoh hasil perubahan diatas pada blog akan terlihat seperti screenshot dibawah ini:



Dengan cara-cara diatas sebetulnya anda juga dapat menambah border, atau mengganti background widget dengan gambar anda sendiri dan lain-lain sesuai kreatifitas anda. Selamat berkreasi.

Artikel terkait:



18 Komentar:

Ivan Kavalera said...

Cantik banget ya hasilnya? Info penting nih. Thanks sobat. Aku selalu menemukan info bermanfaat di sini.

ajir said...

wooo..bagus sob!
THX Yaa :D

eNeS said...

Nice info my fren...

Salam Blog said...

Info yang bagus,sudah diterapkan dan hasilnya,wow....

Spesialis IT Network Infrastructure said...

nice information and good job ... come to papa ... wkwkwk

Spesialis IT Network Infrastructure said...

http://informasi--dunia--bisnis.blogspot.com/

J-T said...

wah bener trikna, hedod sob. JGN di hapus yE blm smpet prktek. lg di luar kota ni (kagak ada sinyal kagak ada tower, NGOS-NGOSAN)

hehe1000x

Anonymous said...

kerennn...
btw, buat liat daftar kode wanra secara lengkap itu dimana yah, mas?

Osi said...

Pingin coba nie...
Tapi ku kadang bingung kalo yg urusannya
kode html...puaaanjaaang bangeeettt...

Tks Infonya


DIARY OSI

Admin said...

@yeyen : coba kesini http://html-color-codes.com/
@Osi : Ya memang harus hati2, tp saya rasa ini trik yg cukup mudah ko.

Free Tips 4U said...

nice info bro. bisa saya terapkan di template baru saya. tks.

blog-qucluk said...

infonya berguna banget,,,, matur nuwun sob...

Beben Koben said...

hehehe...klo udah sebody dg wrapper warna widgetnya...apa nggak ngeberatin yah. Kan bentrok (jadi nimpa gitoh)...perasaan sih...xixixixi good good...keeping exploring with ur trick

mau dapat uang said...

wah harus coba..

fachrifaul said...

nice bro...
berguna sekali infonya...

Sbagyo said...

Aku dah coba,kok g berhasil.apa salah tempat ya.

Admin said...

@Sbagyo: coba diulang pelan2, hati-hati dengan widget IDnya jangan sampai salah

pakDE-Nanto said...

Templateku simple blogger belum bisa...

Post a Comment

Silahkan tinggalkan komentar anda, setiap komentar yang anda tulis akan menambah jumlah backlink anda.
Sebaiknya gunakan Name/URL pada saat menuliskan komentar.

Template Design by Eris Agustian - Digital Life | Professional Blogger Template