Membuat Animasi Tiap Widget di Sidebar Blogger

Sebenernya caranya cukup mudah dan kode yang perlu di rehab juga cuman kode CSS-nya saja, yaitu dengan menggunakan kode CSS3, Tetapi ada kekurangannya juga, karena hanya browser terbaru yang support CSS3, coba lihat link tabel di www.findmebyip.com, untuk mengetahui browser apa saja yang support CSS3. Hal pertama yang harus dilakukan adalah mencari id dari tiap widget, yang ada di sidebar, caranya, buka Blogger --> Design --> Edit HTML, kemudian cari kode :

1. <div id="'sidebar-wrapper'"> ini untuk kode css template yang lama atau


2. <b:section-contents id="'sidebar-right-1'"> dan kode sebelah ini untuk template baru yang sidebar-nya ada disebelah kanan, pada intinya cari kode yang hampir sama dengan kode tersebut, atau langsung cari kode dibawah.

Setelah ketemu kemudian coba lihat kode dibawahnya, dan cari kode dibawah ini.

Followers1' locked='false' title='Followers' type='Followers'/>

BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

Kode diatas merupakan beberapa kode widget yang biasanya selalu ada di sidebar untuk menampilkan widget Follower dan widget Archive.



Untuk melihat id widget diatas coba perhatikan kode yang diberi warna merah, nach kode itulah yang disebut id dari widget.



Untuk lebih memudahkan, saya hanya ambil dua widget saja sebagai contoh.

Setelah mengetahui ID dari tiap widget, tinggal dibuat kode CSS3-nya.

#Followers1{

border:2px solid #fff;

padding:5px;

background:#C2E4F1;

margin:0px 0px 10px 0px;

-webkit-transition:all 0.5s ease-in-out;

-webkit-transform:rotate(-2deg);

}

#BlogArchive1 {

border:2px solid #fff;

padding:5px;

background:#C4C5D7;

margin:0px 0px 10px 0px;

-webkit-transition:all 0.5s ease-in-out;

-webkit-transform:rotate(2deg);

}

#BlogArchive1:hover,#BlogArchive1.hover_effect,

#Followers1:hover,#Followers1.hover_effect{

-webkit-transform:rotate(0deg);

}

Selanjutnya copy kode CSS3 diatas, dan paste-kan tepat diatasnya kode dibawah ini:

]]></b:skin>

Simpan dan lihat hasilnya.

CATATAN

Yang patut jadi perhatian, adalah kode CSS3 yang berwarna merah, nach kode itulah yang membuat animasi dari tiap widget menjadi bergerak.