Assalamualaikum Wr. Wb
Good morning sob, di pagi yang cerah ini ane akan menerangkan cara mengganti background sidebar widget dan menggantinya dengan animasi. 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. kalo mau lebih aman, cari tempat yang aman aja lah....hehehe
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 sobat bingung cari animasi yang tepat, ane telah menyediakan animasi yang siap sobat gunakan :
URL:
a.http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif
b.http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif
a.http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif
b.http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif
Oke, kalau sobat 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) repeat-x 10px 1px;
atau
background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif) repeat-x 10px 1px;
terserah sobat pilih animasi yang mana... dan kodenya akan tampak 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)repeat-x 10px 1px;
}
Jika sudah diisi, klik Save
Lalu cek perubahan yang terjadi pada blog sobat
background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif) repeat-x 10px 1px;
atau
background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif) repeat-x 10px 1px;
terserah sobat pilih animasi yang mana... dan kodenya akan tampak 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)repeat-x 10px 1px;
}
Jika sudah diisi, klik Save
Lalu cek perubahan yang terjadi pada blog sobat
Semoga bermanfaat.......Wasalam 