HOW-TO-GUIDE: CLICKABLE IMAGES IN YOUR HEADER OR SIDEBAR

Hello guys,

I saw a comment by Kunmi, yeva and a few others asking me to hook them up with my new header sometime back and i also promised to share this tutorial here when i gave out a my blog template for free.

Since i bought my blog theme, i have been feeling so stuck and as you might have noticed, i love experimenting with my layouts a lot.

In fact my friend, I.t expert and Hacker extraordinaire advised me to go into web designing.

Today's tutorial is going to be easy and by the end of this post you would have figured out how to add images with links to your blogger.

3 reasons to you need linked images;

it is a great visual tool for promoting or advertising something within the blog, that has its own website.

• social media links are very important to run an interactive blog; i'm 0% when it comes to these but having buttons that link to sites promote  better follower-ship.
• organizing your post into labels and using lovely and attractive image links to offer visual call outs.

this tutorial works well if you want to ;

- Put link-able pictures that work as pages .

- Put up Ads on your blog/website.

- Put up social media links.

- Put up links of features.

- Put up links of your other sites.

- Put up links to your favourite posts or giveaways.

How-to-guide

it doesn't matter if its for the sidebar or header, these rules apply for both.

1. Search for the pictures you want to use, i always check tumblr as you find practically everything on there, but there is also this great site called unsplash.com that shares amazing pictures for free (my arts& words, recipes and inspirations pictures were gotten from them).
2. Once you have the pictures you intend to use, you can decide to add a note or caption on them by editing them, I used corel draw initially but I later just stuck with Microsoft power point.
3. Once you are done editing in power-point, click on Ctrl A to select all, right click and save as picture.
4. After this, you could re-size, but the html code already contains that command so you can skip this step. i re-size with Microsoft office though.
   
5. The next step is to look for a picture hosting site, you can stick to Photobucket which is what i use.
   
6. Upload your pictures on Photobucket once you are done, click on each picture, check your right hand side and look for the share links section and get the HTML or DIRECT Link, you can either wait till step 11 to do this or keep them on a note.
   
7. After you get the link, (1) go to your blogger dashboard, (2) click on layout, (3) go to add gadget, (4) on the gadget page add the HTML/JAVASCRIPT gadget.
8. Its time to configure the html/ javascript. simply use the code below to add an image on your side bar that directs to a link.
9. Or use the code below to add an image on your side bar / header that directs to an email.
   
   
10. if you want to put some images on your header like mine, the same code applies, to stack four images side by side, you repeat the code before the </p> which stands as the close command. note that the <p align="center"> command is the start command, it serves as the beginning command that also determines where each pictures are places, use left, right or center depending on how you want the images to align.
    
    
    
11. once this is done, its time to edit the code, follow the description above to edit the html and other information, preview and voila.
12. it really is easy don't mind all this my codes, i actually am a self taught editor so you also can learn.

 (for a single image command)

 <p align="center">

<a href="http://www.deemako.com/search/label/BEAUTY" target="blank" imageanchor="1" style="margin-left: 0.2em; margin-right: 0.2em;"><img border="0" src="http://i1254.photobucket.com/albums/hh617/MAKODESOLA/Picture5_zps78986df1.jpg" width="200" alt="HAIR x BEAUTY" title="CHECK HAIR x BEAUTY ROUTINE"  /></a> </p>

(for a single image command that directs to your email)

<p align="center">

<a href="mailto: makodesola@yahoo.com" target="blank" imageanchor="1" style="margin-left: 0.2em; margin-right: 0.2em;"><img border="0" src="http://i1254.photobucket.com/albums/hh617/MAKODESOLA/2_zps1b845305.png" width="25" alt="E-mail" title="Send me an E-mail"  /></a> </p>

(for group images command)

<p align="center">
<a href="http://www.deemako.com/search/label/BEAUTY" target="blank" imageanchor="1" style="margin-left: 0.2em; margin-right: 0.2em;"><img border="0" src="http://i1254.photobucket.com/albums/hh617/MAKODESOLA/Picture5_zps78986df1.jpg" width="200" alt="HAIR x BEAUTY" title="CHECK HAIR x BEAUTY ROUTINE"  /></a>
<a href="http://www.deemako.com/search/label/OUTFITS" target="blank" imageanchor="1" style="margin-left: 0.2em; margin-right: 0.2em;"><img border="0" src="http://i1254.photobucket.com/albums/hh617/MAKODESOLA/Picture6_zps85078a53.jpg" width="200" alt="OUTFITS" title="PERSONAL STYLE"  /></a> <a href="http://www.deemako.com/search/label/RECIPES" target="blank" imageanchor="1" style="margin-left: 0.2em; margin-right: 0.2em;"><img border="0" src="http://i1254.photobucket.com/albums/hh617/MAKODESOLA/Picture7_zpse844956a.jpg" width="200" alt="RECIPES" title="RECIPES"  /></a>
<a href="http://www.deemako.com/search/label/reviews" target="blank" imageanchor="1" style="margin-left: 0.2em; margin-right: 0.2em;"><img border="0" src="http://i1254.photobucket.com/albums/hh617/MAKODESOLA/Picture8_zps1ecac6d3.jpg" width="200" alt="REVIEWS" title="REVIEWS"  /></a> </p>

leave your questions and comments below, i will reply them all, i hope this guide is explanatory.

i hope to see all your clickable images soon.
kindly share links of what you were able to do with this

xo