Jika Anda memperhatikan avatar atau gambar penulis yang secara otomatis terpasang pada halaman blog ini ternyata banyak juga pertanyaan yang menanyakan bagaimana caranya membuat bentuk gambar dalam bingkai bulat?
Jawabannya adalah dengan trik CSS. CSS mengatur bagaimana HTML harusnya terlihat secara visual ke layar monitor atau ke hadapan pemirsa. Perhatikan pengaturan styling yang saya buat berikut:
img {
border:solid;border-color:pink;
border-radius: 50%;
}
Ya itu dia. Hanya butuh pengaturan di atas yang diletakan di atas tag penutup kode </head> di dalam template HTML blogger
Sedangkan HTMLnya adalah sebagai berikut:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kfUOdigUePtXWdGsmrnXxctaXdF1RM_sat0hH3_WLzv9c5GCZfbmaivkxMRYDhWVTKuNg0pcQZdrxXN8dVXGoU67WfX8jlShsIVXIfXaVFZ2pi5AIijzcJMZc-fhooFu5Z9HBSLmj2kN/s317/20210119_202134.jpg" alt="Adelina" style="width:200px">
Atau lebih jelasnya sebagai berikut:
See the Pen MWjxadq by Sufyan Yaan (@sufyan-yaan) on CodePen.
Demikian trik mengatur tampilan avatar penulis berbingkai bulat pada halaman blog. Tutorial singkat diatas hanyalah teknik dasar penerapan CSS.
Adelina Sofyan
contributor biasanya hanya menulis artikel pendek