Membuat Animasi Pada Sidebar Widget

Sepertinya ketagihan neh buat Tutorial Blog hehehe kali ini tentang Membuat Animasi Pada Sidebar Widget ... tapi sebelum dimulai ketawa dulu .. wakakakakak .. hahaha .. hihihi ... huhuhu .. itu artinya ucapan terimakasih buat sobat-sobat eRGe semua, karena udah ngasih respon pada artikel sebelum nya tentang Membuat Animasi Judul Blog. Untuk Posting kali ini tetap gak jauh benda ama yang lalu masih diseputaran kilometer Animasi (hehehe) tapi yang ini buat Sidebar Widget sob, untuk contoh nya bisa dilihat pada Blog ini itupun kalo masih ada hehehe mana tau nanti di copot (halah melenceng terus neh). ini dikarenakan ada direquest ama temen lewat shoutmix makanya dipostingin, padahal caranya sangat mudah tidak butuh waktu lama sampai bermenit-menit tapi cukup dengan 5 menit saja paling lama (bagi yang tau maksudnya ... hehehe .. halah sok-sok an)

Untuk Penerapan Tip ini saya pilih Template buatan Anak Negeri sendiri yaitu Megazine R 1-3 madein nya Kang Rohman The Master Of Blog, bagi sobat yang pengen pinter kunjungi aja blog Beliau ini, disana puluhan Tips dan Triks Ngeblog sudah menanti sobat, nah bagi sobat yang masih bingung atau pengen bertanya, langsung aja chat karena fasilitas nya sudah disediakan, para pakar Blog yg ada disana pun siap mengajari sobat ini pun kalo mereka tau (hehehe) seperti Kang Abeh atau Tutor, aaLiL Master Seo, easyblogtrick, noe, Chempluk, Yoyok, Otak's, GONDES, KOESnadi dan masih banyak yang lain, gak rugi deh kalo mampir kesana .. ilmu semua.
Sekarang langsung pada pokok pembicaraan Membuat Animasi Pada Sidebar Widget .. sebenar nya Animasi ini tidak memakai script tapi Animasi image gif sebelum nya sobat harus menyediakan dulu image nya .. nah untuk itu saya ngasih 2 contoh Image gif dibawah ini



Alamat Link Image 1 : http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif
Alamat Link Image 2 : http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif

Langkah Pertama :
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/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/EkaSidebar.gif?imgmax=800)repeat;
}

kalau udah selesai simpan template kemudian liat blognya .. kalau gak ada aral melintang pasti sidebar nya udah berubah ada lampu-lampu nya .. hehehe

Mudah-mudah tip ini ada manfaat nya bagi kita semua ... amin, sebelum nya terima kasih bagi sobat-sobat yang mau mengomentari artikel ini ... salam.