Who likes free things? 
http://images4.wikia.nocookie.net/__cb20110105040517/uncyclopedia/images/3/36/Hands-up.jpg
Image courtesy Uncylcopedia Commons
Yeah, me too.
Which is why you still see me on Blogger, and not leaping over to the tempting pretty that is WordPress -- just yet.

Who is really tech savvy?

http://i51.tinypic.com/sq0boj.gif
Google Search
  Yeah, me neither, Jakey-Poo.   It makes my eyes twitch too.

However, contrary to the old proverb regarding old dogs, I do seem to be seem to be able to learn new tricks.   Thus, I have to learn how to tailor Blogger's limited templates, into a creation I can finally say oh good lawd what the...it's good enough I am proud of.

Previously, I posted a Tutorial on how to make an  Author's Info Box. (click to view)

Today I will show how to a Welcome Box with Profile Image, as you see in the Top Right section of my blog.

Here is the code:

<! -- Simple HTML box by Blogger Explorer -->

 **Always keep a clean copy of the code, and a working copy Just in Case.**

Step 1 - Delete my welcome text and add your own message (be careful to keep any coding inside brackets, etc.  Just delete the text.)   There are spaces/breaks written into the code, but you can also delete them if you wish.

Step 2 - Add your own image where indicated.   Make sure it is the same size as indicated in the code (126px by 102px), or else you must edit the code to your image size if you wish larger/smaller.    If you choose to make the image larger, keep in mind the overall size of the container (255px), AND the available width size of your sidebar.  

You will have to host your image somewhere like Photobucket.   Also note, I have the image designed to "float right", if you wish it to be different, simply edit accordingly to "left", or even "top" if you like.

Step 3 -  You can alter the colour codes of the widget as you wish too.  Currently I have the background set as "none", which means it will blend into your blog background.   If there is a specific colour you wish, you will have to edit.   Also, I have a colour border around my image (#E9CFEC), that you may edit as you wish.   A simple Google search for HTML Colour Codes/RGB Colour Codes, will give you all the colour options you could possible desire. 

Step 4 -  You can also increase the font from the 14px I have set.

SAVE.
When you have the look you like, you will enter the code into a widget/gadget into your blog.

Again -- No Messing with your scary template code!!

Go to Layout of your blog and choose "Add a Gadget":




Then choose "HTML/Javascript" and enter the completed code in the text box:


(You will notice that there is a "rich text" option at the top right.   Clicking this will allow you to see the welcome box as it will appear -- instead of all that coding.   This can make it easy for when you want to go back and edit your text.  You can just write your new text within the box.   Any other changes such as colour or image; you will have to switch back to the html coding.)

Once you have added the Welcome Box Gadget, you can go back to your Layout page, and position the gadget where you would like it to appear on your blog (click and drag the box.)

I have mine at the very top of my sidebar, so that it is the first thing on my sidebar.
As I don't have a Header image, my welcome box appears beside my Blog Name Title because there is room.   If you have a large Header image, yours might be positioned lower in your sidebar. 

That is all!
Not too scary, right?

If you have any questions, feel free to leave a question in the comment section and I will be happy to help.

About The Author
Leslie Botchar, aka "RoryBore", is a SAHM enjoying life one day - and one cup of coffee - at at time.
She has had several articles published in The Huffington Post, and hopes to one day marry her skills as Word Wrangler and Photo Ninja. Leslie spills it all on her blog Time Out For Mom, and invites you to join her for some Mom "Me" Time.
Connect with her: Twitter, Facebook, or Instagram.