Bengkelozz

Membuat Efek Zoom Putar Gambar di Posting

Dulur Blogger, Alhamdulillah akhirnya kesampaian juga keinginan saya untuk membuat blog yang akan saya isi dengan segala pernak-pernik pemanis ngeblog. Blog ini bukanlah blog tutorial, tapi sebuah media bagi saya untuk  berbagi sekaligus belajar bersama tentang segala sesuatu hal yang dianggap sulit oleh sebagian orang.$0D

Saya anggap blog ini semacam bengkel yang berfungsi untuk mengoprak-aprik segala sesuatu yang dianggap nyleneh dalam dunia blogging. Sebagai antisipasi pula agar tangan saya tak gatal untuk terus ngutek-ngutek blog utama saya yaitu ESSIP
 
Saya bukanlah seorang ahli HTML atau Javascript dan segala tetek bengeknya. Apa yang ditulis disini saya anggap hanyalah semacam rejeki ilmu yang saya temukan ketika berselancar di dunia maya. Jadi alangkah baiknya jika saya pun membagi rejeki itu dengan siapa saja yang mau menikmatinya. Semoga ada manfaat yang nantinya bisa anda bawa selepas mengunjungi bengkel sederhana ini. Jika ada yang berkenan saling berbagi tips atau trik, monggo dengan senang hati saya persilakan.

Mungkin ada yang mau request trik?.. wkwkwk emang saya master?. Intine kita belajar bareng wis. Kalau ada sesuatu yang saya bisa, Insya Allah saya gak akan medit ilmu. Kalau saya gak bisa.. yo wis ngopi aja deh di Warung Blogger

Untuk posting perdana ini saya akan berbagi tentang sebuah trik yang biasa saya lakukan saat memuat gambar di postingan. Ini sebenarnya teknik jadul, tapi entahlah apa karena mungkin alasan RAHASIA ya, kok masih banyak yang belum tahu?.

Trik ini hanya sebatas memberikan sebuah efek zoom dan putar apabila kita memuat sebuah gambar dalam postingan. Alhamdulillah, di posting perdana ini saya kedatangan bintang tamu yang rela untuk saya jadikan model. Mau tahu siapa dia. Klik aja spoiler di bawah ini.




Coba anda tempelkan cursor mouse anda ke foto penggemar saya tersebut hahaha. Akan nampak sebuah efek zoom dan memutar dari foto dara manis itu kan?. Nah mau tahu apa rahasianya?.

<style type="text/css">
.post img { background:#aaa; border-radius:px; -moz-border-radius:px; -webkit-border-radius:px; -o-transition:all 1.2s ease-out; -moz-transition:all 1.2s ease-nut; -webkit-transition:all 1.2s ease-out; } .post img:hover { z-index:99; background:#993300; border-color:#00000; -o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px); -moz-transform:rotate(360deg) scale(2) translate(1px,-3px); -webkit-transform:rotate(30deg) scale(2) translate(10px,-3px); }
</style>

Anda lihat kode diatas?. Coba anda sisipkan kode tersebut di dalam postingan yang juga berisi gambar anda. Ingat.! saat melakukan postingan pastikan anda memakai mode HTML ya. untuk kode yang berwarna merah, silakan anda ganti sendiri uktran derajat putarannya. Mau kanan, kiri atau muter-muter opo dare wis ah hahaha.

Yo wis selamat berkreasi, semoga sukses dengan acara muter-muter gambarnya. Sekarang waktunya saya kulakan ilmu lagi di dunia maya. Sapa tahu besok ada sebuah pelajaran lagi yang bisa saya bagi untuk anda.
Label: Tips Blog