Membuat Animasi Tiap Widget di Sidebar Blogger

3/16/2011 Blog Tutorial Blogger Tips Trik Blog Tutorial Blogger Widget
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.


PERINGATAN!!
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.

Selamat berekperimen semoga bermanfaat.




RESENSI
Jagoan Computer | http://www.jagoancomputer.net


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

13 comments

salam kang fatur..
singgahnya dr malaysia :)
izin saya follow kamu :)

Balas

salam kenal kang wilujeng sonten :D sae blog na heheu followback nya kang :D

Balas

ROLLING SOB http://balindotours.com/chat-room.html :D

Balas

salam silaturahmi :) gratis info2nya ~ follow

Recently: kenapa dengan spiderman?

Balas

Sayang sy dah ga pake blogspot lagi gan

Balas

wah saya salut blog kang fatur keren abis hebat....asli sueeeerrr salam kenal yah kang... ilmu nya boleh juga aku smbil belajar lagi hehe http://websugih.com

Balas

jasa buat account google adsense hanya 30rb, berminat? call/sms 02168936593, stelah account jd.. baru..byr..

Balas

wah banyak tips trik buat blog nie yang patut untuk di praktekan,, thx ya

Balas

warnanya dominan ijo tp ada birunya, ga matching. Sori jangan tersinggung, tapi bikin sakit mata. Enaknya pake warna pastel atau kl warna cerah pilih yg senada, jangan tabrak lari eh tabrak warna...
pointer mouse jadi pedang jg jadi agak susah kl mo klik krn gak tau tepat ada dimana, kecuali pas ada link aja. Cuma saran aja, namanya juga pemirsa...

Balas

Kang Fatur,di blog abdi mah ISLAMIC CENTRE teu tiasa.nyuhungkeun bantosana nya.nuhun

Balas

mantap gan, mampir jugalah di pondok saya http://www.franky.stg.net.tc

Balas