This is what I'm talking about.
I'm going to be using my button, and the button of my blogging BFF, Lesley from Seconds From Crazy. And if you have more buttons to add, just rinse and repeat. I'm first going to break down our buttons.
My button code is
<center><a href="http://lifecraftsandwhatever.blogspot.com/"><img border="0" src="http://img.photobucket.com/albums/v298/Jenfur427/125x125.png" /></a></center>
And her code is
<center><a href="http://secondsfromcrazy.blogspot.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPg4bUUOK_2TTDjrAeExFxSNOEUKG72KYB6SSBgCcJsA14SjoCybbR-kMIstiVEl2xk01p20t9doEpGG7aCBGT34YDDDyvPjq9OIKj02EEoK58Slau5Kv2PBvy_S3LLexP4qn3mh3rzwrL/s1600/button21.jpg"/></a></center>
So if I just copy and paste the codes in my post in the html tab, they show up like this.
They show up in the center of the page because of the opening and closing center tags. A lot of blogs (like both of ours) come with center tags as part of the code.
And her button is larger than mine. Show off. :)
If you've link to a BUNCH of parties, can you imagine how long and cluttered your post is going to be? And not all buttons have the center tag, which means some buttons are centered, some are on the left, some big, some small.
Button vomit, EVERYWHERE.
The first thing I do is take out the opening and closing center tags on both.
Which will leave us with this.
<a href="http://lifecraftsandwhatever.blogspot.com/"><img border="0" src="http://img.photobucket.com/albums/v298/Jenfur427/125x125.png" /></a>
<a href="http://secondsfromcrazy.blogspot.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPg4bUUOK_2TTDjrAeExFxSNOEUKG72KYB6SSBgCcJsA14SjoCybbR-kMIstiVEl2xk01p20t9doEpGG7aCBGT34YDDDyvPjq9OIKj02EEoK58Slau5Kv2PBvy_S3LLexP4qn3mh3rzwrL/s1600/button21.jpg" /></a>
And that makes our buttons look like this.
A bit better, but not quite right, right? You'll notice that her button is still bigger than mine, right? I'm all about things being the same size. Makes it all pretty and stuff.
So I'm going to tell her button what to do. Cause it's my blog and I'm the boss. I want her height and width to be the same as mine, which is 125x125.
Now you might do it a different way (if you're a code changer like me) but this is how I do it. I put in
height="125" width="125"
(Instead of 125, you'll put in the pixel size you want. I use 90 pixels for my blog link party buttons, which is height="90" width="90" . You'll notice that there is a space behind each command. So height="125"SPACEwidth="125"SPACE
That command will tell her button what size to be. Without the height and width info, her button just comes as it comes. And some bloggers have HUGE buttons, and I don't want that.
I put it here, right before src
So now her button now says
<a href="http://secondsfromcrazy.blogspot.com/"><img border="0" height="125" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPg4bUUOK_2TTDjrAeExFxSNOEUKG72KYB6SSBgCcJsA14SjoCybbR-kMIstiVEl2xk01p20t9doEpGG7aCBGT34YDDDyvPjq9OIKj02EEoK58Slau5Kv2PBvy_S3LLexP4qn3mh3rzwrL/s1600/button21.jpg" /></a>
I didn't have to do anything to my button, since it's already sized at 125x125.
So now our code says
<a href="http://lifecraftsandwhatever.blogspot.com/"><img border="0" src="http://img.photobucket.com/albums/v298/Jenfur427/125x125.png" /></a>
<a href="http://secondsfromcrazy.blogspot.com/"><img border="0" height="125" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPg4bUUOK_2TTDjrAeExFxSNOEUKG72KYB6SSBgCcJsA14SjoCybbR-kMIstiVEl2xk01p20t9doEpGG7aCBGT34YDDDyvPjq9OIKj02EEoK58Slau5Kv2PBvy_S3LLexP4qn3mh3rzwrL/s1600/button21.jpg" /></a>
And our buttons are happy and equals and look like this.
So since I want to put them in the same line, I just delete the spacing in between the two codes. I save the "space deleting" for the end, in case I have a mistake, it's a lot easier to find it.
So after I delete my space, my code looks like
<a href="http://lifecraftsandwhatever.blogspot.com/"><img border="0" src="http://img.photobucket.com/albums/v298/Jenfur427/125x125.png" /></a><a href="http://secondsfromcrazy.blogspot.com/"><img border="0" height="125" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPg4bUUOK_2TTDjrAeExFxSNOEUKG72KYB6SSBgCcJsA14SjoCybbR-kMIstiVEl2xk01p20t9doEpGG7aCBGT34YDDDyvPjq9OIKj02EEoK58Slau5Kv2PBvy_S3LLexP4qn3mh3rzwrL/s1600/button21.jpg" /></a>
And that makes our buttons be besties and look like
If you have more buttons, just repeat. Over and over.
If you have more buttons and it's wider than your page, it will automatically go to the next line.
If there is a rectangular button, I put the height to be the same as everything else, and I just kind of guess on the width. If their button is 150 pixels tall by 200 wide, if I take the height down to 100, I'll subtract the same from the width, so 150.
It's worth it to hit preview frequently until you get the hang of it.
If they already have height and width set on their button, just change the number inside the quotation marks.
Easy peasy?
13 people love me:
Oh Emm Jee! I have wondered how to do this for centuries. Literally.
Thanks so much for reminding me of why I keep you around. Cuz ur smart and shit.
Thank you SO much! I've wanted to figure this out since I started blogging. You're a genius!
Ok..back to tell you that this all totally worked! It looks so much cleaner and better and more professional like. So professional that my blog is now going to buy a fancy dress suit and a briefcase. And it'll start eating cobb salad.
Following you back from the blog hop
My-2-Cents
OMG - thank you so much for this. I love this info. I hate how huge some peoples buttons are and now I too can be the boss of my blog!
I am following you back from the bloghop. Thx for following My-2-Cents
I always wondered how to do it without Live Writer but if you want a none code way to clean up those buttons...try out Live Writer. You can reopen posts and you can also shrink buttons (and pictures) on there. If anyone wants to see what it looks like I have some posts in my blog where I have done that.
Awesome! A huge thank you for taking the time to share with rest of us :D
I shared the link to this post on my blog :)
Thank you - truly thank you! I have been working on this and came close to getting what I want but never could totally make it happen.
Can't wait to try!
Bless you!
Mimi
Thanks for the help! And, thanks for doing it in an entertaining way! My party page looks so much better now!
Thanks so much for sharing this tip. I've wanted to know how to do this for a long time, but did not know how. I'll have to give that a try!
...very, very VERY much needed!
my linky parties page is so messy gives me hallucinations :)
Post a Comment