How you add a button to your sidebar depends in large part on the type of site you have.  For example if you have a WordPress blog then it’s going to be a different process than if you have a HTML site.

Here it is in a nutshell –

First you’ll want to click on the button image and save it on your desktop.  If you’re using Blogger then you’ll have to upload the image into an image host like Photobucket or Flickr.

WordPress Blog
1. From the admin panel choose “write new post.”
2. Upload the picture/button image you’re using
3. Go to “Manage” and then “Uploads” and click on the picture you want.
4. Copy the URL by highlighting the URL and hitting the control button on your keyboard and the letter C.
5. In the same ‘manage’ screen now go to ‘Presentation,’ and then ‘Sidebar Widgets.’
6. Add a text widget and enter your code.  It will look something like this.
7. <a href=”www.insertbuttonlinkURLhere.com”>
<img src=”past your URL here”></a>
8.   Close the text widget and save it.  You’re good to go.

Typepad Blog
1. Login and access your files through your control panel.
2. Choose to upload a new file, find your saved image, and copy the URL.
3. Click the “Typelists” tab.  Note if you do not already have a typelist follow the instructions on Typepad to create one.
4. Click “Add a new item” to your typlist and past the URL you copied in step two.  It should look something like this.
5. <img src=”http://example.typepad.com/image.jpg”>
6. Enter the URL to the website you’d like the image linked to in the “link URL” box
7. Save and you’re good to go.
Blogger Blog
1. Login and click on “Layout”
2. Choose “Template” tab, then “Page Elements”
3. Click on “Add a Page Element”
4. Choose the “HTML/JavaScript” option and click the “Add to Blog” option.
5. Type the link code (found where your image is being hosted) into the “Content” field. Your code will look like this:
<a href=”http://websiteyourimageislinkingto.com”><img src=”http://www.yourimage.jpg”></a>
6. Save and your button should be in the sidebar and linkable to the relevant website.

HTML website code
1. If you’re adding a sidebar button to the HTML code on your website the code will look something like this:
2. <div align=”center”>
<a href=”http://yoursiteURL.com” target=”_blank”><img src=”http://yoursitename/images/banner125×125.jpg” alt=”Imagelocation?”></a>
</div>

Adding a button to your sidebar is typically a pretty straightforward process.  If you have any questions or difficulties, check with your website hosting documentation or blog developer documentation for clarification and FAQs.

File For Sharing – or – for Cindy’s Writers Nook

Download mp4 file format of Wordpress Widgets Tutorial