Beautiful Blog Link Up!

It’s been a LONG two weeks of edits, designing, html, gadgets and wtf moments.

Now it’s time to SHOW OFF all that hard work!

I’m dying to see all the awesomeness you guys have come up with! Show me your header, your buttons, pages bar, and signatures. I WANNA SEE IT ALL!

MAKE SURE TO TELL US WHAT YOU CHANGED!

So link up folks, and show me your Beautiful Blog!

Momma Go Round

post signature

Pin It

Adding Fonts To Your Blog Using Blogger In Draft – Beautify Your Blog Part 10 {UPDATE}

Adding Fonts To Your Blog Using Blogger In Draft

Shout out to the AWESOME Chrissy from Boerman Ramblings… for telling me about a MUCH EASIER way to get the same fonts and more!!!

BLOGGER IN DRAFT!!!

The Official Blogger In Draft Blog states: “Blogger in draft is a special version of Blogger where we try out new features before releasing them to everyone. Think of it as our sandbox, or laboratory, or just “Blogger + new things.” By taking your feedback and looking at what works and what doesn’t, we’ll be able to make features that much better when releasing them to everyone.”

For the most part, it looks and acts the same as the Blogger you are used to…but for this purpose it makes changing fonts A MILLION PERCENT EASIER!!!!

First, you have to switch over to Blogger In Draft (click here).

Then once you are in, go to the “Design” tab, then “Template Designer”, then scroll down to “Advanced”. Beneath all the options to change colors, you will see options such as “text font”, “sidebar title font” and “blog description font”. Here you can choose from a ton of fonts and it inserts it for you!!!

The only PROB I’ve found so far is that “text font” will change the font of your post title AND post body to the same font. THEY CAN’T BE DIFFERENT. That sux…but this is way easier than messing with the html!!!

If you ever want to switch back to regular blogger, just go to www.blogger.com and log in.

Really, it’s that simple……annoying yet awesome all at the same time.

Enjoy and make sure to stop by and tell Chrissy how awesome she is!
post signature

Pin It

Adding Fonts to Your Blog Using HTML – Beautify Your Blog Part 10

Adding Fonts to Your Blog Using HTML

As you may have noticed, the font selection that Blogger offers leaves something to be desired. I mean really, seven of the most lame-o fonts out there are all you’re going to give us? Gee….thanks!

To add insult to injury, adding different fonts is not necessarily the easiest of the things we’ve covered. But hopefully I’ve sent you rooting around your HTML enough by now that this won’t scare you!

First thing is finding a font you want to use. You cannot just use any font you want :(

I found internet usable fonts through the Google Font Directory. The directory provides you with access and the codes necessary to implement the fonts they have. It’s not a huge selection, but it’s better than Blogger!


Once you’ve found a font you want to use, click on it. Then click on the “Use This Font” tab. Two sets of HTML code will appear…these are what we need to implement.

The first code will go in our blog’s html code. As before, go to “design”, then “edit html”. At or very very close to the top you should see

<head>

Directly BELOW this code you will insert the first set of html listed. AT THE END OF THE COPIED CODE, YOU MUST CHANGE > TO />. Make sure you hit Save!

YOU MUST DO THIS FOR EACH FONT YOU WANT TO USE.

Now we need to insert the second set of code to tell our blog to override with our new font.

Go to “design” then “template designer”. Click on “advanced” then scroll all the way down to “add css”. Copy and paste the second code into the box.

Here comes the tricky part. You will notice the second (css) code starts with “h1″. This refers to which heading/text you will be applying the new font to. YOU WILL HAVE TO CHANGE THIS FOR EACH FONT YOU WANT TO USE!

For example, I’m using the font “Covered By Your Grace” for my date heading, signified by “h2.date-header”. So I changed the beginning of the css code to say “h2.date-header” instead of “h1″.

Here is a list of the most commonly changed text. The red is the code, the black is what that code will change.

#header h1: header
h2.date-header: date header
.post h3: post title
#comments h4: comments
.post: post body

I know this is the most difficult thing we’ve done yet, but it really does add soooo much to have some different fonts. Just go slow, make sure you make all the changes to the html and css, and you will have it!

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

Momma Go Round

********************************************************************************************************************************************************************************
post signature
Pin It

Adding A Signature – Beautify Your Blog Part 9

Adding a Signature

Your signature at the end of each post gives your readers a little glimpse of you, your personality, and your style. Besides, it’s so fun to have a cute way to sign off.

Here’s two of the signatures that I’ve used.

 
Luckily, Blogger has made this one easy on us! HOORAY!

As with the other images we’ve used, you will need to upload your signature image as a jpeg to a photo hosting site (ex. photobucket). Make sure you get the direct link for the image.

Next, go to your Dashboard and click “Settings”. Click on the “Formatting” tab and scroll all the way to the bottom where it says “Post Template”. Copy and paste this code:

<p><image class=”centered”alt=”post signature” src=”http://i947.photobucket.com/albums/ad320/yourmemoriescaptured/Sigcopy.jpg” /></p>

Change the RED to the direct link for your signature image.

Make sure you click SAVE SETTINGS or it won’t appear!

Now each time that you start a new post, your signature image will automatically appear!

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

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!

Momma Go Round 
********************************************************************************************************************************************************************************


post signature

Pin It

Create Social Media/Feed Buttons – Beautify Your Blog Part 8

Create Social Media/Feed Buttons

So I have to admit, this might be the part I’m most proud of. Everytime you see a professionally designed blog, they always have awesome social media/feed buttons that are big, clear, and easy to find.

 I have to say, I was always very jealous of these buttons. For me, they just signified that this way a “legit” blog.
I don’t know why it took me so long to figure out how to make these, since the process is so similiar to what we’ve done before. Guess I’m slow to catch on, but glad I did!
For these buttons, you have two options, use button images provided by Facebook, Twitter, etc., or create your own. As you can see, I created my own based on the ones provided. Same process as with all the buttons we’ve made so far, if you are designing your own buttons you will need to upload them to a photo sharing site. My sidebar is 250 pixels wide, so I made each of my buttons 60×60 pixels so they wouldn’t take up the whole row.
If you are using pre-designed buttons, you have two choices. You can save the images to your computer, upload them, and continue with the process we are using. Or, you can use button generators like http://coolbutton.net/ that will provide you with the html code.
From this point out, we will assume you are uploading buttons.

Head to your dashboard and click “design”. You will want to click “Add A Gadget” wherever you want your buttons to be. You will be adding an HTML/Java Script gadget. Copy this code

<ahref=”http://www.facebook.com/mommagoround“> <imgsrc=”http://i947.photobucket.com/albums/ad320/yourmemoriescaptured/littlefb60.jpg” alt=”" /></a>
Change the RED to the page you want your button to go to, and the BLUE to the direct link for the button image from the image hosting site.
Repeat this code for each button.
Make sure you click SAVE!!
****************************************************************************************************************************************************************************
Get those changes ready. BEAUTIFUL BLOG LINK PARTY coming THIS WEEKEND!!
Momma Go Round

post signature
Pin It

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!

Momma Go Round
********************************************************************************************************************************************************************************
post signature
Pin It

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.

Once you have reapeated the html for all your buttons, make sure you click SAVE!!!

Now you will have a customized page bar at the top of your blog! 

Momma Go Round

Hope you are enjoying making your blog your own. There’s still more to come in the Beautify Your Blog series!

Get those changes ready for our end of the series Show Off Your Beautiful Blog link-up!!! Coming soon, so get ready!

post signature

Pin It

Creating a Grab Button – Beautify Your Blog Part 5

Creating a Grab Button

A grab button is an essential part to getting the word about your blog out there! Readers can grab your button, put it on their blog, and send new readers your way.

I have two permanent grab buttons on my sidebar
Momma Go RoundMomma Go Round

One is just for my blog, and the other is for blogs that I have featured.
First things first, you will need to create your button in a design program. I used Photoshop, but Inkscape (free Photoshop like program) or even paint will do the job.
Most buttons are 125×125 pixels, but the longer ones on my blog are 250×125 pixels.
New Photoshop File

Once you have created your button, you will need to upload it to a photosharing website. I use Photobucket (free!). Once you upload the button, you will need to locate the “direct link” for the picture. This is the url for the picture itself and not just your photo account.

Now, go to the “Design” option on your Blogger Dashboard. Click “Add Page Element” and “Add HTML”.

Copy and paste the code below. Replace the blue with < .Replace the red with your blog’s url, your blog’s name, and the direct link for your button picture.

<a href=”http://www.mommagoround.blogspot.com” target=”_blank”>&lt;img alt=”Momma Go Round” src=”http://i947.photobucket.com/albums/ad320/yourmemoriescaptured/Buttoncopy-1.jpg” />&lt;/a><div> <div align=”center”> <form><textarea rows=”7″ cols=”15″><a href=”http://www.mommagoround.blogspot.com” target=”_blank”><img alt=”Momma Go Round” src=”http://i947.photobucket.com/albums/ad320/yourmemoriescaptured/Buttoncopy-1.jpg” /></a></textarea></form> </div>
Click “Save” and there you have it! You will now have an image of your button appear along with the scroll box at the bottom with your button’s code!
Momma Go Round

Don’t forget to get started on beautifying your blog so you can share you changes in our end of series link up!

Pin It

Removing The Blogger Navigation Bar – Beautify Your Blog Part 4

Removing the Blogger Navigation Bar

This might have been the one thing that bugged me the most!

New layout…done
New design…done
New buttons…done
New fonts…done

Nav bar…STILL FREAKIN’ THERE!

If you don’t know what the blogger navigation bar is, take a look at the top of your blog (if you use blogger). You or a blog designer would have had to remove it, so if you haven’t, it’s still there.

The only options Blogger itself gives you is to change the design of it. There’s no widget or setting to actually remove it. To remove the nagivation bar, you need to edit the html.

Go to your dashboard, design, edit html. At or almost at the very top find this code.



———————————————–
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
———————————————– */

Immediately following the code/template style, insert this code.
#navbar-iframe {

display: none !important;
}

Click PREVIEW first to make sure it all looks ok, then save.

That’s it!!! It was that simple to remove something that bugged me for so long.

Momma Go Round

There’s more Beautify Your Blog tips and tricks coming your way!

post signature

Pin It

Adjusting Your Blog’s Layout/Template – Beautify Your Blog Part 3

Adjusting Your Blog’s Layout/Template

Sometimes there just isn’t a layout that’s exactly what you want. The sidebar is too big. The post body is too small. Yada yada yada. Instead of searching for years, why not just adjust one?

To make adjustments to the width of sections, there are two choices. You can use Blogger’s Template Designer, but this is not available for all templates OR if you have done other HTML customization. Of course, the other option is to edit the HTML itself.

Adjusting Entire Blog Width:

To adjust the width of your entire blog, look for the following code.

/* Outer-Wrapper
———————————————– */
#outer-wrapper {
width: 1200px;
margin:0 auto;
padding:0px;
text-align:$startSide;
font: $bodyfont;
}

For reference, my blog width is 1200 px. My header is 1000 px which is why you can see my posts and sidebar extend past my header. Remember, this is the width of the entire main section of your blog. It does not include the header.

Adjusting Main Body Width:

The main section of your blog are 2 different sections: the main body and sidebar(s). The main body is where your posts are shown. You can adjust the width of this section but remember, the wider the main body is, the smaller the sidebar(s) will be.

To adjust the width of your main body, look for the following code.

#main-wrapper {
width: 920px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Again for reference, the entire width of my blog is 1200 px and the width of my main body is 920 px. That will leave me 280 px for my sidebar.

Adjusting Sidebar Width:

Depending on your template, you may have more than one sidebar. Whether you have one or two, the code is the same. Remember, you still have to work within the confines of the entire blog width that you set.

To adjust the width of your sidebar(s), look for the following code:

#sidebar-wrapper {
width: 250px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Here you’ll notice that I did not use the full 280 px that I had left to play with. By not using all that I had it allows for some space between the main body and the sidebar. If I had used them all, the two would be right up against each other.

Overall, when setting your widths keep in mind what you are trying to accomplish. Since I don’t have a background image or design, I wanted the content of my blog to take up a lot of space, so I set my widths bigger. If you have a great background that you’d like to show off, set them smaller. “Standard” entire blog widths are usually 900-1000 pixels. It’s all about what you want!

Momma Go Round

Stay tuned for more Beautify Your Blog, including how to make a grab button, removing the Blogger navigation bar, and adding social media/rss fee buttons!

post signature

Pin It