Wednesday, November 7, 2012

Cara Membuat Gambar Berputar Tersentuh Cursor (eghooy main blog)

Rate this posting:
{[['']]}


Untuk mempercantik tampilan blog memang perlu karena tampilan blog yang cantik dan menarik akan membuat pengunjung blog kita betah berlama lama Stand by di blog kita tapi perlu di perhatikan juga untuk memberi efek blog harus kita perhatikan efek itu akan memberatkan loading blog kita atau tidak . Cara Membuat Gambar Berputar Tersentuh Cursor




Cara Membuat Gambar Berputar Tersentuh Cursor :
  • Login Blogger
  • Edit Template expand template widget Cari kode  ]]></b:skin>
  • Letakkan kode di bawah ini di atas kode   ]]></b:skin>
Gambar berputar di posting blog

.post img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}
.post img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

Gambar berputar dan membesar di posting blog

.post img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}
.post img:hover{-o-transform: scale(1.2) rotate(360deg) translate(0px);-moz-transform: scale(1.2) rotate(360deg) translate(0px);-webkit-transform: scale(1.2) rotate(360deg) translate(0px);-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}

Semua Gambar blog berputar

.img{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out}
.img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

Hanya Gambar comment

.comment img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}
.comment img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

Hanya Gambar Header

.header img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}
.header img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

  • Pratinjau . OK save template

Description: Cara Membuat Gambar Berputar Tersentuh Cursor (eghooy main blog) Rating: 5 Reviewer: Ega Bagus Permadi ItemReviewed: Cara Membuat Gambar Berputar Tersentuh Cursor (eghooy main blog)
Kamu sedang membaca artikel tentang Cara Membuat Gambar Berputar Tersentuh Cursor (eghooy main blog) Silahkan baca artikel Eghooy Main Blog Tentang Yang lainnya. Kamu boleh menyebar Luaskan atau MengCopy-Paste Artikel ini, Tapi jangan lupa untuk meletakkan Link Cara Membuat Gambar Berputar Tersentuh Cursor (eghooy main blog) Sebagai sumbernya


Artikel Terkait:

Reactions:

1 comments:

  1. Mantap gan, tutorialnya simple namun mudah diterapkan ke blog.. Makasih untuk gambar terputarnya..

    ReplyDelete

Berkomentarlah Yang Bijak salam Eghooy Main Blog