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!
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!!!
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!
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!
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.
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:
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!
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.
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
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
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!
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!
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 
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.
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.
There’s more Beautify Your Blog tips and tricks coming your way!
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!
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!
