Baik, kita langsung pada langkah-langkah pembuatannya, untuk membuat background efek pada widget hanya memerlukan beberapa perubahan pada CSS template anda. Dan saya akan memisahkan beberapa teknik yang memang berbeda cara dan berbeda style berikut ini:
- Colour Background Style
Pemberian warna pada suatu widget menggunakan sintaks background: #kodewarna; dan berikut selengkapnya:
#side-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 25px 0px 0px 0px;
width: 315px;
background: #ffffff;
}
- Image Background Style
Ini adalah teknik memberikan gambar sebagai background pada suatu widget pada blog anda. Perhatikan gambar berikut:
Nah, untuk pemasangan style ini, ada beberapa perubahan pada sintaks. Berikut selengkapnya:
.post-footer {
display: block;
margin: 15px 0px 25px 0px;
padding: 7px 20px 7px 20px;
text-align: left;
font: $postfooterTextFont;
color: #ffffff;
font-weight: normal;
line-height: 1.6em;
text-decoration: none;
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBI3TXvHtUCtpaaoIaHgxalxVroJT3OospZgxGebo-kXHFzbgt8jF-hy3nUe18X4YIV-Y_3MTz7ijNW9wI1o-kVDbb7ulN4vVLGwoax5u4DqqejTduv6dOr3WV6kWzvbpMO7-r2ohiNe8/s1600/banner+demomaskolis.jpg");
background-color:#0092dd;
background-position:top right;
background-repeat:no-repeat;
border: 1px solid $postfooterBorderColor;
}
- Background Image diisi URL gambar.
- Background Color diisi kode warna yang sesuai dengan gambar.
- Background Position diisi dengan posisi penempatan gambar. Misal top-left, bottom-left, top-right, bottom-right, center-right, center-left. Background Repeat diisi ke sebelah mana gambar akan diulang. Untuk ke atas, gunakan repeat-y menjadi:
background-repeat: repeat-y;
Untuk ke samping, gunakan repeat-x menjadi:background-repeat: repeat-x;
Dan jika tidak ingin diulangm gunakan no-repeat seperti contoh awal. - Hover Image Background Style
Style unik, seperti yang digunakan untuk sebuah link. yaitu berubah warna jika mouse mendekat, namanya HOVER STYLE. Teknik ini juga bisa menggunakan gambar. Untuk pemasangannya, pastikan kode .widget pada CSS yang akan diberi background. Untuk contoh adalah kode berikut ini:
#main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 20px 25px;
}
#sidebar .widget {
margin: 0px;
padding: 0px;
}
#main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 20px 25px;
}
#main .widget:hover {
background:#e3e3e3;
}
Sumber Artikel