Sebelumnya Saya pernah share cara membuat background posting. Nah kali kita akan mempelajari tentang background juga, yaitu cara membuat background pada widget blog.
Background Style yang dimaksudkan adalah memberikan efek background pada suatu widget pada blog. Style ini bisa berupa warna dan gambar. Dan dengan ini, anda bisa lebih mempercantik tampilan dengan gambar atau pilihan warna anda.
Teknik ini sangat sederhana. Namun karena ada salah satu teman yang request, jadi saya posting. Selain itu di sini juga belum membahas soal latar belakang tersebut.
Saya mendapatkan kode ini dari blognya Ardi33, terima kasih sob.
Oke, teknik ini memerlukan beberapa perubahan pada CSS template anda. Dan saya akan memisahkan beberapa teknik yang memang berbeda cara dan berbeda style berikut ini:
1. Colour Background Style
Pemberian warna pada suatu widget menggunakan sintaks background: #kodewarna; dan berikut selengkapnya:
Tambahkan kode merah seperti di atas pada widget yang ingin anda tambahkan warna background. Untuk warna, anda bisa menggunakan Photoshop atau Online Tools untuk mengetahui kode warna, dan jangan lupa menggunakan tanda pagar (#) sebelum kode.#side-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 25px 0px 0px 0px;
width: 315px;
background: #ffffff;
}
2. Image Background Style
Ini adalah teknik memberikan gambar sebagai background pada suatu widget pada blog anda. Perhatikan gambar berikut:
diambil dari ardi33.web.id |
.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("http://sites.google.com/site/cumaisenggroup/cabinet/dasbor/postfooter.gif");
background-color:#0092dd;
background-position:top right;
background-repeat:no-repeat;
border: 1px solid $postfooterBorderColor;
}
Penjelasannya adalah:- 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.3. 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:
Di atas adalah kode untuk main-widget, untuk sidebar biasanya menggunakan kode:#main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 20px 25px;
}
Pemberian efek ini sangat mudah. Copy-Paste seluruh kode widget dan taruh di bawahnya, lalu tambahkan :hover pada akhir kata widget dan beri style background di dalam kode tadi. Selengkapnya:#sidebar .widget {
margin: 0px;
padding: 0px;
}
#main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 20px 25px;
}
#main .widget:hover {
background:#e3e3e3;
}
Gunakan kreasi anda dalam pemberian efek atau style ini. Buat blog anda secantik mingkin agar bisa menarik pengunjung dan dapatkan beberapa manfaatnya. Selamat berkreasi.
9 comments
Waw.. Kok kayak ada yang brubah sama ini Blog yaaa..?
Replyapa yaaa???
.. hmm....
Nice Post kanggg..^^
*mau praktek dulu
salam dari 123horas!!
@ika
ReplyIya, untuk sementara screensaver di blog ini dihilangkan sementara dulu. Nanti akan diperbaiki bug untuk browser yang belum terbaru agar bisa dan tidak error.
nice blog ... boleh nyontoh gan ?
Replysalam kenal dari saya .... kunjungan perdana.
follback .. http://abifadhilblogs.blogspot.com/
@abifadhilblog's
ReplyBoleh dong gan.
Terima kasih gan, sudah gan.
masih bingung!ada yang lebih mudah g??
Reply@barubelajar : Waduh maaf mas, itu yang ku tahu.
ReplyKalo mau, belajar aja dulu cara membuat background pada posting, nah pasti kita tahu kode-kodenya, setelah itu baru coba artikel ini.
Kalo masih bingung, silahkan tanya di halaman facebook DAW-XP langsung di DAW-XP. :D
Thanks atas infonya...
Replymakasii infonya ... :D
ReplyTerimakasih gan
ReplyTemplate ane kalau tambah widget selalu transparan tapi dengan artikel agan akhirnya ada background nya ^_^
Salut thanks (y)
DearVision
Post a Comment
Silahkan Anda kritik dan sarannya pada kolom komentar di bawah ini. Karena setiap satu kata Anda berkomentar sangat berarti untuk kemajuan blog ini (baca: Cara Berkomentar yang Baik).