Link Party Buttons Tutorial

A great many bloggers who participate in link parties often have the various size party button banners at the end of their posts. (See my example on my Funky Fabric Wreath post). As I started down this journey of link parties, I saw something had to be done. After all, it looks way too cluttered with all those various size button banners; plus, I wondered if people would even take time to scroll down that hodge podge maze of buttons to even comment. And, since I love comments (as do all bloggers), I wanted to make it easy for my readers to comment. Hmmm...better make those buttons a more uniform size, thought I. (See example in my Braided Yarn Wreath Tutorial).

You will have to get your eyeballs down and dirty with html, my dear friends, because that's what it takes to make these nifty buttons uniform and thus, attractive on your blog entries.

Oh, and before I forget, I also read a post somewhere that if you want readers to take your blog seriously, it's going to have to look attractive and not cluttered. So if you prefer to put your buttons on your side bar, it's a good idea to make them uniform in size as well.

Anyhoo...first things first...

Resizing those buttons.

I use the "Paint" program that came with my new laptop. (I have another program that I used when building websites, but that's on my dinosaur computer that I prefer to let sleep nowadays). If you haven't learned "Paint," it's pretty easy. Simply open a photo in "Paint" and choose the "Resize" option. Choose the pixels option and make it whatever size you want. For my blog posts, I made them 75 x 75 pixels. Some banners are oddly shaped, so they may not be exactly 75 x 75 when you resize. I always made sure to keep the horizontal at 75 since I wanted a certain amount to fit in a row. (On my sidebar, I have them 100 x 100).

Once you have it resized, make sure you save it!

Now comes the tricky part...the html coding.

Since the buttons for the link parties you're participating in are hosted elsewhere and are in different sizes, you're now going to have to host those buttons somewhere since you've resized them according to your needs. I use my blog to do the hosting, creating a draft post and keeping all of the resized buttons in there.

I'll use my link party as an example. (By the way, it's from Wednesdays through Sundays, and you can link up so many different things, even things you have for sale. Okay, end shameless plug). :)

See the coding below the button?

<div align="center"><a href="http://sunburntcowhandmadeshop.blogspot.com/" title="Sunburnt Cow Handmade Shop" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil6564JdglnwIndgiHnod0CnM0TtnO9wlNw22qyg3pTdhvQpXUOynqmpDX1tJWqoum4i9QaY2zWZ23MTABU4o27DzLXkuYe-7acs4Fzhk0myMEy8wHxpKZj7QLg78WnZs1d9UmTU04U2Dr/s220/sunburntcowlinkpartybtn.jpg" alt="Sunburnt Cow Handmade Shop" style="border:none;" /></a></div>

Save all of that coding into your draft blog post. I'm going to break it down little by little, so you'll know what you can throw out and what you can keep.

The first part, between the first set of bird beak brackets is basically telling the program to center the button. See the div align="center"? Well, you don't want to be centering any of these buttons because then they won't line up in a uniform fashion on your blog post. They'll be centering themselves, and you definitely don't want that. After all, you're doing this to get rid of all the mish mash. So totally delete that first set of bird beak brackets. Once you do, however, you're going to have to delete the closing div tag, which is at the very end of the whole coding in its very own bird beak brackets. Once you open something, you gotta close it, and once you delete the opening, you gotta delete the closing; otherwise, Blogger won't let you even save it this way because it's unacceptable coding.

Now we get to what you want, the "a href" part. After the "a href," you'll see an equals sign and a quotation mark. (I'm purposefully not putting in the actual marks because blogger might start coding this baby up, and all you'll see is the end product).

Inside the quotation marks is the link party's url. You want that! If there's anything else like title, you can leave that in there. You don't want to be deleting too much if you don't know html.

After that first bird beak bracket that is telling your blog software the url to the link party, you'll see a second bracket. This one contains the button and the url where it's located. This is the one you'll be changing.

To recap, you now have the link party button coding in your blog post because you put it in there like you usually do when you link up to link parties. You may have made some changes to the first part where there are directions such as "center."

Now to the second part - the image source (img src) part.

The url in the quotation marks after the img src equation is where the person who is hosting the link party has her button stored. You have to replace that since that button is too big. You want to replace it with your newly resized button. It's at this point where I upload the new button from my computer. (Remember, I saved it after I resized it in Paint)?

I upload it directly after this coding that I'm working on so I can have the two handy and I can easily compare.

When you upload to Blogger, they have a whole bunch of gobbledy gook that you don't need for this purpose (like div class, etc). Ignore the first bird beak bracket, and zero in on the second one. You'll see the familiar "img" and "src," only, unfortunately, it's separated by a bunch of gobbledy gook. What I do is delete out everything that separates "img" and "src," except do put a space between the two. I then replace the original link party button url (remember, where the original button is hosted in its full size) with the new url that Blogger just gave me. It's the one in quotation marks that you just received when you uploaded your newly sized button (and after "img src." It has a bunch of capital letters and numbers in it, with the main address being at blogspot.com).

And that's pretty much it! You're just replacing one url (where the original button is hosted) with a new url (where you're newly sized button is now housed on your blog).

Clear as mud?

I hope it's clearer than that! Please ask questions because sometimes I think I'm explaining something in a coherent fashion, but since I'm too close to the situation, I might be forgetting something.

If you're feeling really bold, you can always delete things that say "Photobucket," but make sure if you're in deleting mode, you keep the original code somewhere in case you deleted something you shouldn't.

To me, html coding is all a matter of copying, pasting, and playing "I Spy" or "Where's Waldo?"

As I mentioned above, I save all my buttons on a draft post on my blog and keep them alphabetically listed by link party title. Then when I link up, I simply copy the party I'm participating in, and then paste it onto my blog post.

I have to admit that I'll probably stop doing this in my next round of link ups due to time constraints. I'll be doing text links instead because they're much easier for me to do. One, because a lot of link parties don't have their buttons on the particular party's post, and I have to try to remember what their button looks like if they don't have it readily accessible for all to see. (Or I have to spend time trying to find it). Two, because it's a lot easier and faster for me to simply text link than hunting for the button coding in my draft blog post. Three, text links are much better for SEO purposes, and I would hope that the link party hostesses would appreciate that.

If any of this sounds way too complicated, I'll be glad to resize your buttons for you through a sort of barter exchange. Simply email me (iluvffmn - at - yahoo - dot - com) and maybe we can work something out. :)

Linking up to:

Chic on a Shoestring Decorating
FFA Friday - Sassy Sites