I used to have about 10 bazillion McLinky party buttons in my sidebar to show I participated in each week. In order to let people know you are participating in the parties its to show a link somewhere on your blog. And since I have so many, I’ve shrunk them down so my blog isn’t a mile long.
Note: I have since moved my party buttons to a separate page all to themselves.
I’ve been asked how I shrunk the buttons a couple of times so I’ve decided to share the super secret HTML code with you.
Let’s use my button code as an example:
< a href=”http://mmscrapshoppe.blogspot.com” target=”_blank” >< img src=”http://www.mmscrapshoppe.com/blog/MMScrapShoppeBlog.jpg” / >< /a >
(Note that I have extra spaces after every “<” and before every “>”. I only did that to get the code to show in this post. You do not want these spaces when you use the code in real life!)
Altered code:
< a href=”http://mmscrapshoppe.blogspot.com” target=”_blank” >< img src=”http://www.mmscrapshoppe.com/blog/MMScrapShoppeBlog.jpg” width=”40%”/ >< /a >
Super tricky, eh? Just add the width command after the image link. You may have to play around with the actual percentage to make it work for your particular blog. 40% works great for mine. Don’t forget the quotation marks!
I also do not use any link break commands. That way the code makes all of the buttons fall into place quite nicely. And I usually get ride of the < center > command if it is included with someone’s button code. Its just extra code taking up space. If you want your images centered, you only need to say so once.
Example:
< div align=”center” >
< a href=”http://mmscrapshoppe.blogspot.com” target=”_blank” >< img src=”http://www.mmscrapshoppe.com/blog/MMScrapShoppeBlog.jpg” width=”40%”/ >< /a >
< a href=”http://mmscrapshoppe.blogspot.com” target=”_blank” >< img src=”http://www.mmscrapshoppe.com/blog/MMScrapShoppeBlog.jpg” width=”40%”/ >< /a >
< a href=”http://mmscrapshoppe.blogspot.com” target=”_blank” >< img src=”http://www.mmscrapshoppe.com/blog/MMScrapShoppeBlog.jpg” width=”40%”/ >< /a >
< a href=”http://mmscrapshoppe.blogspot.com” target=”_blank” >< img src=”http://www.mmscrapshoppe.com/blog/MMScrapShoppeBlog.jpg” width=”40%”/ >< /a >
< /center >< /div>
The < div align=”center” > command at the top of the code makes everything after it centered on your page so you don’t have to repetitiously use the < center > command. Just be sure that after you have added all your buttons you close the command with < /center > and < /div >.
And that’s shrinking a blog button 101!!
Kate Grey
Wednesday 9th of January 2013
Thank you, thank you! :) An incredibly easy fix and has cured my need to have symmetry!
Kate
http://seriouslykateblog.blogspot.com
Sydney Burnside
Sunday 9th of December 2012
Thank you so much for this! I cannot believe how such a simple string of code could do so much! This is exactly what I've been looking for to adjust the buttons on my blog! :) I had to use 10% for mine, but it worked PERFECTLY! THANK YOU!!!
Michele {The Scrap Shoppe}
Monday 10th of December 2012
That's what I love to hear! Thanks for letting me know, and I'm so glad you could use the information! :)
Shannon
Tuesday 8th of November 2011
Thank you so much! You just helped me create a lot more side space on my blog. You're the best!shannonsews.blogspot.com
silly eagle books
Monday 21st of February 2011
been trying to figure this out--forever! thanks for sharing! :)
Heather
Thursday 27th of January 2011
Love this! Everyone wants a link back to their blog. I can't say that I blame them, but it sure makes my blog look cluttered. Thank you!