Pada kesempatan kali ini, Dherma-Technology akan membagikan sebuah tutorial ringan tentang blog, yaitu bagaimana cara membuat efek zoom berputar pada gambar di blog dengan mudah. Memberikan efek zoom berputar pada gambar di blog ini akan membuat tampilan blog sobat semakin menarik dan tentunya membuat pengunjung blog betah berlama-lama pada blog sobat.
Untuk menerapkan gambar berputar pada postingan, sobat masukkan kode di bawah ini saat membuat artikel pada HTML ( bukan Compose ).
Catatan!
Pada bagian kode yang saya beri warna merah, dengan url gambar yang ingin sobat tampilkan. dan pada Height dan Width bisa sobat sesuaikan tinggi dan lebar foto yang ingin sobat pasang.
Itu tadi artikel bagaimana cara membuat efek zoom berputar pada gambar di blog dengan mudah, jika ada pertanyaan tentang artikel ini, bisa sobat tuliskan pada kolom komentar di bawah artikel. Terimakaih telah berkunjung.
Untuk sobat blogger yang tertarik untuk membuat gambar pada blognya memiliki efek zoom berputar, berikut tutorialnya:
1. Sobat login terlebih dahulu pada blog yang sobat kelola
2. Setelah itu pada dasbor blogger, klik menu Template (lihat gambar)
3. Di dalam menu Template, sobat klik saja Edit HTML
4. Carilah kode ]]></b:skin> Untuk mempermudah, sobat bisa menekan tombol CTRL + F.
5. Kemudian setelah kode ]]></b:skin> ditemukan, pastekan kode dibawah ini tepat di atas kode ]]></b:skin>.
#dherma img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}#dherma img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}6. Setelah itu, klik Simpan Template.
Untuk menerapkan gambar berputar pada postingan, sobat masukkan kode di bawah ini saat membuat artikel pada HTML ( bukan Compose ).
<div id="dherma"><div style="text-align: center;"><a href="http://www.dherma-technology.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHRzwxREdXKjJI7DY6MPhc1zHEPQALmdHPijh3FrtcViUoG5lUdsnzKwWBcSBgIvpcBPNEjgde-_S4Y1exOFBtjAqtDki97ASDKT8lIUjOwqqmkzpCIzQd1hADrcP6ysksfmPFlSYOjm_Q/s1600/Fatin.jpg" height="332" width="300" /></a></div>
Catatan!
Pada bagian kode yang saya beri warna merah, dengan url gambar yang ingin sobat tampilkan. dan pada Height dan Width bisa sobat sesuaikan tinggi dan lebar foto yang ingin sobat pasang.
Tampilan Gambar Yang Sudah Di Beri Efek Zoom Berputar
 |
| Fatin Shidqia Lubis |
Itu tadi artikel bagaimana cara membuat efek zoom berputar pada gambar di blog dengan mudah, jika ada pertanyaan tentang artikel ini, bisa sobat tuliskan pada kolom komentar di bawah artikel. Terimakaih telah berkunjung.
EmoticonEmoticon