What style Blogger do you use?

I ran a poll to get a feel for what style Blogger template is being used. I have to say that the results surprised me in that more people are using Classic templates than I thought. And a few of us, myself included, have a couple of both.

I tend to gear my posts more towards the New Blogger templates, simply because I have become very familiar with them. Now, when I try to work on a Classic template is a struggle for me. I will attempt to find and post more hacks for Classic in the future. No big promises...just good intentions on my part.

So, Classic users, I applaud you! Hang in there. You have managed to use your template this far, so you must love it, as I do mine. I have to say that it really seems to take more skill and perseverance to keep up a Classic template than the new Blogger template. With the new Blogger templates, you can make it as difficult or as hard as you wish.

...and I'm rambling. Here are the results:


Classic............................11 11%
New (aka Beta):................76 81%
I have a couple of both........6 6%

93 votes

A Cool CSS Navigation Menu

Widgets For Blogger said...
Annie,
Do you have a post or could you make a post about how to make a menu like yours so that when you hover over an image you get an effect like yours?

Top row: static - Bottom row: active

I have been asked by a couple of people for this, so today I decided to do a little post. First, I want to give all the credit to this wonderful site, Web Designer Wall. I go to that site and get lost in all it's beauty. I just drool over all the cool design features. (Makes for a wet keyboard.) You can read their complete instructions on Advanced CSS Menu.

This is accomplished with a little bit of graphic making and code placing. First with the graphic making. The Web Designer Wall gave great instructions on making your graphics. So, instead of me going over it again, I would suggest reading it there.

That brings us to the code placing. This is a two part process.

1. You will want to place the code in the CSS style sheet. I am showing the the code I used to place the menu in BlogU. That way you can compare with WDW to see any differences, and what the differences do.

/*Roll over feed
-----------------------------------------------*/
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 500px;
height: 50px;
background: #ffffff;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span{
display: block;
}
#menu .home {
width: 144px;
height: 58px;
background: url(home.png) no-repeat;
left: 10px;
top: 25px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(/home-over.png) no-repeat;
left: 28px;
top: -20px;
}
#menu .about {
width: 131px;
height: 51px;
background: url(about.png) no-repeat;
left: 180px;
top: 18px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(about-over.png) no-repeat;
left: 44px;
top: 54px;
}
#menu .rss {
width: 112px;
height: 47px;
background: url(RSS.png) no-repeat;
left: 350px;
top: 24px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}

The orange: change the values for your own images sizes.
The blue: change these values so it fits where you want it. This is simply trial and error...and patience.
The purple: this may have to be changed to fit in your sidebar, depending on the width of your sidebar, or if you put it below your header, that width.

Of course, the style sheet is where you do all of your...ummm...styling, so there may be other changes you want to make.

2. Now you will have to put some code in a widget. Choose HTML/Javascript (my most favorite widget) and put the following code in:

<ul id="menu">
<li><a href="YOUR BLOG URL" class="home">Home <span></span></a></li>
<li><a href="YOUR PROFILE URL" class="about">About <span></span></a></li>
<li><a href="YOUR FEED URL" class="rss">RSS <span></span></a></li>
</ul>

The orange: changes here are only to paste your own URL's in the appropriate spot.

Attention Classic Bloggers: Put the widget code in your template between <MainOrArchivePage> and </MainOrArchivePage>. Please note, I haven't actually tested it in Classic, but it looks like it will work fine. Let me know.

That will create the menu. It takes some skill with Photoshop or GIMP, but it is worth the effort!

Remove "Newer Posts" and "Older Posts"

Love your new site. Is there a way to remove "Newer Posts" and "Older Posts" from the bottom of the page. I'm creating a website with a menu bar and I don't want it to display the posts I use to link to the menu bar. Thanks.



Happily this is an easy fix. This also removes the Home link from the bottom of the page. (It is the #blog-pager part of the code.)

Find this code in your template:

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

And replace with this code:

#blog-pager-newer-link {
display: none;
}

#blog-pager-older-link {
display: none;
}

#blog-pager {
display: none;
}

If, by chance, you wish to return to the original state, simply reverse the process.