Tips Membuat Efek Lingkaran Menjadi Bentuk Kotak Persegi
Tutorial Blog-CSS| Cara membuat gambar/foto menjadi lingkaran dan berubah menjadi kotak persegi apabila disorot mouse merupakan salah satu teknik yang menggunakan CSS dalam pembuatannya. Seiring dengan perkembangan dunia web semakin meningkat pula efek-efek menarik yang bisa disajikan, salah satunya yaitu membuat efek foto menjadi lingkaran dan ketika didekati pointer mouse akan berubah menjadi kotak persegi. Efek canggih ini dapat dimanfaatkan dalam foto di postingan atau dalam membuat banner iklan sehingga tampilannya menjadi lebih profesional dan menarik.
Sebagaimana yang kita tahu penggunaan gambar di blog akan membuat blog terlihat menarik dan tidak membosankan. Tetapi jika terlalu banyak menggunakan gambar maka akan membuat loading di blog kita menjadi lama. Oleh karena itu, bijaklah ketika membuat sebuah postingan agar selain dapat menyajikan postingan yang menarik juga tetap mempertahankan loading blog yang cepat sehingga pengunjung akan merasa nyaman ketika mengunjungi blog kita. Efek pada foto yang akan saya bagikan kali ini murni menggunakan CSS sehingga tidak membuat berat di loading blog. Gambar di bawah ini merupakan demo dari efek membuat gambar/foto menjadi lingkaran dan apabila diarahkan kursor mouse akan berubah menjadi kotak persegi secara tiba-tiba.
Apabila anda tertarik ingin mencoba menerapkannya pada blog, silahkan ikuti cara berikut ini:
1. Letakkan kode CSS berikut ini di bawah kode <head> ketika anda membuat entri baru (hanya berlaku pada penulisan mode HTML). Tempatkan di antara <style> dan </style>. Tetapi jika anda ingin menerapkannya pada banner iklan, langsung letakkan di atas kode ]]></b:skin>. Caranya pilih Template lalu Edit HTML.
2. Setiap anda ingin memasukan gambar pada postingan gunakan kode di bawah ini, dengan catatan anda harus mengunggah gambarnya terlebih dahulu untuk mendapatkan url gambar. Untuk yang ingin menerapkannya dalam banner iklan langsung copy paste pada gadget caranya pada menu Tata Letak pilih Tambahkan Gadget. Setelah kodenya dimasukan Klik Simpan.
<div id="mode1">
<a target="_blank" href="URL BLOG ANDA/IKLAN"><img src="URL GAMBAR IKLAN/BLOG ANDA" border="0"/></a>
<a target="_blank" href="URL BLOG ANDA/IKLAN"><img src="URL GAMBARIKLAN/BLOG ANDA" border="0"/></a>
<a target="_blank" href="URL BLOG ANDA/IKLAN"><img src="URL GAMBAR IKLAN/BLOG ANDA" border="0"/></a>
<a target="_blank" href="URL BLOG ANDA/IKLAN"><img src="URL GAMBAR IKLAN/BLOG ANDA" border="0"/></a>
</div>
Sekian Tutorial Blog-CSS tentang cara membuat gambar menjadi lingkaran dan berubah menjadi kotak persegi ketika disorot kursor mouse yang bisa saya bagikan kali ini. Semoga bermanfaat dalam memperkaya wawasan anda. Pengunjung yang baik tidak ada salahnya memberi komentar setelah membaca tulisan ini. Terima kasih atas perhatiannya dan sampai jumpa lagi di postingan saya selanjutnya. Salam...
No comments: