January 17, 2011 Archives - Momma Go Round

Centering Gadgets – Beautify Your Blog Part 7

Centering Gadgets

This is another one of those stupid little adjustments that can make all the difference: centering the gadgets on your sidebar. You’ve done all this work to adjust the widths of your sections, created buttons, yada yada….but all your gadgets are aligned left. ANNOYING!

To fix this, it’s almost painful how easy it is. There’s only one caveat, it only works on HTML gadgets.

But Nina, you have pictures on your sidebar that are centered too!!!! Thanks for noticing, yes I do. For the buttons farther down on my sidebar (Facebook Love, Tweet With Me, etc) I designed them to be 250 pixels in width, which is the full width of my sidebar. All other pictures that are centered are put in as HTML.

Anyways…..here’s how to center your gadgets. Before the HTML of each gadget enter <center> and at the end of the code enter </center> .

Really, that’s it! Now for some reason, I can’t get this to work on my Blog Frog gadget…hence it’s hanging out at the bottom. But for everything else, it’s worked great!

*********************************************************************************************************************************************************************************
Get those changes ready! BEAUTIFUL BLOGS linky party is THIS WEEKEND!!!

Write up a post telling us all the b-e-a-utiful changes you made and link it up so we can all ooooooohhhhh and aaaaahhhh at your work!

********************************************************************************************************************************************************************************

Create A Custom Pages Bar – Beautify Your Blog Part 6

Create A Custom Pages Bar

Stand alone pages are becoming a big part of most blogs. They offer the opportunity to include permanent content to your blog that is quick and easy to find.

At the top of my blog I have a pages bar that links to my stand alone pages: about me, tutorials, blog love, link up, contact, and advertise. While Blogger offers a gaget to add a pages bar, there is very little customization that you can do.

Creating a custom page bar can be tricky, but it offers you far more choices in customization and creativity. I’ll walk you through the steps that I used to create my bar. I’m sure this is not the only way, and heck, it may not be the best. But it’s what I know…so here we go!

Start by designing your buttons using a design software (Photoshop, Inkscape, Picassa…). When designing them, remember, make them small so they all fit across the width of your blog. For example, I made each of my buttons about 100×30 pixels. My header is 1000 pixels wide and I wanted to leave space inbetween and at the ends of the bar, so I didn’t use the full 1000 pixels available.

Next, upload each button picture to an online photo sharing site. I use Photobucket. Same as with your buttons, you will need the direct link for each button picture.

In Blogger, we must tell our template to recognize our new page bar and to line it up horizontally instead of vertically. Go to “Edit HTML” and scroll down until you find

/* Header
—————————————————————-

At the very end of this section, insert this code.

#navbarmenu ul li{
font-size:90%;
list-style-type: none;
display:inline;
padding:20px;
margin:0px;
border:0px solid;
}

Later, you may want to come back to this section and adjust the pixels in “padding:”. The higher the number, the greater the s p a c e between your button images.

Next, we will need to create a new html gadget to insert our bar. Here’s the caveat, not all templates allow you to add gadgets to the header. I use the old Blogger template Minima. You can find it by going to design, edit html, and all the way at the bottom it says “Layout Templates (Launched 2006)”. Click there and Minima is the first template listed.

Go to Design, Page Elements, and click Add a Gadget in the header. Select “HTML/JavaScript”. Similiarly to the grab button, we will insert code that directs what button image to show and where to go when the button is clicked.

<div id=’navbarmenu’>
<ul>
<li><a href=”http://mommagoround.blogspot.com/p/hi-im-nina.html“><img src=”http://i947.photobucket.com/albums/ad320/yourmemoriescaptured/templatecopy.jpg” /></a></li>

The blue only needs to be inserted at the very beginging. The rest of the code gets repeated for each button that you are creating. Change the red to the url of the stand alone page you want the button to click to, and change the green to the direct link for the button image you uploaded.