Tuesday, September 11, 2012

Blogging Tip | Center Those Buttons!

Okay does it drive anyone else nuts when you go to a blog and see the buttons all over the place?? Well it drives me crazy!! Just a few days ago I figured out (quite by accident) how to make all the buttons on the right side of my blog centered. I'm loving the orderly way each of the buttons are lined up and I just wanted to share this super easy tip with you!

When you add an HTML/JavaScript "gadget" to your blog on the Layout page you can do a few small changes to the code or just enter it like it is. Two things I usually do is 1. Make sure the new button isn't going to take readers off my page and onto the link but instead open a new page for the link; and 2. (Now I) center the button!

Right now I will show you how to center the buttons...and at a later time I'll write about making the link open in a new page. So here goes...

1. On your blog home page or on the Layout page; go to the gadget and click "edit".

2. There will/should be a code there similar to this:

<div align="center" style="padding: 5px;">

<img alt="Blue Eyed Beauty Blog" src="http://3.bp.blogspot.com/-5ag6S3SZzdU/UEKHE7SROfI/AAAAAAAADrg/M6dIRHdETaQ/s1600/Blue+Eyed+Beauty+denim+blog+button.jpg" title="Blue Eyed Beauty Blog" /></div>
<textarea style="background: #f0f0f0; border: solid 1px #666666; color: #777777; display: block; font-size: 1em; height: 45px; margin: auto; padding: 10px; padding: 10px; width: 90%;">&lt;div align="center"&gt;&lt;a href=&quot;http://blueeyedbeautyblogg.blogspot.com/" title="Blue Eyed Beauty Blog"&gt;&lt;img src="http://3.bp.blogspot.com/-5ag6S3SZzdU/UEKHE7SROfI/AAAAAAAADrg/M6dIRHdETaQ/s1600/Blue+Eyed+Beauty+denim+blog+button.jpg" alt="Blue Eyed Beauty Blog" style="border:none;" /&gt;&lt;/a&gt;&lt;/div&gt;</textarea></center>

3. Now, in front of the very first part of the code: ex. <div align="center" style="padding: 5px;">... you need to type this: <center>

4. Now the first part of the code will look like this: <center><div align="center" style="padding: 5px;">...

5. Click "save" and then view your blog to see the nice and newly centered button!

I did this for every button I had which wasn't already centered and I love the results!

No comments:

Post a Comment

Thanks for stopping and leaving a comment! I LOVE reading comments! {They also help me know what you are interested in reading on my blog!}

Comments on posts older than 14 days are moderated. Other comments may be removed if they are inappropriate or spam. I do read all comments but can't always respond to each one because I don't get online very often.

My email can be found on my 'about me' page if you would like to contact me or you have a question.