Skip to content Skip to sidebar Skip to footer
Dua Cara membuat gambar menjadi bulat di postingan blog

Dua Cara membuat gambar menjadi bulat di postingan blog

Cara buat gambar jadi bulat. Meskipun tutorial seperti ini terbilang sudah cukup usang untuk dibahas, namun ternyata masih banyak juga orang yang mencari artikel tentang Cara membuat gambar jadi bulat di postingan blog.

Tujuannya tidak lain yaitu untuk mempercantik tampilan postingan kita supaya pengunjung merasa nyaman untuk membaca artikel yang kita buat. Maka dari itu saya tergerak untuk membuat artikel ini untuk dibagikan kepada kalian semua. Disini saya akan membagikan dua cara membuat gambar menjadi bulat, Langsung saja kalian simak tutorialnya yang akan saya rangkum di bawah ini.

1. Cara  Pertama membuat gambar menjadi bulat satu persatu atau hanya satu gambar.


Untuk membuat gambar bulat kalian perlu mengubahnya di mode Html pada saat kalian membuat sebuah artikel , kemudian tambahkan kode berikut :

Style gambar pertama

<div style="text-align: center;">
<img src="URL-GAMBAR" style="border-radius: 99em; border: 1px solid #089975; box-shadow: 1px 1px 1px 4px rgb(255, 255, 255); padding: 4px;" width="100></div>
Gambar 1

Style gambar kedua

<div style="text-align: center;">
<img src=" URL-GAMBAR" style="border-radius: 99em; border: 0px; box-shadow: 0px 0px 0px 5px rgb(204, 204, 204); padding: 0px;" width="100" /></div>
Gambar 2

Style gambar ketiga

<div style="text-align: center;">
<img src="URL-GAMBAR" style="border-radius: 99em; border: 0px; box-shadow: 0px 0px 9px 5px rgb(204, 204, 204); padding: 0px; width="100" /></div>
Gambar 3

Caranya : siapkan gambar dengan ukuran 1:1 (sama sisi / kotak) yang akan kamu buat menjadi bulat. Kemudian terapkan gambar pada postingan, Setelah upload selesai lalu pindah dari tab compose ke tab HTML. Selanjutnya paste-kan kode html di atas dan ubah URL-GAMBAR dengan url gambar yang akan kalian jadikan bulat.


Hingga hasilnya akan terlihat seperti ini. seperti ini

<div style="text-align: center;">
<img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEAthsZP22BOoW3eCHCWGhp2I0O_pBbKp9PvgTAqLmHY8pdDPaobHf5nN4zlrU0Q_rcnl-X25cT4AloOc_WfhGUADToI5gKhp4trDmatDWOD0TgPIufWH6wdr0sds3didTeTWNU6a2dXXV/s320/IMG_20200625_182546.jpg" style="border-radius: 99em; border: 0px; box-shadow: 0px 0px 0px 5px rgb(204, 204, 204); padding: 0px;" width="100" /></div>

Sampai disini kalian sudah berhasil membuat gambar menjadi bulat, kalian juga bisa ubah ukurannya sesuai kebutuhan dengan cara mengganti angka 100 ke angka yang lebih besar ataupun kecil.

2. Cara kedua membuat gambar menjadi bulat sekaligus banyak ( hanya dalam artikel yang akan dibuat )

Oke untuk cara yang kedua akan lebih simpel karena hanya dengan memasang skrip CSS di artikel yang akan kita buat.
Pertama kalian buat saja dulu postingan dengan gambar hingga selesai. jika sudah paste-kan kode CSS berikut dalam mode html, letakan di akhir postingan ataupun di awal postingan bebas terserah anda.

<style>
img {
   width: 350px;
   height: 350px;
   border-radius: 50%;
}
</style>

Silahkan ubah ukurannya jika gambar menjadi terlalu besar. Demikianlah artikel saya kali ini tentang Cara membuat gambar jadi bulat di postingan blog. Semoga postingan ini bermanfaat untuk kalian semua. Terimakasih.
Ndi Uke
Ndi Uke Request dari kalian akan sangat membatu saya membuat artikel selanjutnya.

Post a Comment for "Dua Cara membuat gambar menjadi bulat di postingan blog"