Cara Membuat Gambar Postingan Berputar dan Membesar saat disorot Mouse

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 :

.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}}

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

Cara Membuat Gambar Postingan Berputar dan Membesar saat disorot Mouse

0 comments:

Post a Comment

MONEY HERE

SUPPORT