- 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
![Membuat Gambar Postingan Blog Berubah Menjadi Bulat / Lingkaran Membuat Gambar Postingan Blog Berubah Menjadi Bulat / Lingkaran](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisgFa7JILNkSazEb-rPztkkfUfTllSKsEXpmVYKlGOlQWXSFPTNpF5mAvNuxOjYNR5KSSddIYxpVoiy_99M8_t3bXFixOa47jAGFNIpzuqk7gKUSjHVw9VioGDImWvjg4s6X_PHiGGQlfx/s1600/pola-bilangan.png)
Demikianlah artikel Membuat Gambar Postingan Blog Berubah Menjadi Bulat / Lingkaran ini Saya buat, semoga dapat bermanfaat bagi pembaca dan Sobat Blogger sekalian.
Tidak ada komentar:
Posting Komentar