Cara Membuat Background Pada Widget Blog

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:

#side-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 25px 0px 0px 0px;
width: 315px;
background: #ffffff;
}

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. 


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

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("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:

#main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 20px 25px;
}

Di atas adalah kode untuk main-widget, untuk sidebar biasanya menggunakan kode:

#sidebar .widget {
margin: 0px;
padding: 0px;
}

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:

#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.

Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

Tidak tahu cara berlangganan? Klik disini

Related Post:

Triks Blog

• Membuat Artikel Terkait Dengan Scroll
• Cara Membuat Reply Komentar
• Cara Mensubmit Artikel ke Lintas Berita
• Cara Mendaftar di Lintas Berita
• Cara Menambahkan Headline News di Blog
• Membuat Menu dan Sub Menu Horizontal
• Cara Membuat Tag Cloud Animasi
• Cara Backup Templates
• Cara Membuat dan Mengganti Favicon di Blog
• Cara Membuat Pesan Pembuka dan Kotak Dialog
• Cara Membuat Javascript Image Loader for Blog
• Cara Membuat Show-Hidden Widget di Blogspot
• Cara Membuat Artikel Terkait (Related Posts) Bergambar
• Cara Membuat Artikel Terkait (Related Posts)
• Modifikasi Tampilan Read more
• Cara Membuat Spoiler di Blog/Forum
• Cara Mengganti Style Font Blog
• Menghilangkan Icon Obeng dan Tang / Quick Edit di Blog

Blog

• Ribuan Backlink Gratis dari IMTalk
• Cara Memasang Tweetmeme di Setiap Postingan
• Cara Mendaftarkan Blog ke DMOZ
• Cara Membuat Short URL Google Plus
• Cara Daftar Google Plus (Google+)
• Google Update Pagerank Juli 2011
• Cara Menghapus dan Mengecek Broken Link Pada Blog
• Apa itu Google Plus (Google+) ?
• Tips Menghadapi Komentar Negatif
• Menambah Meta Tag Untuk Perkuat Postingan Kontes SEO
• Kontes SEO, Berbahaya!
• Pentingnya Menjawab Setiap Komentar di Blog
• Kenali Pengunjung Blog Anda
• 10 Artikel Terbaik Bulan Juni 2011
• Metode On Page dan Off Page SEO
• Cara Membuat Link Internal di Setiap Postingan
• Siapa Pengunjung Setia di Blog Anda?
• Tips Mendapatkan Pengunjung Setia di Blog
• Favicon Generate - Fitur Baru Blogger
• Cara Menambah Tombol Google +1
• DAW-XP Toolbar - Akses Cepat Menuju DAW-XP
• Cara Membuat Toolbar Alexa Sendiri
• Cara Memasang Alexa Widget
• Manfaat Alexa Toolbar
• Apa itu Alexa Rank?

Anda sedang membaca artikel tentang Cara Membuat Background Pada Widget Blog dan anda bisa menemukan artikel Cara Membuat Background Pada Widget Blog ini dengan url http://daw-xp.blogspot.com/2011/04/cara-membuat-background-pada-widget.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Background Pada Widget Blog ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Background Pada Widget Blog sumbernya.