Membuat Gambar pada Blog Berputar & Membesar Saat Disentuh Mouse

Pada kesempatan kali ini saya akan mencoba membahas tentang seputar postingan/tulisan pada sebuah blog. Mungkin banyak blogger yang mengetahui berbagai macam trik dengan memberikan sebuah efek di dalam tulisan mereka. Hal ini bertujuan untuk memberikan sebuah sentuhan menarik serta memberikan keindahan didalam sebuah tulisan, karena pada dasarnya sebuah blog tidak hanya dinilai dari segi kualitas artikel yang mereka buat, akan tetapi hal tersebut juga harus didukung dengan berbagai macam kategori, salah satunya adalah kerapihan serta keterangan gambar yang dapat membantu para pengunjung blog sehingga tulisan yang disampaikan pun dapat dipahami dengan baik. Tulisan saya kali ini tidak jauh dari bagaimana cara membuat sebuah tulisan yang kalian publikasikan lebih terlihat menarik serta memberikan efek berbeda dengan tulisan di blog lain pada umumnya. Tulisan ini akan memberikan kalian panduan bagaimana cara membuat sebuah gambar pada postingan berputar dan membesar pada saat sebuah kursor mouse mendekati gambar tersebut. 

Trik seperti ini mungkin bukan menjadi rahasia umum, karena banyak dari para blogger yang menggunakan trik seperti ini di dalam tulisan mereka dan hasilnya banyak dari para pengunjung yang menyukai efek ini. Untuk lebih lanjut akan bagaimana cara membuat efek ini, silahkan perhatikan langkah-langkah berikut ini:

Langkah-langkah pada Template (Edit HTML):

1. Masuk ke akun blog kalian (Dashboard)
2. Setelah itu pilih bagian Template » Edit HTML
3. Kemudian carilah kode </head> pada halaman HTML tersebut dengan cara menekan tombol CTRL + F (Searching)
4. Setelah menemukan kode tersebut, sekarang salin/copy kode di bawah ini dengan meletakkannya tepat berada di atas kode </head>
   
   <style>#denzuaz 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;} #denzuaz img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>
5. Langkah terakhir klik "Simpan template" dan lihatlah hasilnya pada blog kalian

 

Langkah berikutnya adalah melakukan penempatan pada sebuah postingan dan berikut langkah-langkah yang harus dilakukan:

1. Langkah pertama kalian harus menyisipkan kode <div id="denzuaz"> sebelum url/link gambar yang kalian ingin sisipkan di dalam postingan tersebut dan jangan lupa menutupnya dengan kode </div>. Untuk lebih lengkapnya, lihat kolom HTML yang tertera seperti di bawah ini:
   <div id="denzuaz"> <a href="http://dreamartvolution.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx0RqoKJ2DiBzRVPIgnh18sBjQBigDBGSRjKWCSwnA4EBEb3OAb6wU62ILfon5u7QvfqP4RGhfIg4iLnCRDBS94qLyJhyctvhTgjy0xitYpNb0u3CBTWWgyDq0Qviv4NgMMXo2KOwyfxg/s1600/Dream+Art+Volution.jpg" /></a></div> <br> <br>
2. Keterangan :
   <div id="denzuaz">
   
   <a href="http://dreamartvolution.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx0RqoKJ2DiBzRVPIgnh18sBjQBigDBGSRjKWCSwnA4EBEb3OAb6wU62ILfon5u7QvfqP4RGhfIg4iLnCRDBS94qLyJhyctvhTgjy0xitYpNb0u3CBTWWgyDq0Qviv4NgMMXo2KOwyfxg/s1600/Dream+Art+Volution.jpg" /></a></div>
   » Kode berwarna ungu merupakan kode pembuka dan penutup
   » Kode berwarna biru merupakan alamat blog, gantilah alamat tersebut dengan alamat blog kalian
   » Kode berwarna merah merupakan URL gambar yang ingin kalian sisipkan
3. Langkah terakhir jangan lupa untuk mempublikasikan posting tersebut dan lihatlah hasilnya dengan cara mendekati/menyentuh gambar tersebut menggunakan kursor mouse kalian