Home » » Cara Merubah warna background widget dengan CSS3

Cara Merubah warna background widget dengan CSS3

Written By Satriyo Arif on Senin, 12 Desember 2011 | 04.50

udah lama ga posting lagi,dikarenakan bentar lagi mau Ujian akhir sekolah+ tes masuk SMA.
pada kesempatan kali ini,saya mau kasih tau cara ganti warna widget blog pada elemen hanya dengan css dan ditambah dengan sentuhan CSS3.trik ini juga tidak akan memberatkan blog sobat,karena penggunaan'a pun minim.trik ini bisa membedakan warna background antar widget,misal'a widget followers kamu warna biru,trus widget label/kategori,warna hijau..

langsung aja saya kasih tau cara'a,

pertama ke rancangan=> elemen halaman pilih widget yg akan diberi background warna,lalu klik edit pada salah satu widget'a
lalu copy nama widget'a seperti gambar dibawah ini.
 kalau sudah dicopy,langsung ke edit HTML

kamu paste nama widget yang tadi.misal:

Followers1

kamu tambahkan kode #

jadi seperti ini " #Followers1 " karena menggunakan syntax ID

selanjutnya,masukan CSS'a

seperti dibawah ini
#Followers1 {background:#ffffff;}

 
selesai deh,ada background pa salah satu widget..tapi design'a masih biasa aja...

langkah selanjut'a,kita tambahkan hiasan CSS3
Border Radius CSS3
-webkit-border-radius: 8px;
-moz-border-radius: 8px;


jadi'a seperti ini

#Followers1 {
background:#ffffff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;}


cara diatas,sama untuk widget lain'a,misal nama widget: HTML1,HTML2,BlogArchive1,Profile1,Label1.


Note:besar/kecil text sangat memperngaruhi keberhasilan trik ini.


lalu,jika sobat ingin edit judul widget/title pada widget,css'a beda lagi.css'a ditambahkan h2

menjadi: #Followers1 h2 {isi CSS}


mau tambahkan hover efek??silakan...

tinggal tambahkan lagi css'a
menjadi seperti ini

#Followers1:hover {isi CSS}


Selamat mencoba sob,kalau ada yang ingin ditanyakan,jangan lupa kasih komen'a ya!jangan sungkan sob ^^






Kontak Kami:
Jl. pemuda no. 4A (kawasan PKL stempel Kantor Pos Johar Semarang)
Phone : 085641156748
024 40256748
Pin BB : 311DAEE5

3 komentar :

  1. wah mantaf gan http://bo-fsakti.blogspot.com/

    BalasHapus
  2. wah keren sob,,,tp kenapa g ada preview'a,,,

    BalasHapus
  3. waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaah kehed

    BalasHapus

Berita Terbaru :

 
Support : Stempel Semarang | Master Trik Blog | Belajar SEO
Copyright © 2013. Blog Tutorial Bojonegoro - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger