HTMLing 'ell - how I made my blog button

Hello new followers :) I still can't believe that there are 100 of you! My topics aren't always this boring so please bear with me!

isn't she a beaut!

I made a new button for my blog yesterday and a few of you have asked me how I did it, well let me tell you, it certainly wasn't easy!! HTML is like a foreign language to me, it means nothing, so when it comes to things like this I rely heavily on Google.


I originally  decided on the image I wanted. I re-sized it and added the text in paint. That is the easy part! I then saved my image in photobucket. I then used this tutorial to make the image a working button. After creating the button I followed this tutorial to find out how make the scroll bar appear below it in my blog. I have attempted to create my own step-by-step guide for you all, so, here goes:


Create the HTML code that other's will use to show your image in their blog, use the following coding, replacing the bold :

<  a
href="http://www.grumpstump.com/"
target="_blank" title="Mouseover Words"   >
<   img src="http://www.grumpstump.com/the-grumpstump.gif"
alt="Alternative Name"
 / >  <  /  a  >

Please note that the above coding has been separated as blogger had a strop about the HTML codes when trying to save this post! You will need to remove the spaces and shift the opening and closing coding up a line so that they are on the same line as the opening and closing text.

http://www.grumpstump.com - replace this with your blogs link, i.e. where you want people to go when they click the button
Mouseover Word - replace this with the text you want to be displayed when people hoover over the image, I put 'A Slice of My Life'
http://www.grumpstump.com/the-grumpstump.gif - replace this with the location of your image, I used photobucket so got this by copying the direct link
Alternative Name - not really sure what this is for? I left it as it was, it can probably be removed but as mentioned above HTML scares me!

You should now have a fully functioning button for your blog! I tested this by adding a HTML/Java Script gadget into my blog's sidebar, pasting the HTML code and saving it. I then viewed my blog and clicked on the picture, this took me back to my blog - yay it worked!!

I then wanted to add a scrollbar below the image in my sidebar, I wanted this to display the HTML code for my button so that other's could grab it and feature if on their blog if they so wish. This was the more confusing part! This is the HTML code I used for that :

<
div style="width:200px;height:100px;overflow:auto;
border-width:2px;border-color:000000;border-style:solid;">
Your content goes right here.
< / div >

Again, please note that the above coding has been separated as blogger had a strop about the HTML codes when trying to save this post! You will need to remove the spaces and shift the opening and closing coding up a line so that they are on the same line as the opening and closing text.

This is the result of that coding :

Your content goes right here.

200 px and 100 px determine the height and width of the box, I changed the 200 to 140 and left 100 as it was.
Your content goes right here - remove this and insert the HTML code that we created above - but, before doing this you will need to make some slight changes to the HTML that you created earlier. You need to replace all < with &lt and all > with &gt - I did this BEFORE adding this code into the code for the scroll bar. DO NOT change the <> in the code for the actual scroll bar, only in the code for the button.

I hope that I have explained this okay for you! Any problems let me know and I will try my best to help you, I'm not promising anything though! In the meantime feel free to use my shiny new button :)