Ever since I mentioned that I'm into Blog designing and such, I've been getting a few of questions about how to work HTML and such and so I thought I could do some helpful HTML posts for those who may be a bit interested in learning a bit more about using HTML.. But if you'd rather just ask me to do it, that's fine!

This post is going to be about how to get YOUR button on your page & how to get the little HTML code box underneath it, so other bloggers can grab it.

So it'll look something like this..

• First off you need a button... It's okay.. I'll wait.
• Once you have your button and it's the perfect size you'll need to upload it to a Photo sharing site, I always use Photobucket (and that's what i'm going to use for this tutorial) But if you want to use something else, that's up to you!

• If your using Photobucket, and your all registered and signed in hit the Upload button, and upload your button. 

• Once the pictures uploaded click on the image..

• For now, were going to leave this page, but KEEP IT OPEN, as you'll need it in a bit.
• Now go back to Blogger, go on the Layout option. Once your on the Layout page select Add a Gadget. Then a new window will pop up, and you need to find the HTML/JavaScript (it's on the first page).

• Now we're going to do some HTML, which can be a bit confusing, but hopefully i'll explain it well enough.. Now those of you who don't have a clue about HTML, I honestly recommend  Funky Chicken HTML Help ... It's a bit dated, but still so useful, I still use it now!
• 1. Select Graphics on the Sidebar...  2. And copy the third code down.

1.                   2.                

• Now you paste this code into your HTML box..

• With the code, you have to change what it say's with in the "URL OF LINK.htm" .. So for example I would change it to say "http://Sparrow-mint.blogspot.co.uk" and you would change your's to your blog URL. YOU HAVE TO KEEP THE QUOTATION MARKS.

• Now were going to go back to that Photobucket page we left open. In the Image Links box, copy the link from the Direct Link.

• Now you paste this into the code where it says "URL OF GRAPHIC" changing it the the Direct Link instead.. So for example mine will look like "http://i1274.photobucket.com/albums/y433/Sparrow-Mint/1_zpsd832551c.jpg"

• Now give your blog a little preview just to make sure it worked.....
• Thats your button done! (If it worked..) Now were going to do the text area, which doesn't take as long.

• Go back to the Funky Chicken HTML help page, and on the Sidebar select Textareas.
• Get the code from the first Text Area Box and Paste that into the same HTML gadget for your Button, but underneath the first code.

1.

2.

• Now just copy the WHOLE of the FIRST CODE and paste it into where it says TEXT HERE (in the text area code)

• Annnnnd, that should be it! Give it a preview and see if it's right.

• If you want it to be centered, all you have to do is put <center> at the start of the code, and </center> at the end.. Like this.

So that should be it. Sorry it's such a lengthy post, I think it's mainly because of the pictures! If you made it this far then thank you for reading.. I hope it all makes sense.

If you got this far and it somehow messed up e-mail me at Sparrowmintt@gmail.com or Tweet me, and i'll try and help you out!

If you found this helpful, and have any ideas for another post I could do, please let me know, i'm just such a giver! Hahaha