Your sidebar has a case of "Float Drop"

Recently I discovered a problem with viewing my blog in IE. It seems that my entire left sidebar had dropped to the bottom after my last post.

Jon Aquino's Mental Garden
"
...Internet Explorer problem called float drop, in which if the main column and sidebar column are too wide to fit side-by-side...
"

Imagine my surprise! Not exactly the look I was after. Since so many people still use IE, I had to get it fixed. After much research (and ado) I found I wasn't alone. They even had a name for this little oddity - float drop. I found out the cause of my 'float drop' was an image in this post, Customizing your header: make your own banner, that was too wide for the post area. My suggestion if you encounter this problem is to look at your posts for wide images. Long URL's can do it also. Check both the posts and the sidebar for oversized items.

If this doesn't cure it for you, I found other ways by editing your template. Fixing "Float Drops" in the Blogger Templates gave some insight into how to accomplish this. Luckily I didn't have to go that far...a simple resizing of an image, and I was back in business.

Quick CSS tutorial for bloggers

CSS stands for Cascading Style Sheet. You will find your Cascading Style Sheet at the beginning of the Blogger's template surrounded by the <style> and </style> tags. I use the Blogger template "Minima", so this is what mine looks like. Your's will be similiar depending upon your template.

<style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
----------------------------------------------- */
body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

(The rest of the style sheet removed)

</style>

Sometimes notes are written into the template. These notes are surrounded by */ and /*. These comments are for the person editing the template and is not recognized by the browser. In this example the comments give credit to the designer of the template. Other times the comments are put in like this: < !-- End #main -->. (Please note, I put a space between the < and ! so it would show in this post.) It is the same principle.

In this example, these symbols, { and }, means that whatever is surrounded by { and } are properties of the body of the blog. This is where you can change the look of the body. You can change 'font:x-small Georgia,Serif;' to 'font:Verdana,Sans-serif'. You can even change the font style here by adding this line---> 'font-style:italic;' . Or the font color by changing 'color:#333;' to whatever you like. Now it is easy to see how to change the color of the body's background!

Remember, the CSS is a guide for your template to follow. If you make a change there, it will change any instance where it occurs in your blog. For example, it allows you change the color of your post title one time versus editing each and every title in you blog one at a time. A miracle!

The Hierarchy for Bloggers

Food for thought. Where do you stand in The Hierarchy for Bloggers? I thought I was starting out pretty good...bloggers on blogging was rather high in the hierarchy. But, the wind was taken out of my sails with blogger users on the lower end. It was good for a laugh!

Visual interest - Pullquotes

Sometimes text needs a little help to make it more interesting. Graphics works miracles in this department. But often you don't have a graphic that you can use. Jazzing up your text is an excellent option. I discovered a way to liven

Mandarin Design
"The exact placement of the pullquote is up to you but you will want to make sure that you have typed in a long enough post that actually needs some pullquotes to make it more interesting."

things up a bit with something called "Pullquotes" from Mandarin Design. The colored box on the right side of this post with content is an example of a pullquote. It very much resembles a magazine layout. This method works especially well on longer posts. Here is another example that I put in a post, The Category Adventure.

Add this to your style sheet or add it to the HEAD section of your template:

.pullquote {
width: 145px;
background:#A3C586;
color:black;
float: right;
border:1px dotted #5B7444;
font-weight:bold;
line-height:140%;
padding:5px;
margin-top:10px;
margin-left:10px;
}

Then add this to your post itself:

<p class="pullquote">
<span >Mandarin Design: Easy CSS Pullquotes</span>
<span >"</span>
The exact placement of the pullquote is up to you but you will want to make sure that you have typed in a long enough post that actually needs some pullquotes to make it more interesting.
<span style="font-size:large;">"</span>
</p>

Play around with this until you find colors and fonts that you like. The color in the box can easily be changed by modifying the code in the style sheet "background:#A3C586;" to whatever color you want. I changed the background color to a green and the 'heading' font inside the pullquote to white. The possiblities are endless. There are more pullquotes at Mandarin Design if you would like to try another style.

Customizing your header: make your own banner

Here is another online tool to make a banner for your blog found at Banner Creator. It is really great for the artistically impaired. Within a few minutes I was able to make this banner:
After you make a new header image, see

• Customizing your header: add an image
  
• Customizing your header: another way to add an image

on how to install it! UPDATE: I resized the banner to fit in the post area. It looked great on my computer using Firefox. But I viewed it on another computer today running IE and seems that the banner was a little too wide and made my left sidebar drop below all the posts. Need I say it? I will...IE is a pain in the neck.

Customizing your header: make your own header/logo

There is a great interest in heading modifications. One being adding an image. In this instance, the image is your own logo or header that you can make online at Custom Blog. There are several different fonts and font styles, plus different colors to choose from. Most of them are so-so, but you can make a pretty decent one if you try. Here is one I made that didn't turn out too bad:

After you make a new header image, see

• Customizing your header: add an image
  
• Customizing your header: another way to add an image

on how to install it!

EDIT: it was brought to my attention that the Custom Blog link is no longer active.

Button, button...

Now that I have conquered categories, I have moved on to another obsession. This one is rather strange. I like brilliant buttons, chicklets or what ever else you care to call them. Why do I like them? It is because they are uniform, tidy, colorful, and can tell a whole story in 80 x 15 pixels. They are not gaudy, loud, ridiculous or intrusive.

I found the most interesting site that plays right into my new obsession - gtmcknight. He has a collection of 3000+ buttons and growing. He encourages you to steal his buttons or make your own. I spent entirely too much time looking over each and every button, including the ones waiting for approval. An article at Freshblog included a link to another online button maker which uses a color table to select hexadecimal values for use in the button maker.

To take it to the next level, I've made a few of my own:

• 
• 
• 

I happened across these sites listed on Blogging Blog. There are programs to make buttons, buttons to steal, and button tutorials:

• 
• 
• 
• 

I wonder if anyone else has this obsession?

The Category Adventure

Since I first started this blog, I have been fascinated with categories. How can I get them? Does it take an Act of Congress to implement? This is what I finally decided to use.

You will need three items for it to work:

1. Firefox
2. Greasemonkey
3. A del.icio.us account

At Freshblog I found the information I needed to get started. To begin with, after you have Firefox and Greasemonkey, get the script that you will need called Blogger del.icio.us publishing and post categorizing helper. In the upper right hand corner of that page you will see "Install this Script or click here to find out how." After I clicked, the script was installed. Pretty easy.

FRESHBLOG
"This is great news for people who use del.icio.us to file their blog posts within tags, as their blog software may not offer categories…since tags are usually considered more specific than categories, you may use del.icio.us to tag your posts even if you do have blog categories."

When you have that installed, it will alter your 'create new post' page by adding a 'Tag' window. The first time you add a tag (ie category) there, a pop-up window will appear. In the first one I put 'Categories'. The second one I left blank. The third one I put http://del.icio.us/ .

Now write your post as usual. At the end decide what categories you would like to assign to that post and put them in the 'Tag' window. To keep my list within reason, I made a list ahead of time to see exactly what kind of categories I wanted and I chose from them. When finished with that, click 'Publish Post'. At the next page that comes up, beneath 'Files published...100%' you will see a new line from del.icio.us that says 'Link at del.icio.us'. Click on that and it will take you to your new del.icio.us account. Click 'save' and it will start a list of your tags.

Now, to set up a nice list of categories in your sidebar, I found the information given at del.icio.us Tagrolls How-To very clear and easy to follow. Del.icio.us also explains how to set it up and lets you adjust the tagroll until it is just how you want it.

The down side to this is you have to go back to each post and assign one or more tags. But, it is a one time thing and worth the effort.

One last thing. By default, blogger will list your tags vertically. I really don't care for that, but ecmanaut has a way to make them horizonal...and even add an icon if you want!

A drop-down menu alternative

I had a problem. I wanted a drop-down menu for my list of BlogU Picks. For the past few days I have tried several different types. The problem I found is I simply don't like the usual drop-down menu. It is far to 'clunky' for my liking. So I thought how about a simple CSS drop-down menu? Well, they are prettier, but what an oxymoron!! There is nothing simple about the CSS drop-down.

Problem still not solved. So, now I must think outside of the box. (So to speak.) My desire was to corral a list of links that will only be getting longer. I did not want it to run on forever in the sidebar.

Then it hit me. Make a new blog the mirror image of this one. (Simply copy the orginal template and paste it in the mirror blog's template section.) Remove all the extra 'sidebar' items that I didn't want. Add a couple of "Return Home" links. After that I created a post with all of the BlogU pick links I have so far. In the future to add a link, I go to the mirror template and edit the post. Last but not least, I added a link in the sidebar of this blog linking to it! Check it out!!

Blockquote background color

I have been looking for a way to make my content easier to read. I found a method of adding color to a blockquote which separates it from the rest of the text. You can use any color that will work with your color scheme. I chose a very light blue called "#EFEFF7". I like it because it doesn't compete nor clash with my blue lettering or heading. As a matter of fact, I downloaded a free color picker from Iconico and picked a color from my logo. If you want to simply pick a color from a chart, HTML Colors is a great place to do just that.

To have color in the blockquote background on your blog, add this to your stylesheet:

blockquote {
background:#your color here;
}

I found this over at Blogger Forum in a post by CptCanuck.

Reposition your entire template under the NavBar

I have a personal journal that I removed the navbar because it covered the top title and didn't look right. Thanks to Noah Bulgaria who left this suggestion in my comments: "Right after the first body tag, add breaks." I was able to restore the navbar. Simple. Works. I tried several more complicated ways to get the template to start under the navibar, but this is the only way that worked for me.

Here is what I did:

Under the
<head>
I added
<br><br>

Works like a charm!