Langsung aja Cara Memberi Warna Pada Widget/Sidebar Blogger.
Pada dasarnya, antara posting dengan Sidebar yang di dalamnya terdapat widget/gadget2, Secara hematnya sih di setting bersamaan oleh template agar tampil bersamaan. Maksudnya antara area posting dengan area sidebar akan di samakan atau digabung agar menghemat script. Nah untuk Memberi Warna Pada Widget/Sidebar Blogger, Sobat bisa pisahkan dulu antara area Posting dengan Area Sidebar. Cara memisahkan area Posting dengan Area Widget akan saya posting lain waktu. Ato sobat bisa cari aja cara membuat sidebar dengan kotak terpisah. Lhoh kok gak nyambung pembahasannya. He.
Kembali ke laptop. Sekarang kita praktik saja cara memberi warna pada widget/sidebar blogger. Fungsinya adalah apabila ada kursor melintas, maka akan berubah warna otomatis.
Setelah kamu baca pendahuluan di atas, (hayo baca belum? he2), kamu pasti tahu kalau area posting dengan area sidebar dapat di pisah atau diedit sendiri-sendiri.
1. Sekarang kita edit dulu area Posting
Jika ingin memberi kotak/memberi warna background pada area posting caranya :
Silakan cari kode di bawah ini :
.main .widget{
background:#3D81EE;
border-bottom:0px solid $bordercolor;
margin:0 0 1.0em;
padding:0 0 1.5em;
}
background:#3D81EE;
border-bottom:0px solid $bordercolor;
margin:0 0 1.0em;
padding:0 0 1.5em;
}
Kalau tidak ada, berarti sobat belum memisahkan area posting dengan area sidebar, Tapi tidak masalah. Sekarang cari saja kode ini kalau kode di atas tidak ada.
#main-wrapper {
width: 555px;
float: $startSide;
margin-right: ;
border:;
background:;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
width: 555px;
float: $startSide;
margin-right: ;
border:;
background:;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Berbeda tidak masalah, cari saja kode #main-wrapper { dengan cara Ctrl + F jika sobat menggunakan Mozilla Firefox
Selanjutnya pastekan kode berikut : (Letaknya di bawah kode } di atas)
.main .widget:hover {
background:#66B5FF;
}
background:#66B5FF;
}
Jika sudah kemudian simpan.
2. Tapi jika sobat hanya ingin memberi warna background pada widget/sidebar blogger saja, berikut caranya:
Cari kode ini :
#sidebar-wrapper {
width: 200px;
margin-right: 10px;
margin-top: 0px;
padding-left: 0px;
border:;
float: left;
background:;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
width: 200px;
margin-right: 10px;
margin-top: 0px;
padding-left: 0px;
border:;
float: left;
background:;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Kemudian pastekan kode di bawah ini di bawah kode tersebut
.sidebar .widget:hover {
background:#FFF8DC;
}
background:#FFF8DC;
}
Sobat bisa ganti tulisan warna hijau (hijau) dengan kode kesukaan sobat. Untuk melihat kodenya bisa di lihat di http://alinz.wen.ru/colour.html Yang terakhir simpan dan lihat hasilnya. Nah mudah2an cara memberi warna/background pada widget/sidebar blogger di atas bisa membantu sobat semua. Dan semoga juga berhasil.
Untuk hasil yang unik, sobat bisa lansung saja ganti kode :
#sidebar-wrapper { di atas
dengan
.sidebar .widget:hover {
background:#FFF8DC;
}
background:#FFF8DC;
}
Apa yang akan terjadi?