March 15, 2011

How to add buttons to your blogspot blog, without spaces



I was searching for a good tutorial on how to do this and I found that a lot of them weren't very detailed and left out things and just didn't totally make sense. I pieced together a few, and got a couple answers from my sister so I thought I would post what I did here. It seems that everyone has a different way, a different code, but I hope you find this helpful either way.

The buttons I am talking about can be anything from badges from other blogs, to buttons of different series you do on your blog (like mine you'll see to the right).

1) Upload your photos to some place like Flickr or Photo Bucket

2) Open up a new widget in blogger called HTML/JavaScript

3) Put in the code below:

<a href="THE URL OF YOUR BLOG" imageanchor="1" >
<img border="0" src="THE URL OF YOUR IMAGE"Â alt="Link to YOUR BLOG TITLE"/>
</a>

Note: You will need this code each time, for each button. Example: If you are five buttons to do you will have to paste this code in five times.

4) Insert the blog link in the two locations listed:

<a href="THE URL OF YOUR BLOG" imageanchor="1" >
<img border="0" src="THE URL OF YOUR IMAGE"Â alt="Link to YOUR BLOG TITLE"/>
</a>


5)
Insert the URL for your image in the spot listed:

<a href="THE URL OF YOUR BLOG" imageanchor="1" >
<img border="0" src="THE URL OF YOUR IMAGE"Â alt="Link to YOUR BLOG TITLE"/>
</a>

Note: In Photo Bucket that URL will be labeled as the Direct Link

6) I suggest at this point to save the widget and take a look at how it looks on your blog and to see if it is in fact linking to where you want it to go (there's nothing like doing 10 of them and then realizing you did it wrong!)

7) Go back into your widget and repeat this as many times you need to get all your buttons loaded.

Note: If you don't want any spaces between your buttons simply don't leave any spaces between the code. When you do buttons as a picture widget you will automatically have spaces because that's coded into your template. It gets a little more complicated to get rid of those spaces so this is the easier way to go about a group of buttons

8) Save the widget and in your design page of your blog drag it to where ever you want it to be in your layout


Pretty easy right? I hope this helps! Happy blogging!

If you want some more help on your blog here's a great site!

No comments:

Post a Comment

Thanks for the feedback! I read each comment and really appreciate them all! Have a creative day!