Nav Bar

Make Your Blogger Navbar Fade In and Out

May 10, 2011 2 Comments

There are some out there that do not like the blogger navbar. Mostly because it makes their blog look like, well… a blog. There are tutorials on how to remove it completely from your blog somewhere floating out there in the great chasm that is the internet. Or you can just find it here.

Personally I like the blogger navbar but that’s because I use it all the time. It’s useful to be able to navigate through a blog while I work on designs. I honestly don’t really notice the blogger navbar, it’s just there. I do however notice when it is entirely missing on someone’s blog. Heaven forbid I actually have to get back to my blogger dashboard by typing blogger.com into my browser. But it’s still annoying.

So someone somewhere came up with a lovely solution. It’s a fading Navbar that shows up when you hover over it with your mouse. Is that not the best idea ever? Okay maybe not the best idea ever but it’s still a good one and it makes me happy.

The original tutorial for making your blogger navbar fade is found at Spice Up Your Blog. He has many great blogger tutorials. Including one where your navbar appears at the bottom of the blog. I don’t know why you would want that but hey it’s there.

So here’s the long and short of it.

Oh wait its SUPER short.

1. Go into your Design section of your blog.

2. Click on edit HTML

3. Find this code

]]></b:skin>

(The easiest way to do this is to Press the Ctrl and F at the same time and a little search box will pop up at the top of your browser window. Type in and it will take you right to it.)

4. Copy the grey code below and paste it into your HTML just BEFORE the code you found.

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

5. Save your template.

You now have a Blogger navbar that fades in and out.

Filed Under: Blog Tips, Custom Blog Design, Custom Blog Design Tutorial, Easy, Easy Tutorials, Menu Bar, Nav Bar, Navigation Bar, Tutorials Tagged With: Blogger Navigation Bar, Fade, Get Rid of Navigation Bar, Hide, Peek-a-Boo Navigation Bar

30 Minute FREE Blog Makeover! Did I meantion that it is SUPER EASY!!!

April 19, 2011 3 Comments

Make this blog in 30 Minutes or less, with NO design software! This is how I did it:

1. I started with the Blogger’s Pink Watermark Theme.

2. I installed Shabby Blog’s Mod Men {W}. Use the instructions from her website (When you click on “Get the Code”).

This is what it should look like now….

3. To fix this, you need to go to your Template Designer and your Background page, and click on “Remove image“.

Then click on your Advanced page and “Backgrounds“. Then Change the color of the Background and the Footer to Transparent.

4. Next I got rid of the drop shadow on the top and bottom of the Navigation Bar, and as well as behind the Post Section, by copying and pasting the following code in the “Add CSS” page of the “Advanced” tab: (seen below)

.tabs-inner .PageList, .tabs-inner .Labels {
box-shadow: 0 0 0px rgba(0, 0, 0, 0);
}
.post-outer {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

5. Next, I customized the Tabs Background, Tabs Text, Links, Date Header, Post and Gadgets. All located on your Advanced page. There, I change colors, fonts, and font sizes.

6. Next, I downloaded this free Header image from the Background Fairy.

7. Then go to pixlr.com and Open the file, and use the Type Tool on the left to add your text.

8. Finally upload your header, and center it if needed. Here is a tutorial that shows you how to center your blog. This was the code I added to center mine: (I also added a margin to the top and bottom just to give it some nice white space)

.header-outer {
margin-left:100px;
margin-bottom: 40px;
margin-top: 40px;
}

There you have it!! Super Cute!

I have been working on a couple boards on my Pinterest, with my Favorite Free Backgrounds and Free Headers, Check it out HERE :)

Filed Under: 2 Column Template, 3 Column Template, Blog Design Ideas, Blog Tips, Creative, Custom Blog Design, Custom Blog Design Tutorial, Design Tips, DIY, Easy, Easy Tutorials, Fonts, Free Blog Background, Headers, Menu Bar, Nav Bar, New Blogger Template Tutorials, No Software, pixlr, Shabby, Templates, Tutorials

How to Move Your Blogger Navigation Bar Above Your Header

April 18, 2011 7 Comments

Step 1: Go to your Edit HTML page, and do a ctrl F (find): <div class='tabs-outer'>

Step 2: Do a Right Click > Cut (or ctrl X) from <div class='tabs-outer'> to the </div> before <div class='main-outer'> (as shown below)

Step 3: Paste (right click>Paste) that code a few lines up, right BEFORE <header>, and ADD this code right below what you just pasted:

<br/>
<br/>

(shown below)

Final Step: PREVIEW your template before you save it! If it looks good, then save :)

Filed Under: Blog Tips, Custom Blog Design Tutorial, DIY, Easy, Easy Tutorials, Headers, Intermediate Tutorials, Menu Bar, Nav Bar, Navigation Bar, New Blogger Template Tutorials, Templates, Tutorials

Make a Cute Blog Monday! One Super Cute Blog

January 4, 2011 5 Comments

I know, technically it is Tuesday, I am 18 Minutes late…. I meant to get it done on Monday :p

This is brand new, but every Monday (or almost every monday), I am going to make a cute blog, and show you how I did it!

This weeks blog is “One Super Cute Blog” Click Here to see it live.

Free Blogger Blog
Free Account on Colour Lovers
Cute Illustration
Picnik (no registration or sign up required)
Free Account on Fonts.com Web Fonts

I used the new 2010 Orange Awesome Inc. Template to get started. You can find it under your Template Designer.

I used Colour Lovers (Totally Free Website) to make my background. I have a tutorial here that shows you how to do it :) This is the background that I came up with:

I made my header using Picnik (Totally Free & No Sign up or Registration Required). I used my newest illustration pack for sale over at my Design Shoppe (sorry it is so bare at the moment, but I promise, I will add more soon).

Click Here for a tutorial on how to make headers in Picnik, and below, I have shown what I did differently from the tutorial. When I saved it, I saved it at 900px wide, and I saved it as a PNG instead of a JPEG.

Now I need to make a few adjustments to the to make it look nicer. First thing I am going to do is change the top bar from Blue, to Transparent. If you don’t know how to do that, CLICK HERE for a tutorial.

Next I am going to play with the layout of the blog. So I went to the Template Designer, and selected a body and footer layout that I liked.

Now I am going to change the font colors, sizes, etc. They are all under the Advanced section:

I am not excited about how the date looks, so I changed it a little. If you want your Date to look like mine, go back to your Add CSS under Advanced, and add this code:

.main-inner .widget h2.date-header {
background: repeat-x scroll center bottom #FE4365;
border-bottom: 0px solid transparent;
border-top: 0px;
margin: 0 -15px 1px;
padding: 0 0 0px;
}

.main-inner .widget h2.date-header span {
border-left: 0px;
border-right: 0px;
}

If you want the color something different than the pink that I chose, change the #FE4365 to the color value of your choice. You can use ColorPicker.com to find a color. Now your Date should look like this:

I also didn’t like the orange border around the Post Body area, and the Gadget area, so if you go to your Advanced, and Post Background and Gadget Background, you can change it there. I changed mine just white.

I love Non-Web Fonts :) I never understood why web fonts were always so boring, so CLICK HERE for a tutorial on how to change your font to something a bit more fun. This is how mine turned out:

If you don’t have any pages, CLICK HERE for a tutorial on how to make them, and how they work.

Once you have your pages, the Navigation Bar will look like this:

First off, I don’t like how it goes all the way across, and I don’t like that it is transparent, and I really don’t like the Orange….

So first, I am going to go to my Add CSS section, and add this code:

.tabs-outer {
background: white;
width: 900px;
margin: auto;
}

.tabs-cap-top, .tabs-cap-bottom {
border-top: 0px;
}

This is how it will look now, if you don’t want it white, put a color value in the place of where it says “white”. Also, if your header is something other than 900px wide, change 900 to match the width of your header.