HOW TO ADD A BUTTON IN YOUR SLIDEBAR

You need two things:

*the button image (button size is 120x120)
*the url (web address) that you want to go to when someone clicks on the button; i.e. http://www.thecraftycrow.net/
~ Let's begin! ~
  • drag or copy the image to your desktop
  • upload the image to the files section of your blog (click Control Panel tab then Files tab)
  • where it says Upload A New File click Browse and find the image on your computer - then click Upload
  • after it is uploaded, find the file name (in the column to the left on the same page) and click the link icon (looks like a little chain link)
This is the url for your image - keep this window open!
  • now open the Typelists tab in a new window
  • click on Create A New Typelist
  • in #1 choose a Link list
  • in #2 choose a name for your list
  • then click Create New List
  • in the Title field put the url of your image (copy and paste it from the window you left open)
Now this is the trickiest part - you'll have to change the html a bit.
  • remove the part show in red:
<a href="http://belladia.typepad.com/Button2.gif">Download Button2.gif (8.4K)</a>
  • and change it to this (new part in blue):
<img src=
"http://belladia.typepad.com/Button2.gif">
Make sure the quotes are in there because they make all the difference!
Tricky part done!
  • now in the URL field put the web address that you want to go to when the image is clicked, for example:
http://www.thecraftycrow.net/
  • now click Save
This new Typelist has to be added
to your blog.
  • go to your blog's Design tab and click Select Content
  • click on the box next to your new Typelist and click Save Changes at the bottom
Click on Order Content if you'd like to change where the button is located on your sidebar.
Be sure to click on the button from your blog to make sure it works and you're done!
I have to assume there are other ways of doing this but this is how I do it and it works :)  If any of you more experienced computer people out there have any tips please leave them in the comments!  Thanks, I hope this helps someone :)
~~~
For Blogger (instructions graciously created and contributed by Jo at A Bit Of This And A Bit Of That):
Upload the image (available above) to an image saving site, I tried Flickr but it didn't work but Picasa does.
In Picasa there is a box to the left that says 'HTML to embed in website' copy the text in the box.

Log into Blogger
Go to Layout
Click on "add a page element"
Click on "HTML/JavaScript"

paste the text into the main box (not the title box)

Should look like this:

<a href="http://picasaweb.google.com/jojoebi/UntitledAlbum/photo#5197566517334600338"><img src="http://lh4.ggpht.com/jojoebi/SCF3NaoxapI/AAAAAAAAA58/uhCnrSvw5OQ/s144/unknown.gif" /></a>


Basically this is what the mumbo jumbo means:

<a href="CHANGE THIS TO THE PAGE YOU WANT TO LINK TO"><img src="THIS IS THE IMAGE URL" /></a>


The final code should look something like this (different image link but the rest should be the same):


<a href="http://belladia.typepad.com/crafty_crow/"><img src="http://lh4.ggpht.com/jojoebi/SCF3NaoxapI/AAAAAAAAA58/uhCnrSvw5OQ/s144/unknown.gif"/></a>

Click on 'save changes' then check to see if it works, you might need to refresh the page.

For Wordpress without a host site (instructions generously made available by Anna of Three Sneaky Bugs):
1. Upload image to Flickr - I kept the image set at private since it is not technically my image to share.
2. In a text widget enter the following html:
<a href="http://belladia.typepad.com/crafty_crow/" title="The Crafty Crow"><img src="http://farm4.static.flickr.com/3200/2407534925_02acb778d0_m.jpg" alt="The Crafty Crow"></a>

Note the 1st set of quotes is the link to the site, the 2nd set points to the image. Visually - <a href="URL of website"><img src="URL of image" alt="The Crafty Crow"></a>

Comments

Post a Comment