Thursday, January 6, 2011

HTML DIY: How to get rid of spaces between your sidebar image links

I was always wondering how bloggers got rid of the spaces between photo links on their sidebars. (ex. my sponsors on the right) One day it just popped into my head how I could do it! So, I am not sure if this is how other bloggers do it, but it's how I do it!
 First, I use this code, which is the same code as I use for my blog button:


Second, I open up an HTML box in the design window. Then I paste the above code into the box.
Paste it five times, if you want five photo links.

Third, Put the address you want to link too where you see LINK HERE in the code

Fourth, get your image URL. To do this, add your image to the internet somehow (ex. Flickr). I have a specific page on my blog that is hidden where I upload images that I want the URL for. When you have your image uploaded, right click and click: Copy Image Location. Paste that link where you see IMAGE URL HERE.

Do this for every image you want all squished together.



Let me know if you have any troubles at all! 
It has come to my attention (see comment below) that there is another way to do this! Perhaps you will find this easier.

[a href="link.html"][img src="image.jpg][BR]
[a href="link.html"][img src="image.jpg][BR]
[a href="link.html"][img src="image.jpg]


xo ldc

6 comments:

  1. Thanks for this, I'm going to give it a shot when I have a chance! I'm a new follower of your blog. Love the D.I.Y. features so far, but I have to explore more!

    Sarah

    http://sadiedesigns.blogspot.com

    ReplyDelete
  2. Hmmm...Thanks everything makes sense to me but the 4th one...

    My blog needs some help! I am determined to figure this out...

    :-)

    ReplyDelete
  3. I just use the [br] tag. (replace the [ ] with the correct characters of course)

    [a href="link.html"][img src="image.jpg][BR][a href="link.html"][img src="image.jpg][BR][a href="link.html"][img src="image.jpg]

    Notice that the three codes are connected to each other. I think you can also do it this way in your coding as long as the br tag is up against the end of each image code.

    [a href="link.html"][img src="image.jpg][BR]
    [a href="link.html"][img src="image.jpg][BR]
    [a href="link.html"][img src="image.jpg]

    That will butt them up against each other in a vertical line. I like a space between buttons though. Because sometimes it looks like all one button when there is no space to distinguish each one.

    ReplyDelete
  4. You will also notice that you have an extra set of center tags at the bottom of the code. Remove that and then, as your anonymous contributor here points out, it is enough to use the br tag (which stands for "line break"). You could also take that closing center tag right to the bottom of your full line of images instead of repeating it each time. Hope that is all clear, but you can contact me if you need more explanations of course...
    :)

    ReplyDelete
  5. where are you supposed to be pasting this code into your coding? you just put it at the top? sorry, i don't quit get that part.

    ReplyDelete
  6. ok, so i read through your post a couple of times and for the first 2 points it seems like your taking about the coding, and then it seems like you are talking about where you add a gadget...sorry...not getting it :(

    ReplyDelete

Total Pageviews