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.

Facebook Pinterest Twitter Google+ RSS
Categories: Blogging Tips
19

Post a comment!

Your email address will not be published. Required fields are marked *

  1. Can I put my fishing gear away now?!? (especially since I don’t fish)

    Seriously, I’m so glad it’s working for you! I often find directions out in blog land catering mainly to those that actually know what they’re doing.

    Tis a proud moment for Ms. Funky Junk when her students excell. :)

  2. What great advice. Just did it and it only took me a few minutes. I need this kind of help cos I’m new to blogging and only know how to type, search and shop on a computer so if I can follow this anyone can. Thanks for helping my blog look (slightly) more organised! Any chance you could help me with the content of my blog and the photo taking and the uploading of photos and the gathering of followers…??! x

  3. Oh I could kiss you right now… I have been trying to do this for a few weeks now… I can’t handle things that are not centered… I even went into one that was centered and copied the html code for centering and it didn’t work… I don’t like playing around in this stuff… give me software I can figure it out but you can’t do too much damage if you screw up… there is no damage control for this stuff… thanks so much… love your tips and have used several already.

  4. So excited to see this and other blog tips. I always am looking for ways to make my blog look better. Thanks. I will work on this in the a.m., when I can coherently understand html…too late for that now.
    Holly

  5. OMG! Thank you SO much for this. The off centered buttons have been driving me crazy and I can’t believe how easy it was to fix! Thank You!

  6. Thanks for taking the time to post this! It’s those little things that make all the difference, right? Makes me feel like we are all just trying to figure this out together. :)

  7. It’s ME! Thank you for these tips! Got up reeeeel early to tackle some of this stuff!

    Signature – CHECK
    Centered Widgets – CHECK

    How do you center the words above the widget? You don’t have to answer that right now!

    U R A.MAY.ZING!

  8. Centering text is easy peasy.

    Step One:

    You need html coding to surround text. The following is how you’d center ‘Funky Junk’, but don’t apply the spaces I’ve show. Type it tight like. (make sure you are in html mode before filling this in)

    < c e n t e r >Funky Junk< / c e n t e r >

    You need to encase your text before and after, with the after having that slash deal thing.

    Step Two

    Want to leave a space between the text and pic? Put this code in between with no spaces again:

    & n b s p ;

    So if you want text, space, picture, it would look like this:

    < c e n t e r > Funky Junk< / c e n t e r >
    & n b s p ;
    your picture here

    Hope that helps!
    FJ Donna