Remove the NavBar

There is some question as to if this is legal to do or not. I'm not here to debate that. Personally, I like the bar. But, on the other hand, I have a personal blogger journal, and the bar covers up the top title...really messing with the overall look of my blog. I have tried various fixes to attempt to get the template to start after the navigation bar, but none would work. Finally, as a last effort, I removed it. I first attempted this script inserting it after </head>. Here is the code I used:

</head>

<script language="JavaScript">
var elem = document.getElementById("b-navbar");
elem.parentNode.removeChild(elem);
</script>

But, it didn't work for me. I'm only including it here because it may work for you. The code that did the job I found at Blogger Templates:

#b-navbar {
height:0px;
visibility:hidden;
display:none
}

Customizing your header: another way to add an image

I found another way to add an image to your header at Blogger Forum written by thrbr.

Look in your Minima template for:
- - - - - - - - - - - - - - - - - - - - - - - - - -
<div id="header">

<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
<p id="description"><$BlogDescription$></p>

</div>
- - - - - - - - - - - - - - - - - - - - - - - - - -
and replace <$BlogTitle$> with <img src="http://your_address/your_image.jpg" border="0"/>
- - - - - - - - - - - - - - - - - - - - - - - - - -
<div id="header">

<ItemPage><a href="<$BlogURL$>"></ItemPage>
<img src="http://your_address/your_image.jpg" border="0"/>
<ItemPage></a></ItemPage>

<p id="description"><$BlogDescription$></p>

</div>
- - - - - - - - - - - - - - - - - - - - - - - - - -
1) Be sure to use an absolute path for the image!
2) No need for that <h1></h1> anymore;
3) If you only want that image you can delete that <p id="description"><$BlogDescription$></p> too!

Clickable Gmail link

In the sidebar I have ...a clickable email link to my gmail account. I found this at E-Mail Icon Generator. The instructions they gave were rather vague. (At least vague to me. I need indepth explanations.)

I finally figured out how to make the image clickable. Add this code to where ever you want the link substituting your own information in the red areas:

<div class="component">
<a href="mailto:your email address here"><img border="0" src="the url they supplied" border="0"></a>
<div class="componentContent">
<p align="center">
<small><a href="http://services.nexodyne.com/email/">Get your GMail button here</a></small>
</p>
</div>
</div>

Make your template editor larger

For this little gem we can give thanks to Browservulsel. You will need:

• Mozilla Firefox
• Greasemonkey

If you have Firefox you are already half way there. Install Greasemonkey. I didn't do anything special there...it was easy. Just follow their instructions.

To install the script, go to Browservulsel and right click on "Blogger Large Template Editor" and select "Install user script...".

When you go to your template to edit it, you will see a much larger editor!

Brilliant Button Maker

Brilliant Button Maker is a fun little site. I made this 'chicklet' with the program there. What made them a little better is the fact that you can add your own graphic to the button instead of only a colored background!

The "BlogU Pick" List

I enjoy reading other blogs. Sometimes looking for great content and sometimes looking for an interesting layout. Sometimes for both. I have decided to add a new link section to my blog...The BlogU Pick List. This section will focus on design. I will add links to blogs that are interesting, creative , different or well designed.

If you are chosen you can put this chicklet on your blog!

If you know of an excellent site, let me know. If I like it, I will include it in The BlogU Pick List. You can send your choices to the email address listed.

Just to get things going, I found a blog that made me look it over. Usually I'm not a fan of a dark background (except for photoblogs), but the use of purple and gray text is very pleasing. The background is not plain...it has a soft glow on the left, but it doesn't compete with the text. The 3 column layout with light double borders adds interest. Plus I liked all the added touches in the sidebars. It wasn't boring. And it wasn't gawdy. Take a look at ShortNCurley!

Customizing your header: changing the font look

I wanted to change my fonts a little...so I dug around the template and unearthed this. To get the blog title to not be all upper-case I had to edit this:

#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}

I removed 'text-transform:uppercase;'. That allowed BlogU to look like it does. After that I wanted to change the description font. I found this to do that:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:700px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

I changed the color and by removing 'color:#999;''and in it's place put:

color:#c60;
font-style:italic;
font-weight:bold;
}

If you need some more options on changing the fonts you can go to w3schools and Lissa Explains it All.

Customizing your header: add an image

I just love the Minima template. It is so versatile. New discoveries keep turning up. My last great discovery was how to tweak the heading to my liking. It involves:

1. finding an image and cropping it to fit (once again using Irfan View)
2. upload this image to your web host
3. put this code in your template between the <style> and </style> tags in your blogger template:

   
   #header {
   width:660px;
   margin:0 auto 10px;
   border:1px solid #ccc;
   background: #fff url(http://your image.jpg) no-repeat top right;
   }

4. change the URL between the parenthesis from http://your image.jpg to the URL assigned by your web host

You notice that it says "no-repeat top right". That moved my image to the right. You can change that to left or center. Depends on your design. Late one night I was surfing and found a great use of a small graphic on the left...if only I had saved the site. But, that was my inspiration.

Also see: The Gimp: New Custom Header

Open on most recent post

This is a simple way to open your blog on your most recent post. Put the following code between the <head> and </head> tags in your blogger template:

<blogger><Mainpage>
<script language="JavaScript">
<!--
document.location.replace('<$BlogItemPermalinkURL$>');
//-->
</script>
</Mainpage></blogger>

Now every time your blog is opened, the reader is automatically at your most recent post.

Adding a Favicon

This was more fun! First, let me explain what a 'favicon' is. See the little icon next to my URL in the address bar that looks like this?

That is my favicon. I happened across it at MpP . They have a wonderful collection. Delta-Tango-Bravo was another favorite site. Both have extensive collections. Or, if you have your own graphic, several sites have favicon generators. The one I enjoyed playing with is Favicon from Pics . Once you find (or make) a favicon, you must save it as an 'ico' file. A great graphic viewer (free I might add...I'm all about free) is IrfanView. Now, upload that ico file to your webspace. I use Ripway. This is a free web hosting and online file sharing service.

To get the favicon on your blogger, you need a code to add to your template, and this is it:

<link rel="shortcut icon" href="http://myfavicon.com/favicon.ico" />
<link rel="icon" href="http://myfavicon.com/favicon.ico" />

Replace "http://myfavicon.com/favicon.ico" with the URL of where your webspace stored your ico file, & paste the code between the head tags of your blog. The favicon will now appear in most browsers address bar and bookmarks. (Not sure about the rhyme or reasoning here, but some do...some don't.) Added bonus! If you use Mozilla Firefox (why wouldn't you?) it will also show up on the tabs!!!!

Update: Favicons only appear in IE if the site is in your bookmarks. If the site is not bookmarked, I have discovered a little trick. Left click on the 'e' in the address bar and jiggle it a few times. The favicon will show up!

UPDATE:

12/29/06 - the head tags look like this: <head>and</head>

1/8/07 - it was brought to my attention by a reader, T.M., that the favicon can be saved as a 'png' file and it will work as well.

12/5/08 - Blogger has done things to our favicons. Bad things. But, there is a fix. Read about it: Fix for Broken Favicons

What is RSS?

You see those little letters everywhere. RSS this, RSS that. To tell you the truth, I'm not completely clear. What I do know:

• RSS is a 'means' to get your blog out there.
• It is an easy way for your readers to know when you have new content.

Here is an explanation from Wise Geek . This is another excellent article that discusses RSS. Girl Interrupted: Blogger HOWTO: Syndication. When I find out more, I will post.

First things first

You want a blog. You want the blog to be a little different. But nice. Well, that is what I wanted, so I'm going on that assumption.

I'm not going to walk you through the sign up process. Click on

and it will take you to Blogger. You can sign up for one there. It is pretty simple and if you can't get that far, then you are beyond my help. Have a friend sign you up.

But, it is during this sign up process that you must think of a name for your blog. Simple? One would think. It is the hardest part. Keep in mind that you can always change the name in the "Settings" >section, but you cannot change the URL. (Maybe you can, now that I look around the "Settings/Publishing" section, but it is only if the URL is still available.) I chose "http://bloggeruniversity.blogspot.com/". It is simple and states my intentions. The actual title of my blog is BlogU. Something that reflects the URL. I like that, but I like strange things, and I stress over details.

You are also picking out your template from several offered by Blogger or one by a third party. I decided to use one of theirs, Minima, for simplicy's sake. I really like the clean look of it. After awhile, I will talk more about adding a third-party template which involves uploading graphics to a server. For now, this is what I will cover.

Well, now you have a blog, a name and a URL! Congrats!!!

Introduction

I'm writing this blog with Blogger in mind. I do not have experience with other systems...and bloody little experience with Blogger! This will be see one, do one, teach one. Already I am ahead of the game. I have seen several blogs! Plus, I have made a private journal which I did extensive tweaks (at least in my world they were extensive) to a blog template not offered by Blogger.

I like HTML, CSS and changing the coding in the templates. I do know a little about HTML. (Notice I didn't say anything about knowing CSS). It was all self taught. A few years ago I made a web site completely from hand coding the HTML. But, I have forgotten much of it. I don't even think CSS was an option at that time. Now I am brushing up on my HTML skills and learning CSS.

In BlogU, I will show you any changes I make to this blog. I will post any articles of interest concerning blogging. I will make all instructions as simple as possible, so even if you have no HTML experience, you will be able to edit your template with confidence.