Membuat Gambar Postingan Blog Berubah Menjadi Bulat / Lingkaran

Halo sobat blogger!, pada artikel kali ini Saya mencoba membuatkan tutorial bagaimana membuat gambar pada postingan blog berubah menjadi bulat atau lingkaran ketika kursor diarahkan ke gambar. Langsung saja harap disimak tutorial dibawah ini.

• Pertama-tama tentu kita sudah login terlebih dahulu di blogger.com kemudian buka blog sobat sekalian.
• Kemudian buka tab Template di menu bar sebelah kiri blogger, lalu klik Edit HTML.
• kemudian Search/Cari kode .post-body img  atau .post img menggukanakan tombol CTRL+F.
• Jika sudah ditemukan kode .post-body img  atau .post img selanjutnya letakkan kode dibawah ini dibawah kode .post-body img {...} atau .post img {...} disesuaikan saja.

Script/Kode

.post-body img:hover {

border-radius:1000px;
transition:all 0.3s ease;
}<!--Gunakan ini jika yang ditemukan kode .post-body img-->

.post img:hover {

border-radius:1000px;

transition:all 0.3s ease;

}<!--Gunakan ini jika yang ditemukan kode .post img-->

Penjelasan

• Ukuran border radius bisa disesuaikan dengan keinginan kita, tapi dengan catatan agar bisa membuat gambar menjadi lingkaran penuh ukuran border radius harus setengah atau lebih besar dari lebar (width) dan tinggi (height) dari gambar.
• Gambar yang bisa dibentuk menjadi lingkaran penuh hanya gambar dengan lebar dan tinggi yang sama, jika tidak gambar mungkin berubah bentuk menjadi elips.
• Sobat bisa juga menjadikan perubahan gambar dari bulat menjadi persegi dengan cara meletakkan kode "border-radius: 1000px;" di dalam .post-body img { bisa diletakkan diawal, atau diletakkan setelah semicolon ";" } , kemudian gunakan kode diatas tersebut juga, namun ganti ukuran border radiusnya menjadi 0, contoh : border-radius: 0px;.
• Fungsi kode "transition:all 0.3s ease;" adalah untuk memberikan efek perubahan bentuk yang lebih lembut, "0.3s" disini berarti perubahan dari gambar bulat ke persegi maupun sebaliknya berlangsung selama 0.3 Second/Detik, ukuran ini bisa diganti sesuai keinginan. Kode tersebut juga diletakkan di dalam .post-body img {...}, agar ketika kursor terlepas dari gambar, gambar akan kembali ke bentuk semula dengan efek perubahan yang sama. Lihat contoh dibawah ini.

• Jika sudah meletakkan kode tersebut, selanjutnya klik Simpan Template

Contoh Gambar Postingan Setelah Diberi Kode Diatas

Demikianlah artikel Membuat Gambar Postingan Blog Berubah Menjadi Bulat / Lingkaran ini Saya buat, semoga dapat bermanfaat bagi pembaca dan Sobat Blogger sekalian.