Mod My Blog Monday: Keeping a Tidy Link List

Welcome to the very first instalment of Mod My Blog Monday!

The idea with MMBM is that I answer YOUR blog and website related questions! So please let me know what you'd like me to talk about here! You can leave a comment, email me or leave a question on our Facebook page. <3

Today I thought I'd share with you a little few tips and tricks for keeping your lists of links and buttons tidy.

Before You Start

Back up, back up, back up!

I can't stress this enough! ;)

Click the "Design" tab (highlighted in blue), then "Edit HTML" (highlighted in green) then click "Download Full Template" (also in green) and save the file to your hard drive.

If you need to revert to this back up, click "Choose File", find the file you saved, then click "Upload" (all highlighted in purple above).

OK, now let's get on to the fun bits..!

Adding a Gadget

If you don't already have a Gadget in your side bar to keep your party links organised in, it's a good idea to add one! When you've logged into Blogger, click the "Design" view tab (circled in blue).

Next, click "Add a Gadget" (circled in green). You want to choose a "HTML/Javascript" type gadget. You can drag and drop it to a different location in your design if you want to.

The purple shows where my gadget is :) Click the circled "Edit" link to open up the editing window.

What I Do...

The very first thing I do is put a <center> tag at the start of my list and close it at the very end (</center> is the closing tag). Then I paste all my button codes between these two tags. The "center" tags are highlighted in pink in the screen shot below:

Notice that HTML tags are always in U.S. English - this can
take some getting used to for U.K. English spellers like me! :)

In the image above...

PINK shows the center tags.

YELLOW is the image tag.

GREEN is the link tag.

PURPLE is the target attribute of the link.

BLUE are the width and height attributes of the image.

When I paste in someone's button or link party code, this is what I do to it:

• Remove any <center> and </center> tags in their code (we already have our own!)

• Remove any <BR>, <br>, <BR/> and <br/> tags - these are line breaks, I usually don't want them here, and if I do, I add them myself. Using line breaks, something like hi <BR> there will display on separate lines, like this:

hi

there

• In the image tag, I look for the height and width attributes (highlighted in blue in the screenie above). If they are there, I change them both to 100 pixels. If the tag doesn't have width and height attributes, I add them myself. The finished tag looks something like this:

<img src="their_image_path.jpg" border="0" width="100" height="100"/>

This way all the images are the same size. You can use whatever size suits your layout of course :) And if you're happy with the image's original size, you don't have to do this step. I like my images to be uniform size.

• If it's not already there, add a target="_blank" attribute inside the link tag (highlighted in purple in the screenie above). This way, when your visitors click that link, it opens it in a new tab/window, instead of them moving away from your blog. So the complete button code for me looks something like this:

<a href="their_website_url" target="_blank"><img src="their_image_path.jpg" border="0" width="100" height="100"/></a>

OK, that was probably a lot of info! Please do ask if you need anything clarified or if you have other questions.

Have fun modding your blogs!