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!


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


  1. I know some people have tabs up the top for pages and then a sidebar link to different things, can you please explain the difference between these?

    1. Hi Lauren,

      The difference is purely an aesthetic one as they both accomplish the same purpose. Often, people will use a combination of both reserving the top tabs for the main navigation and the sidebar to link to various categories.


  2. What code should I use to create a "RSS Subsribe" button?

  3. Oh, and also a "Subscribe by email" button please.


We are happy to answer any questions about the workshop material. Fire away, lovelies!