Home » » Cara Membuat Gambar Postingan Berputar dan Membesar saat disorot Mouse

Cara Membuat Gambar Postingan Berputar dan Membesar saat disorot Mouse

Posted by Unknown Posted on 03:16 with No comments
Salam hangat sahabat blogger semuanya, kali ini saya akan berbagi tentang bagaimana agar postingan di homepage berputar dan membesar. Ada dua cara untuk merubah tampilan postingan di home berputar dan membesar. Yaitu yang pertama adalah dengan mengedit HTML dan yang kedua dengan kode CSS.
Berikut untuk kode HTMLnya:

  
b:if cond='data:blog.url == data:blog.homepageUrl'><style>.post img{margin:10px;padding-left5px;width:100px;height:100px;text-align:center;-webkit-transition:All 2.346s ease;-moz-transition:All 2.346s ease;-o-transition:All 2.346s ease;-webkit-background-clip:padding-box;-webkit-box-shadow:0 0 0 3px #C0C0C0;-moz-box-shadow:0 0 0 3px #C0C0C0;box-shadow:0 0 0 3px #C0C0C0;-webkit-border-top-left-radius:60px;-webkit-border-bottom-left-radius:60px;-moz-border-radius-topleft:60px;-moz-border-radius-bottomright:60px;border-top-left-radius:60px;border-bottom-right-radius:60px;-o-border-top-left-radius:60px;-o-border-bottom-right-radius:60px}.post img:hover{box-shadow:1px 1px 10px 3px rgba(0,0,220,0.6);border-radius:0;-webkit-transition:All 2.346s ease;-moz-transition:All 2.346s ease;-o-transition:All 2.346s ease;-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg)}
</style></b:if>

Kode HTML diatas adalah efek untuk membuat postingan di home page anda berputar . Silahkan copy kode diatas dan paste sebelum kode <head> 

dan ini kode CSS nya  :
  

<!-- Efek gambar berputarArdanaKaiser -->.post img{-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}.post img:hover{-o-transform:scale(1.9) rotate(360deg) translate(0px);-moz-transform:scale(1.9) rotate(360deg) translate(0px);-webkit-transform:scale(1.9) rotate(360deg) translate(0px);-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}}<!--Efek gambar berputarArdanaKaiser--> 

Kode Diatas adalah kode untuk efek agar gambar postingan anda membesar setelah menyentuh mouse
Silahkan copy dan paste kodenya diatas kode ]]></b:skin>
Kemudian save dan lihat hasilnya.

Demikianlah artikel mengenai  Cara Membuat Gambar Postingan Berputar dan Membesar saat disorot Mouse semoga bermanfaat
Labels:
Comments
0 Comments

0 comments:

Post a Comment