Cara menampilkan avatar penulis berbingkai bulat di blogger dengan CSS

Cara menampilkan avatar penulis berbingkai bulat di blogger dengan CSS
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?

avatar penulis di atas setiap postingan blogger

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://1.bp.blogspot.com/-rjQYqDrMJwc/YAbdNt87j0I/AAAAAAAAG2Q/-ztU4n0dYtwh7UVV0hqnlYOlbe3Ao7WmACLcBGAsYHQ/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.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:


 
Adel

Adelina Sofyan

contributor biasanya hanya menulis artikel pendek
I want go anyway, but so manything still leave behind.

Posting Komentar

Silahkan berkomentar sesuai dengan topik kita ya...
editbloginfo © EDITBLOGTEMA. Developed by Jago Desain