Gambar membesar dan berputar yang ada di dalam postingan blog akan terlihat menarik untuk diterapkan di blog anda dan kodenya juga tidak a...
Gambar membesar dan berputar yang ada di dalam postingan blog akan terlihat menarik untuk diterapkan di blog anda dan kodenya juga tidak akan memberatkan loading blog. Sengaja tidak dicantumkan demo karena kode yang akan saya share bekerja 100% dan cara melihatnya nantinya anda dekatkan cursor mouse anda pada gambar yang ada didalam postingan. Kalau hanya gambarnya saja yang membesar dan tidak berputar, silahkan simak di postingan cara membuat gambar membesar didalam postingan blog. Yuk sekarang simak bagaimana cara membuat gambar membesar otomatis pada postingan.
Cara membuat Gambar Membesar Dan Berputar Pada Postingan
1. Login ke akun blogger
2. Pilih template => Edit HTML
3. Centang kotak kecil didekat Expand Template Widget
4. Tekan F3 dan cari kode ]]></b:skin> lalu letakkan kode berikut 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}
5. Simpan template
Selamat mencoba menerapkan tutorial blog mengenai efek zoom gambar dan berputar pada postingan blog, semoga bermanfaat, happy blogging.
COMMENTS