Sparrow Mint Blog Tutorial : How to get your button & HTML code box12:22
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..
- And you should end up on a page like this..
- For now, were going to leave this page, but KEEP IT OPEN, as you'll need it in a bit.
- 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.
- 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.
- Now just copy the WHOLE of the FIRST CODE and paste it into where it says TEXT HERE (in the text area code)
- 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.