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.

RSS Awareness Day

RSS definition: (Really Simple Syndication) is a format used to deliver information from websites and pages that get updated regularly.

May 1st is the first official RSS Awareness Day. Many, many people don't know or understand what RSS is, nor do they know it can benefit them.





I have done a few posts concerning RSS feeds, from explaining what an RSS feed is, to how to set up your own...worth checking out.

RSS in Simple Terms
Setting up a RSS Feed
Comment Feed Tutorial
Redirect Your Feed
RMail - Subscribe by Email to Any RSS Feed

To make it simple most bloggers put their feed icon in a prominent spot for you to see. At the present time, mine is near the top of the page in the right hand corner. If you click on it, and have a reader such as Google Reader, then you have subscribed to my RSS feed! Now, every time I post, it will be delivered to your reader, and you can read it there or click on the link and read it from my blog. How sweet is that?!

A New Look for BlogU

I felt my header has seen better days, so I fired up GIMP and went to work. I do have PhotoShop CS3, but I'm not that proficient with it yet. A few minor changes were made here and there to pull it all together.

Credits to:

1. Creative Blogging and signature font: RedstarBold
2. BlogU font; Fontin
3. Dashed swirly line: Moargh.de

It was such fun, and needed so badly. I hope everyone likes it!

Remove - Subscribe to: Posts (Atom)

Hi annie,I was just just wondering if there is a code on how to remove the feed link at the bottom of a post, the one which says Post (Atom). Without affecting anything.

1. Go to dashboard/ template/ edit HTML
2. Click the 'Expand Widgets Templates' box
3. Find:

<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

Remove this line:

<b:include data='feedLinks' name='feedLinksBody'/>

That should remove Posts (Atom).

Unique Background Images for Widgets

I also wanna know, is it possible to assign a different background image to each widget?



Gelo, yes, it is possible! As you can see in the images below. Top is the normal widgets. Bottom is the same widgets with background images in place.

Widget without background image

Widget with background image

To achieve this takes a little sleuth work. Each widget has a unique name. In this example, I have three widgets:

1. LinkList1
   
2. Text1
   
3. BlogArchive1

You can find the unique names of your widgets by searching your template for <b:widget id=

My search turned up: <b:widget id='LinkList1' locked='false' title='link widget' type='LinkList'/> So, my unique ID here is LinkList1.

After you find and identify each widget's unique ID, you will do a little work in the CSS Style Sheet. It doesn't make any difference where you actually place this code, but for neatness sake you can make a new group called Widgets.

/* Widgets
----------------------------------------------- */

Of course, you could have LinkList2, LinkList2, Text2, HTML1, etc.

For each widget that you want to add an image to, add the code as I have below to the CSS Style Sheet.

#LinkList1{
background: #fff url(IMAGE URL) no-repeat;
}
#Text1{
background: #fff url(IMAGE URL) no-repeat;
}
#BlogArchive1{
background: #fff url(IMAGE URL) no-repeat;
}

And, that is that.