English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

.::Daftar Isi::.

.::You Follow I Follback::.

Sabtu, 05 Maret 2011

Membuat Animasi Miring Pada Widget Blog


Membuat Animasi Seperti yang ada pada header blog ini caranya cukup sederhana. Ketika mouse disorot ke header maka header tersebut bergerak ke posisi normal yang sebelumnya miring. Efek Miring tersebut tidak hanya pada header saja, namun pada semua widget di blog anda. Caranya cukuplah 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 yang dicetak tebal 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 ]]></b:skin>

Simpan dan lihat hasilnya.

Yang patut jadi perhatian, adalah kode CSS3 dibawah ini, 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.


Semoga Berhasil

sumber:karsono.co.cc

Reaksi:

9 komentar:

Yupz, klo CSS biasa masih blum bisa dimainin Hovernya kaya CSS3... hem.. paling cuma gak support di IE aja klo CSS3...

Thnx 4 udah mampir kawan... :D

Mantap juga ya, bisa bergerak..hehe.

Follow balik sudah dilakukan.

Itu hanya support di browser terbaru....seperti google chrome

Gan koq yg ane gak bergerak sih mohon pencerahannya.

@Fsychopunkyang perlu diperhatikan adalah id widget yang mau dbuat miring sebagai contoh id followers
<b:widget id='Followers1' . untuk pembuatan kode css #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);
}


#Followers1:hover,#Followers1.hover_effect{
-webkit-transform:rotate(0deg);
}

kalo mau membuat miring widget lainnya, hanya kamu ubah id widget followers diatas.......

Gan koq gak miring2 juga sih..
coba agan periksa di blog saya koq hasilnya malah gitu.

kalo boleh tau widget apa sih? animasi ini hanya bisa dilihat di browser terbaru seperti google chrome

saran saya: Dicek lagi Id widgetnya
ganti id "followers1" dengan id widget kamu yg mau dbuat miring
#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);
}

Pada kode di bawah ini kamu ganti juga id widgetnya"followers1" ganti dg id widget kamu

#Followers1:hover,#Followers1.hover_effect{
-webkit-transform:rotate(0deg);
}

pokoknya id widget yang mengandung kalimat followers1 kamu gnti dg id widget yang akan kamu buat miring

kode tersebut hanya untuk widget followers saja....untuk menambahkan lagi, tinggal copy kode tersebut.

beneran bsa ta ini gan....

Posting Komentar