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:
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:
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.
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;
}
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.
18 Komentar:
Cantik banget ya hasilnya? Info penting nih. Thanks sobat. Aku selalu menemukan info bermanfaat di sini.
wooo..bagus sob!
THX Yaa :D
Nice info my fren...
Info yang bagus,sudah diterapkan dan hasilnya,wow....
nice information and good job ... come to papa ... wkwkwk
http://informasi--dunia--bisnis.blogspot.com/
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
kerennn...
btw, buat liat daftar kode wanra secara lengkap itu dimana yah, mas?
Pingin coba nie...
Tapi ku kadang bingung kalo yg urusannya
kode html...puaaanjaaang bangeeettt...
Tks Infonya
DIARY OSI
@yeyen : coba kesini http://html-color-codes.com/
@Osi : Ya memang harus hati2, tp saya rasa ini trik yg cukup mudah ko.
nice info bro. bisa saya terapkan di template baru saya. tks.
infonya berguna banget,,,, matur nuwun sob...
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
wah harus coba..
nice bro...
berguna sekali infonya...
Aku dah coba,kok g berhasil.apa salah tempat ya.
@Sbagyo: coba diulang pelan2, hati-hati dengan widget IDnya jangan sampai salah
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.