Shrink that Button!

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