Mengganti Sidebar Background Dengan Animasi

Nah...sudah tahu kan... Saya akan menerangkan cara mengganti background sidebar widget ini dan menggantinya dengan background lain yang lebih menarik. Untuk menggantinya kita harus sedikit mengotak-atik kode CSS template. Apabila kita akan mengotak-atik CSS template, backup lah template anda terlebih dahulu...Biar Aman
..
Untuk menggantinya kita tidak menggunakan script tetapi dengan gambar biasa dengan format .gif, jadi tidak akan memberatkan blog. Oleh karena itu kita harus menyediakan gambar terlebih dahulu. Dari pada teman-teman bingung cari gambar yang tepat, Saya telah menyediakan gambar yang siap teman-teman gunakan :














Ini adalah link image hosting dari gambar diatas:
gambar 1 :http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif
gambar 2 :http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif

Okey...kalau teman teman sudah dapat gambarnya, saya akan memulai tutorialnya.


Login dulu ke BLOGGER > Tata Letak > Edit HTML > Kemudian cari Kode seperti di bawah ini (pake ctrl + f supaya cepet nyari kemudian isikan .sidebar h2)

.sidebar h2, .middlecol h2, .bottom h2{
color: $sidebarcolor;
text-transform: capitalize;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 5px 0px;
padding: 0px 0px 2px 0px;
border-bottom:1px solid $bordercolor;
}

Nah kalo udah ketemu sobat tinggal tambahin aja Background nya seperti dibawah ini:

background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif?imgmax=800)repeat;

atau

background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif?imgmax=800)repeat;

terserah yang mana dipakai image nya ... jadi kodenya seperti di bawah ini :

.sidebar h2, .middlecol h2, .bottom h2{

color: $sidebarcolor;

text-transform: capitalize;

font-size: 14px;

font-family: Arial, Tahoma, Verdana;

font-weight: bold;

margin: 0px 0px 5px 0px;

padding: 0px 0px 2px 0px;

border-bottom:1px solid $bordercolor;

background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif?imgmax=800)repeat;

}

Simpan. Kalau sudah selesai
Sumber Dari  forantum.blogspot.com