Mengganti background sidebar dengan animasi

Agar bog anda terlihat dinamis, cobalah kita utak atik sendiri deh, diantaranya dengan mengganti background pada widget judul side bar kita, seperti yang ada pada blog saya ini. Kalau anda belum ngerti apa itu judul pada widget sidebar  :

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 :                            
sidebar widget

sidebar widget
 
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
Login dulu ke bloger > 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/erge/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, insyaAllah sidebar anda telah berganti dengan sidebar yang disertai lampu berjalan yang indah. Apabila teman-teman semua suka dengan tutorial ini, pasang banner blog ini di blog anda. Atau klik iklan di blog ini atuh...pssttt...pssttt, kalau ketahuan bisa kena dibanned nih. hehehe.

0 komentar:

Posting Komentar

  • Digg
  • del.icio.us
  • StumbleUpon
  • Yahoo! Buzz
  • Technorati
  • Facebook
  • TwitThis
  • MySpace
  • LinkedIn
  • Google
  • Reddit
  • Netvibes
Design by eckoCS1Copyright © 2010 Cheater Baturaja | Powered by Blogger