Home » » Cara Membuat Gambar Membesar Dan Berputar Pada Postingan

Cara Membuat Gambar Membesar Dan Berputar Pada Postingan

Sebelum mulai dengan topik pembahasan silahkan simak cara membuat gambar membesar saat disorot mouse. Pada tutorial blog kali ini akan membahas bagaimana cara membuat gambar membesar dan berputar di dalam postingan blog. Tutorial untuk gambar menjadi besar dan berputar-putar ini kagak pakai demo karena kode scriptnya sudah bekerja 100% dan dapat anda terapkan nantinya di blog. Cara kerjanya dari efek zoom gambar / membesar pada gambar yaitu apabila mouse pointer didekatkan pada gambar, secara otomatis gambar akan menjadi besar dan berputar.

Cara Membuat Gambar Membesar Dan Berputar Pada Postingan

Cara Membuat Gambar Membesar Dan Berputar Pada Postingan
1. Buka blog anda di blogger.com
2. Pilih template => Edit HTML
3. Tekan Ctrl+F, cari kode ]]></b:skin> lalu letakkan kode ini diatasnya

.post img,table.tr-caption-container{border:none;max-width:560px;height:auto;-o-transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s} .post img:hover{opacity:1.0;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;-moz-box-shadow:1px 1px 1px #33F, -1px -1px 1px #33F, 0 0 16px #33F;-o-transform:rotate(1460deg) scale(1.8) translate(35px,10px);-moz-transform:rotate(1460deg) scale(1.8) translate(35px,10px);-webkit-transform:rotate(1460deg) scale(1.8) translate(35px,10px);-o-transition:margin-left 1.5s ease-in .4s margin-top 1.5s 0 2.5s ease-out 1.4s opacity 3s ease-in 4s;-moz-transition:margin 1.5s ease-in .4s 0 2.5s ease-out 1.4s opacity 3s ease-in 4s;-webkit-transition:margin 1.5s ease-in .4s 0 2.5s ease-out 1.4s opacity 3s ease-in 4s;margin:40px 0 20px 10px}

4. Simpan template

Silahkan anda coba tutorial blog mengenai cara membuat gambar menjadi besar dan berputar, semoga bermanfaat.


Related Posts

 
Copyright © 2011. Terlintas | Template by Creating Website | Powered by Blogger