Monday, March 21, 2011

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:

  • 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!


Thendral said...

Thank you! Its very usefull to me.

reasonstoskipthehousework said...

This is great - thanks so much for posting!

Reasons To Skip The Housework
Tuesday Time Out Link Up Party

Terri @ A Creative Princess said...

Thank you for explaining that. As soon as I muster up some courage, I'm going to try it! I've got to tell you, me messing with codes, scares me to death! Also, how do you get your tab buttons all the same color? I can get one to the color I want, but the rest are grey.

Anonymous said...

Thanks - I was just telling my hubby I need/want to learn the language! This is a great start. :)

Marcy said...

Thanks so much for posting! Great tips!


Jennifer said...

I think I got it! Thank you so much! I'm pretty sure my links on my link party page are I can fix them! Yes all the codes can be a bit overwhelming!!!

Steph said...

Great tutorial Rissa! I like how you color-coded it and explained what each line means.

I was wondering how you add the "post-it" up at the top of your blog i.e. where you put your 100 giveaway reminder (which I will enter right now by the way!).

Steph said...

Oh my goodness, I already entered a few days ago! Duh! Sorry...disregard my entry from today.

Rissa @ Hazel and Honeysuckle said...

Thank you SO much for all the feedback! I'm so glad you find it helpful! If you have immediate questions, feel free to email me (I'll respond to your comments privately where I can :))

Post a Comment

I love getting comments, they make my day! Please let me know what you think or any ideas you have for me, I would love to hear them!

Before you comment - are you a 'no-reply' blogger? If you are, I can't email a reply to your comment! I really would love to be able to! If you want to change this, go to your dashboard, click "Edit Profile", tick "show my email address" and save!

I'd really love to be able to email you back! xx

Related Posts Plugin for WordPress, Blogger...