Blogger: "About Me" Widget with Signature
In the screenshot above you can see how this looks on the sidebar. It is a small variation on the ones that I made the other day, but this time I decided to use a rectangular image and also to add a signature to the widget since that seems to be an appropriate thing to put on an "About Me" Widget.
So, here is the code for it:
<img src="YOUR IMAGE URL" style="border-top:5px solid #111;border-bottom:5px solid #111;"/>
<div class="author-text">YOUR TEXT"</div>
<hr style="color:#999; visibility:hidden;margin-top:-3px;" /><hr />
<div class="author-sign"><img src="YOUR IMAGE URL" style="margin-top:-32px"/></div>
This consists of two images with a description text in-between separated from the signature image below by a stroke. The top portrait image, which has a decorative stroke border on the top and the bottom, can be a JPG file. However, when it comes to the signature image this one has to be a transparent background PNG file since it has to slightly overlap the stroke in order to look good. (Note: I personally like to keep my PNG files on ımgbb.com for several reasons: I have been using imgbb for over 10 years now and I have never experienced the smallest problem in terms of servers being down and so on. But another reason is that they create very clean, short direct image URLs, which is more than what can be said about blogger image URLs, unfortunately.)
The description text in the middle has no formatting, as you can see, it will inherit all of that from the body text in your template.
In my version I am using a signature created out of a font. But, you can also use your own signature quite easily by writing it on a white piece of paper, taking a photo of it with your phone and then once you have transferred this to your computer you can clean it up and edit it in Pixlr, the software that I was raving about for making collages just in the previous post. There is quite a good video tutorial as to how you can do all this here: https://www.youtube.com/watch?v=Km0jrtWiJfo
Let us now come to making a signature out of a font: My first advice will be do not go looking on google fonts to find really good signature fonts. That is not the place for them, instead there are 2 excellent font portals to do a search for signature fonts - Dafont Free and PixelSurplus. I have set the links that I have just put here in such a way that they will open to the search results for "script fonts". Obviously, not every script font is a signature font, but you will find plenty of them that do look a lot like handwritten signatures and some very elegant ones at that. The one that I used on the Widget here is called "Bitter Mind" but some others I would also have used are "Antro Vectra", "Brastagi" and "Oishigo", to name just three out of many.
Once you have downloaded your font go to Pixlr, click on the "create new image" button, then go to the web tab and pick any one of the sizes (the widget will automatically adjust the image width, so it is not really important what size you have, I would suggest a smaller size since you will not need a large size for a signature). The new image will open on a transparent background, click on the "T" on the left menu, write your signature name, upload your font, adjust size, color, letter-spacing and so on, and once you are happy with what you have, crop the file as closely as possible to the edges of the signature. Save as transparent PNG, and you're done.
Now insert the two images - your portrait and your signature - into the image URLs in the code above. Then copy the whole lot into a Text Widget (not HTML!) and publish.
