Februari 02, 2012

Menerapkan Efek Hover Animasi Css Pada Template Blog

Situseo Blog : Menerapkan efek hover animasi css3 pada template blog, JQuery sudah tidak diragukan lagi dalam hal efek animasi, kehalusan dan kemulusan efek animasinya bisa membuat tampilan blog menjadi lebih menarik, jquery yang merupakan turunan dari javascript yang sudah bertahta cukup lama dalam efek animasi dan sekarang mulai mendapat saingan yang cukup seimbang dengan hadirnya Efek Animasi Css3.

Seiring berkembangnya teknologi, css yang dulunya belum bisa menghadirkan efek animasi, sekarang dengan hadirnya css3, efek animasi sudah bisa dibuat, efek animasi yang dihasilkan dari css3 tidak kalah halus dengan efek animasi jquery. Dengan alasan tersebut saya lebih memilih penggunaan css untuk efek animasinya, walaupun begitu saya juga tidak menutup kemungkinan menggunakan efek animasi jquery sebagai efek animasi dalam blog untuk mempercantik tampilan.

Pada posting sebelumnya pernah dicontohkan beberapa efek hover animasi dengan css3, jika pada postingan tersebut agak kesulitan dalam menerapkannya pada template blog, saya akan sedikit memberikan gambaran, sebagai contoh saya ambil contoh script kode css seperti ini :

.contoh {
color: #666;
font-size: 30px;
font-family: 'Niconne', cursive;
text-shadow: 0px 1px 0px #A6A6A6;
-webkit-transition: all 0.65s ease-in-out;
-moz-transition: all 0.65s ease-in-out;
-o-transition: all 0.65s ease-in-out;
transition: all 0.65s ease-in-out;
}
.contoh:hover {
-webkit-transform:translate(60px, 0px);
-moz-transform:translate(60px, 0px);
-o-transform:translate(60px, 0px);
transform:translate(60px, 0px); 
}

Pada script css tersebut akan menghasilkan efek pergeseran objek kearah kanan sebesar 60px, sebagai contoh untuk menerapkannya pada template blog, kita akan menerapkan efek tersebut untuk judul post, hal pertama yang dicari pada template adalah bagian css yang membentuk style pada judul post tersebut, biasanya kode css untuk judul post menggunakan kode .post h3 {, pada .post h3 { sebelum kode penutup } akan ada kode css yang membentuk style judul post, tambahkan kode transition sebagai efek pelembut perpindahan objek(jarak waktu diukur dengan second(s)), sehingga kode .post h3 nya menjadi seperti ini :

.post h3 {
-kode style css yang terdapat pada template kalian-
-webkit-transition: all 0.65s ease-in-out;
-moz-transition: all 0.65s ease-in-out;
-o-transition: all 0.65s ease-in-out;
transition: all 0.65s ease-in-out;
}

Setelah ditambahkan kode transition pada bagian style css judul post, belum menghasilkan efek apa-apa ketika mouse mengarah pada judul post. Untuk menghasilkan efek ketika mouse mengarah pada judul post, kita tambahkan perintah hover pada .post h3 { dan tambahkan style efek yang akan dihasilkan (sebagai contoh menggunakan script diatas), sehingga kodenya menjadi seperti ini :

.post h3:hover {
-webkit-transform:translate(60px, 0px);
-moz-transform:translate(60px, 0px);
-o-transform:translate(60px, 0px);
transform:translate(60px, 0px); 
}

transform:translate adalah efek yang dihasilkan ketika mouse mengarah pada judul post, pada script tersebut akan bergeser kearah kanan sebesar 60px. Pada template nantinya akan ada 2 .post h3 { dan yang satu lagi dengan tambahan perintah hover, sehingga kode keseluruhan style css judul post akan menjadi seperti ini :

.post h3 {
-kode style css yang terdapat pada template kalian-
-webkit-transition: all 0.65s ease-in-out;
-moz-transition: all 0.65s ease-in-out;
-o-transition: all 0.65s ease-in-out;
transition: all 0.65s ease-in-out;
}
.post h3:hover {
-webkit-transform:translate(60px, 0px);
-moz-transform:translate(60px, 0px);
-o-transform:translate(60px, 0px);
transform:translate(60px, 0px); 
}

Dan hasil dari efek hover untuk judul post akan menjadi seperi ini : (coba arahkan mouse kearah kalimat dibawah ini)


Semoga penjelasan yang singkat dan sederhana ini bisa membantu dalam penerapan efek hover pada template blog kalian.

Semoga bermanfaat,

25 Diskusi untuk Menerapkan Efek Hover Animasi Css Pada Template Blog

7 Februari 2012 20.11  

kalo misalkan sliding nya secara vertikal bisa ga, mas??

8 Februari 2012 00.47  

@Firdaus Fahrudin : coba lihat contoh pada macam efek animasi css3, link nya ada pada post ini, dipost tersebut ada contoh yang secara vertical/kebawah (animasi-alight)

20 Februari 2012 09.06  

pembelajaran yang sangat berguna

23 Februari 2012 00.14  

wah mantap mas ,makasih

9 April 2012 16.18  

mantap mas, saya mau tanya mas. misalnya judul setiap postingan dikasih efek css3, taruhnya disebelah mana mas, ? mohon pencerahaanya

9 April 2012 22.24  

maaf mau tanya.., kalau seandainya saya ingin menempatkan efek itu ke semua gambar di blog saya gimana yah?


saya sudah pasang kode ini di atas tapi gak bisa.., kebetulan mau pasang efek shadow..

ini kodenya saya utek utek, tolong benerin kalo ada yang salah kang :D


.animasi-shadow {
-webkit-transition: all 1.0s ease-in-out;
}
.animasi-shadow:hover {
-moz-box-shadow:0 0 25px #DBE042;
-webkit-box-shadow:0 0 25px #DBE042;
background-color:rgba(255, 255, 255, 0.8);
}

10 April 2012 02.09  

@trii waluyo berarti kamu tidak baca post diatas heheheehe

10 April 2012 02.50  

@Andika Zulfa S untuk gambar coba cari kode :

img {
....
}

atau untuk gambar pada post :

.post img {
....
}

10 April 2012 06.07  

hehe, iya mas, apa title blog itu sama dengan title tiap posting mas, hehe.

Oh ya mas, saya dh nyari .post h3 { tapi di tmplate q ga ada ya mas,
Gmana ya mas,

Mohon pencerahaanya :-)

10 April 2012 16.02  

@Mas Dalang
trimakasih kang dalang, akhirnya bisa juga..

itu .post img di tempet ane gak ada, trus ane tambahin sendiri dan ternyata bisa..
tolong di tulis di artikelnya, biar yang lain juga tahu :D

11 April 2012 00.08  

@Andika Zulfa S congratulations, dengan membaca komentar Andika pasti yang lain terbantu

11 April 2012 00.32  

@trii waluyo title blog=judul blog, seperti punya saya situseo blog

title post=judul postingan

untuk .post h3 { sudah dijawab saudara Andika

12 April 2012 17.31  

oh ya, trmksh mas. iya bener. di template saya ga ada .post img, kn kata mas kalau tidak ada di kasih sendiri. lah, yang ingin saya tanyajan, masukin .post img taruh di seblah mana, di atas kode head, body atau ]]/b:skin (intinya bskin, hehe)
Mohon pencerahaanya, ?
Karena saya ingin banyak belajar dari mas dalang, karena ini adalah ilmu yg bermanfaat

13 April 2012 00.19  

@trii waluyo utnuk menempatkan kode css kamu bisa letakan diatara kode :

<b:skin><![CDATA[

...lokasi kode css

]]></b:skin>

tambahan : jika ingin memasukan kode snippet pada komentar, kodenya mesti di parse dulu...bisa menggunakan tool pada menu diatas untuk mem-parse (encode)

14 April 2012 18.13  

Nanya mas... Dua (2) efek digabung bisa ga??

Misalnya efek "Sliding" digabung dgn 'Animasi Shadow'. Contohnya blog punya teman mas "http://xzone-military.blogspot.com/".
Gmn Caranya mas??

15 April 2012 03.43  

@Jugul
1. bisa
2. kamu ambil kode hover pada animasi shadow dan letakan(tambahan) pada kode hover animasi sliding

16 April 2012 06.35  

oh ya terma kasih mas dalang, nanya lg mas. berarti tiap gambar harus di tlis dan dimasukin ke tmplate ya mas. misalnya ada gambar 10 ya harus nulis .post img 10 mas, ? misalnya kalau banyak kode .post img di template, apa tidak menyebabkan loading lama mas, terima kasih

19 April 2012 18.13  

oh ya mas, q sedikit mulai maksud. maklum lah, orang bodoh ya kaya gini.
1. Kalau memberi efek title blog, berarti kasih kode .post h3 { kode css } di atas ]]bskin.

Kayaknya di template aku ga ada .post h3 ko mas,
Berarti kalau ga ada kasih sendiri ya mas.
Terima kasih
Mohon pencerahaanya mas dalang :-)

19 April 2012 23.23  

@trii waluyo hehehee...ngak ada orang bodoh selama mau mencoba.

tidak harus menambahkan kode css yang tidak ada, tergantung dari html-nya. karena penamaan class atau id pada css itu bersifat bebas (bisa seenak kita memberi namanya) yang penting pada html-nya sama.

jika .post h3 tidak ada pada template coba cari h3 biasanya h3 itu untuk judul post

20 April 2012 08.44  

Iya mas, ktmu adanya h3.
Begini kodenya h3 {font-size: 20px;margin-bottom:0.4em;}

Itu kode buat title blog ga mas, ?

Berarti nanti aku nambaih kode css menjadi h3 {font-size: 20px;margin-bottom:0.4em; kode css;}

Mohon pencerahaanya,

21 April 2012 00.39  

@trii waluyo ya, nanti untuk hovernya baru bikin (tambahin)

h3:hover{
...
}

nb: untuk 1 kasus gunakan tombol jawab pada komentar, biar diskusi lebih rapih

11 Mei 2012 23.38  

kang, kalo pake kode bayangan text ane pasang di title kok gak bisa yah?
ane coba ini
:m0z/webkit-text-shadow:0 2px 30px #0A042A;
gak keluar bayangannya..

16 Juni 2012 22.38  

mas aku sudah berhasil buat efeknya tapi hasilnya kok gak bisa halus dan kurang nyaman kenapa ya..?

26 Juni 2012 21.16  

@Bang Tho untuk css lebih maximal dengan menggunakan browser chrome, coba buka menggunakan chrome

25 Januari 2013 06.43  

Klik disini gan http://goo.gl/Rcfd2 tema premium terbaru update 2013 gratis keren2 gan

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top