3. Clickable Images & Sidebar Buttons

A great way to add some a bit of flair and personality to your blog is to incorporate clickable images and sidebar buttons to your design. Making an image clickable can be easily achieved with a bit of basic coding.

Creating sidebar images:

There are loads of programs available to create simple sidebar buttons! I recommend either Picmonkey or Picasa to do the job. Both come with really great tools that make it easy to create dynamic images and both are FREE! You can use their library of fonts to create a simple button or use images you've taken and edited to create buttons.

Once you have your images ready you can begin coding them into your layout.

Step 1: Setting up the widget for your buttons.

To create the widget for your clickable buttons select Layout from the Blogger Dashboard then select Add a Gadget.

Step 2: Adding the image URL code

Select the HTML/Javascript option > Then add the following code to your widget and change the RED portion to your image URL:

<img src=”http://yourimage.jpg”>

Note: You can get the URL for your image easily after you have uploaded it somewhere. I usually use Flickr to upload my images but I'd also recommend Photobucket for hosting images. To get the image URL simply right-click the image and select "Copy Image URL". Alternatively, if you're using Flickr or Photobucket, there will be a share option which will automatically copy the image code to your clipboard. You can then paste the URL directly into widget.



Step 3: Linking the image as a clickable button

Highlight the code and select the link option in the widget. Type in the appropriate link URL (this is where you want the button to link to) and select 'OK' then save your widget.


Step 4:
That's it! Repeat for as many buttons as you would like!

Example
Button:


Code:
<a href="http://www.bloggersconnecting.com/"><img src="http://farm9.staticflickr.com/8531/8596959676_fc797b4286_o.jpg"></a>