April 14, 2012

Background Berbeda Warna Untuk Tiap Judul Widget

Situseo Blog : Menggunakan background warna yang berbeda-beda untuk tiap judul widget pada sidebar, mungkin merupakan salah satu cara untuk memperindah desain tampilan blog, terutama untuk bagian judul widget (h2), ini tidak menutup kemungkinan jika kalian menyukai tampilan yang lebih hidup dengan tampilan yang warna-warni, karena sudah terlalu banyaknya desain tampilan yang berwarna redup, terutama untuk desain tampilan Situseo Blog yang Kusam Tanpa Warna.

Jika kalian menyukai warna-warna terang, kalian bisa memulai dengan memberi background warna yang berbeda pada setiap judul widget sidebar atau widget pada bagian lainnya. Untuk memberi background warna yang berbeda untuk tiap judul sidebar, kita harus melakukannya secara manual untuk tiap widget yang akan diberi warna, cara ini pada dasarnya sudah pernah saya kupas pada judul Icon Berbeda Pada Setiap Judul Sidebar. Untuk melihat hasilnya apa yang dimaksud dari tulisan ini, bisa lihat contoh hasil background warna berbeda pada setiap judul widget.

Background berbeda untuk setiap judul widget

Dalam contoh gambar diatas, saya menggunakan 3 widget dengan background warna pada judul widget dengan warna berbeda, untuk cara membuatnya, kalian tentukan dulu judul widget mana yang akan diberi background warna, sebagai contoh saya akan menggunakan widget popular post, setelah menentukan widget yang akan diberi background, langkah selanjutnya mencari id dari widget tersebut, seperti dalam kasus saya menggunakan widget popular post, untuk mengetahui id dari widget pupular post caranya masuk Edit HTML dan cari kode ini :

<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>

Kode yang diberi warna biru merupakan id dari widget popular post, langkah selanjutnya membuat kode css untuk memberi background berbeda pada judul widget, dengan berpatokan dari id widget tersebut, kode css-nya seperti ini :

#PopularPosts1 h2 {
   background:red;
   color:yellow;
...kode css lainnya;
}

Dengan tambahan h2 pada kode css menunjukan heading 2 untuk judul sidebar, selain background dan warna teks, kalian bisa tambahkan border atau style lainnya yang menurut kalian menarik, selamat mencoba.

Semoga bermanfaat,

13 Diskusi untuk Background Berbeda Warna Untuk Tiap Judul Widget

15 April 2012 10.45  

mas bikin slide menu di atas sebelah kiri itu gmn. minta skripnya dong :)

16 April 2012 00.31  

@Moh. Makrus Sahlan fly and slide menu namanya, caranya sudah saya postkan, search aja melalui search box diatas

16 April 2012 09.41  

Yang ini kan warna,.
Kalau untuk membuat daftar isi widgatnya seperti punya mas dalang bgaiman??

17 April 2012 03.27  

@Jugul sudah saya post-kan, search saja melalui searc box diatas, dengan judul daftar isi

28 Juni 2012 14.54  

woww.. mantap..
keren sekali infonya

8 Agustus 2012 08.56  

Gmn sih menambahkan isi dari judul entri yang sudah di posting?

15 September 2012 10.48  

nice info gan,,thnks ya. salam kenal n salam persahabatan aja ya

13 Oktober 2012 20.15  

artikel yg menarik nie, dan saya menyukainya nie, dan salam kenal dari mico ya, makasi atas infonya dan bagi teman2 yg suka film box office,horor,action dan suka download film. silakan kunjungi situsnya ya, makasi

18 Januari 2013 17.48  

om cara bikin rendom post ky blog ini gmna caranya....mohon bingbinganya masukan

22 Januari 2013 13.46  

Mantab gan, keren banget jadinya.

16 Maret 2013 15.39  

templatenya bikin ngiler nih :D

23 Januari 2014 01.46  

manthap

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top