Improving your blog - center those widgets!

Oh, we are SO overdue for a good blog tip, wouldn't you agree?!? Here's a quick little easy one you can install in moments and will improve your blog appearance instantly!

Centering your widgets

Many of us are grabbing blog buttons and installing them on our sidebars.

Where the problem comes in is, not all buttons are coded the same. So what you end up with can look abit scrambled, meaning, some are justified to the left, and some are centered. Not so pretty to look at when you want them to line up nice and neat and tidy.

Centered buttons do look better. Not all buttons are designed at the same size, so because we end up with a modge podge of whatever, centering them generally is more eye pleasing.

Nerd Tip: when creating blog buttons, the standard schmandard is 150 pixels x 150 pixels

Next, understanding a tad bit of html will help you here.

Here's an example of the coding for my Saturday Nite Special button.

Now look at the beginning and end. You see < c e n t e r > at the start and < / c en t e r > at the end? THIS is where the magic happens, folks! Are you ready?!?

Many blog buttons that are created do not have this easy little tweak intact. For example, if the < c e n t e r > < / c e n t e r > is not added, my html code would read identical, except without the < c e n t e r > < / c e n t e r >.
It is such an easy fix! So this is what I suggest you do before messing around with premade buttons.

Copy and paste a non centered premade button and place it in a new Gadget widget to practice on.

Here's how.

Open your blog
Go to customize
- select a widget you know holds a non centered button,  click on it to open
- copy (highlight all, ctrl c)
- select Add a Gadget
- select HTML/Java Script
- in the content area, paste the code inside (click in box, ctrl v)
- save
- preview

Look at the preview. Did your transfer work? If not, do it again. Get this part right first before you head onto the next. HTML coding is extremely high end fussy and not one mistake can be made! Not one extra space, don't even look at it weird! (just kidding but not really)

Once your button is displaying all nice and pretty, open up that widget and enter your < center> before the html coding, and add < /center> after. No spaces. Make it nice and tight.

Preview it. It's my bet that your button is now centered! If so, hit save.

***Now, before you enter another one, read below FIRST.***

***Buttons all in one widget or each button in it's own widget?***

Tip: #1 - Some like to have all the coding in one widget and some prefer separate. Separately is easier to install in case you make a mistake, however all together looks nicer and spacing is tighter but you canNOT make one mistake! That's why I suggest the practice runs in new pretend widgets. I suggest master the technique in separate widgets first, then go try to add a few buttons in one widget.

Tip: #2 - if you want all your buttons in one widget, you'll find that they'll be all slammed together tight like as if they're standing on each other's head. To make them look nice, give them one space by putting this code on a separate line in between the codes already there.

& n b s p ;   (but with NO spaces)

Here's how

- load your code for one button, get it centered
- on a new line, add the & n b s p ; (with no spaces)
-on the very next line, add your next button html, and center it.
etc.

I realize my coding looks abit scrambled but that's just the way it wonks out on you when you close and reopen the widget. Don't worry about it. Just load one button at a time, and on the next line add that weird & n b s p ; code to space the button codes.

Doing it one at a time and building it from top to bottom  is easier for those not in the total HTML know.

Once everything looks good there, you can delete your actual if you like, and then simply move the widgets to your preferred locations.

If you simply cannot for the life of you get a button to work, just delete the widget and start over. THIS is why you want practice ones. Don't question this, just do it.

Trust me, the explaination is alot tougher to deal with than the actual work. Go ahead and try one uncentered button on your side bar. Then give me a shout out on your blog showing off your new changes and how brilliant I am when it works for you, ok? (you don't have to but just sayin')

Tip: Do this at a time of day where you will NOT be interrupted. You'll thank me later.

And if it doesn't work...

"No one is here to take your call right now. Please don't leave your message - gone fishin'."

BLEEEEP.

Happy nerding! Time to go pack that fishin' gear...

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

For previous blog tips:

How to add a signature
How to add a Link-within
How to remove dotted divider lines in sidebars
How to take good blog photos

click HERE.