Catetan

MEMBUAT ANIMASI TIAP WIDGET DI SIDEBAR BLOGGER 19

Sehubungan banyaknya permintaan untuk posting mengenai Animasi widget di sidebar yang bisa bergerak-gerak ketika mouse berada diatasnya, seperti halnya contoh widget sidebar blog ini, maka terciptalah postingan ini.

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.
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='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.

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

Sedikit penjelasan :
  1. transition:all 0.5s ease-in-out; --> kode ini untuk mengatur kecepatan pergerakan animasi
  2. transform:rotate(2deg); --> kode ini untuk mengatur rotasi dari area widget
  3. transform:rotate(0deg); --> kode ini untuk mengembalikan rotasi kembali ke awal

Setelah berhasil, coba cari id widget yang lain dan bikin animasinya, dengan menggunakan kode CSS3 seperti diatas, atau cobalah bereksperimen, dengan merubah kode-kode diatas.

19 comments:

gama

28 Des 2010, 23.24.00
makasih bangt... aku praktekin smua trik2 n' tips anda...
Eva

28 Des 2010, 23.47.00
aku gak ngeerti bantu aku donk jelasin secara rinci, blogku msh naturl gada animasinya
ابوالياس

2 Jan 2011, 01.57.00
salam " Kurang lebih nya di berikan contoh hasil dari penelitian anda . " :)
karsono

3 Jan 2011, 11.35.00
Untuk contohnya bisa dilihat di sidebar blogger ini, tetapi seperti yang telah saya bilang, hanya browser terbaru yang support kode CSS3 ini, apabila widget disidebar ini bergerak, berarti sidebar tersebut sudah support CSS3, tetapi apabila tidak, maka segeralah diupdate browsernya, untuk melihat kode CSS masa depan, yaitu CSS3... he
AgusstiannBlog

21 Jan 2011, 16.49.00
Gan, minta semua id nya dong. sangat menarik sekali nih.
:D
Eko Ardianto

18 Feb 2011, 18.27.00
ok bozzz,,,ntar gua praktekin di www.arjermania.co.cc
anjusitorus

19 Feb 2011, 20.00.00
thank's boz
Edigma Rock

25 Feb 2011, 13.08.00
bgs bngt..tnks bozz..
edinofri

11 Mar 2011, 16.13.00
Folow Me
http://edinofri.blogspot.com
karena allah

20 Mar 2011, 23.47.00
makasih,,sangatmembantu kang....follow me
http://cauclub-amyinspiration.blogspot.com
Evan Jansernido Ermin

21 Mar 2011, 16.31.00
bagus bgt...
thaks y gan..
Haris Febrianto

7 Apr 2011, 15.11.00
caranya gmn?Q msh peula ne?
YPI AL KHAERIYYAH

22 Apr 2011, 18.46.00
Bagus...tapi tolong yang simple aja...yah...tinggal copy paste kode html nya, paling2 bikin catatan mana yang harus dirubah..../disesuaikan. Tks. banyak....!
AL AMIN MARPAUNG

17 Mei 2011, 22.32.00
KEREnnnnnnnnn....
Irmansah

21 Mei 2011, 14.22.00
Mantab blognya kang.... ikutan nyobain....
Anonim

23 Jun 2011, 18.40.00
GA Bisa gan,ga bisa di pasang di blog ane VARIS VAN JAVA
X Thrower

29 Jun 2011, 17.10.00
wah agag susah...
Demansour Blog

3 Jul 2011, 05.05.00
bos widgetya g gerak gman nih????
Unknown

5 Agu 2011, 12.52.00
kalo headernya bisa gerak gimana caranya?

Posting Komentar