An easy to configure "About Me" Blogger widget with a Circular Portrait Image

At the top you can see how it looks on the sidebar. There are 2 versions of this: Version 1 (left) is straightforward centered text, in version 2 (right) there are two font weights which are separated by a stroke. The width of the image is 300 pixels because the sidebar where I have placed this is quite wide. You will need to change that value to whatever is good for your sidebar width. You can change the fonts, the sizes, the line heights, the font style and so on and you can also play around with the space above and below the stroke by changing the values of the hr style that come before and after <hr />. Copy paste one of the following codes into a text widget (not HTML widget!). Replace the image URL and the texts (I am leaving my texts inside the code so that you can see exactly where everything is supposed to be by looking at the images) with your own and you are good to go.

V.1 code:

<center><div class="about-widget"><img alt="About Me" src="https://i.ibb.co/xsPYTGb/about-me-cat.jpg" width="300" style="border-radius: 50%" /><p><p style="font-family: 'Droid Serif': font-weight: 500; line-height: 1.85em; text-align: center; font-style:italic;font-size:12.5px;"><br />I like to change design details on existent blogger themes. It is the fun hobby of an obsessive graphic designer who likes to see everything just so. If you like them feel free to use them. However, please keep all original attributions on the theme. The work is not mine but belongs to the original creator of the template. So, be nice and always make sure that the credit that is due to them is seen.</p></p style></div></center>

V.2 code:

<center><div class="about-widget">

 <img alt="About Me" src="https://i.ibb.co/xsPYTGb/about-me-cat.jpg" width="300" style="border-radius: 50%" border="2px solid #000000" />

<p><p style="font-family: 'Droid Serif': font-weight: 500; line-height: 1.75em; text-align: center; font-style:italic;font-size:14px;"><br /><b>I like to change design details on existent <br />blogger themes.</b><hr style="height:8px; visibility:hidden;" /><hr /><hr style="height:7px; visibility:hidden;" /><p><p style="font-family: 'Droid Serif': font-weight: 500; line-height: 1.85em; text-align: center; font-style:italic;font-size:12.5px;"> It is the fun hobby of an obsessive graphic designer who likes to see everything just so. If you like them feel free to use them. However, please keep all original attributions on the theme. The work is not mine but belongs to the original creator of the template. So, be nice and always make sure that the credit that is due to them is seen.</p></p></p style></p></div></center>