Wednesday, June 21, 2006

Favicon for your Blogger blog

UPDATE 22 July 2008: The website on which this post is based is no longer active. Please refer to favicon generator and host for an updated post.

A "favorite icon" or favicon (pronounced fav-eye-con) is a 16x16 pixels icon that appears next to a website's URL in the address bar of a web browser. If you are using a browser that supports tabbed browsing, the favicon will also appear next to the page's title in a tabbed document interface. If you look at the top of this page, at the left hand corner of the address bar, you will see a small graphic of a portion of a fake red-yellow-black "for Dummies" book cover (This has changed to a rare photo of myself laughing). That is the favicon for this blog. If you are using FireFox or Opera, you will also see that icon in the tab. If yours is a personal blog, a good icon will be your personal photo.

Adding a favicon to your blog is a good way to distinguish your blog from the millions of other blogs. To add a favicon, you need to generate a .ico format file, a place to host the file and add 2 link elements in the <head> section of your template. To generate the .ico file and to host it, you can go to MyFavatar. You need to have ready a roughly square graphic saved to your hard disk.

This was how I added the favicon to this blog. I had a fake "Blogger for Dummies" book cover generated by Dummies Book Cover Maker 2006. You can see the graphic here. signgenerator.org can generate other types of sign for you. (If yours is a personal blog, a good graphic to use will be your personal photo). I then use the free Irfanview to crop the bottom-right of the graphic and saved it to the hard disk. I then uploaded it at MyFavatar which also generated the codes for me to paste into the <head> section of my template.

(for instruction on how to get the script to paste into your blog's template, refer to update below)

Update: I have since changed the favicon to a photo of myself laughing. It was also cropped from a larger photo using Irfanview photoeditor (click "BACK" button to get back to this page).

Update: I have discovered that the favicon doesn't appear in Internet Explorer 6. It works for FireFox and Opera.

Further update: It does work with IE7. See the comments.

Update 15 February 2007: A reader complained of difficulties of making this work in New Blogger. I did exactly the same thing as what was described in this post for the New Blogger blog Testing Blogger Beta (now New Blogger). For the convenience of everyone, I paste below the relevant part of the template from that blog in the scrollbox below:

<head>
<!-- My Favatar -->
<link href='http://favatar.myfavatar.com/blogsmith.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='http://favatar.myfavatar.com/blogsmith.png' rel='icon' type='image/png'/>

<title><data:blog.pageTitle/></title>


UPDATE: Received a request for help to get the script for the favicon. So what I did was to go through the steps to add a favicon (my mugshot) to Blogger for Dummies. I list down the steps that I recorded as I generate the script below, with some screenshots to make things clearer:

register
verify email address
sign in
click FAVATAR
click CHOOSE
upload favatar
browse to the image saved in your computer
click SUBMIT
message will say Favatar changed.
Click CODES at the top of the page
under FAVATAR CODE, click EDIT
enter URL
enter Title
choose Category
write Description
click SUBMIT
Message: Blog info successfully updated
click CODES at the top of the page
copy script from Favicon Code
favatar codes
sign into Blogger account
in the Dashboard, click LAYOUT of the blog
click EDIT HTML
look for head tag tag
paste scrip just below the head tag tag.
preview and confirm you can see your favicon in the address bar
save template


Books from Amazon

The Rational Guide to Google Blogger (Technical accuracy is assured by Biz Stone, Former Senior Specialist on the Google Blogger Team)

Book: Blogging for Dummies

NEWER POST    OLDER POST

Friday, June 09, 2006

How to make sidebar display on the left and main column display on the right

The default for the Blogger Minima template and most standard Blogger templates is the main column is on the left and the sidebar is on the right. This may create problems when you often post long links or wide images which may exceed the width of the main column. The long links or wide images will then extend into the sidebar and cause it to slide to the bottom of the page. (Note: Read update below). To overcome this, you may want to modify the template so that the sidebar is on the left and the main column is on the right. To do this, look for this block of codes in the template:


/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
}



and change the text colored in red to the following:


/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
float:right;
}
#sidebar {
width:220px;
float:left;
}



Update: I have tried uploading a 550px wide photo and this caused no problem in FireFox and Opera, but caused the sidebar to slide down to the bottom of the page in Internet Explorer.

Books from Amazon

The Rational Guide to Google Blogger (Technical accuracy is assured by Biz Stone, Former Senior Specialist on the Google Blogger Team)

Blogging: Genius Strategies for Instant Web Content by Biz Stone, former Senior Specialist on the Google Blogger team

NEWER POST    OLDER POST

Friday, June 02, 2006

Blogger template tutorial: 3 column template

UPDATE 6 April 2006: This post is for blogs using the old classic Blogger template. For those using New Blogger templates, refer to
New Blogger 3 column templates modified by Ramani
New Blogger 3 column template modified by Charlemagne Stavanger of Blogcrowds
Dots 3 column New Blogger template with Header modified by Charlemagne Stavanger of Blogcrowds
New Blogger 3 column templates by Isnaini
New Blogger 3 column templates by Thur
Ramani's New Blogger 3 column fixed width Neo template




Many bloggers using large screen have complained of the wasted white space left on either sides of the blog contents. Many have also indicated their desire for a third column. Thur has made a 3 column clone of the Blogger standard Minima template, and if you are looking for a nice 3 column template for your blog, you can download it from Thur's 3 column Minima clone (close new window/tab to get back to this page). If you want to see an example of a blog using his 3 column template, surf over to Digital Camera - Choosing and caring for your digital camera (close new window/tab to return to this page). There are a few things to take note of:

  • The blog will look very nice when viewed with a large screen. However, to see how it will affect those with 800x600 resolution, try typing (or pasting) this into the address bar and press ENTER: javascript:top.resizeTo(800,600). It will resize the window to 800x600. You will notice relatively wide sidebars on either sides and the main content squeezed into a narrow column in the middle.

  • There will be a large gap between the title of the first post and the body of the first post. This can be rectified by going to SETTINGS > FORMATING and setting the ENABLE FLOAT ALIGNMENT to NO. This should solve the problem. However, suppressing the markup may result in layout problems when using left or right alignment for images."


The first setback can be overcome by reducing the width of the sidebars. To see an example of this where the sidebar has been reduced from 220px to 160px, look at Television Network. Try typing (or pasting) javascript:top.resizeTo(800,600) into the address bar again to resize the window to 800x600. Notice that this time the center main column is not squeezed into a narrow column.

To modify the template to make the blog look like this, look for this block of codes in the style sheet (solution provided by Thur):


/* Content
----------------------------------------------- */
#content {
margin: 10px 20px;
padding: 10px;
text-align:left;
}
#main {
padding: 10px;
margin: 0px 240px 10px;
}
#sidebar-r {
float: right;
margin: 0px 0px 20px 5px;
}
#sidebar-l {
float: left;
margin: 0px 5px 20px 0px;
}
#sidebar-r, #sidebar-l {
width: 220px;
padding: 0px;

Change the figures in red to the following:

/* Content
----------------------------------------------- */
#content {
margin: 10px 20px;
padding: 10px;
text-align:left;
}
#main {
padding: 0px;
margin: 0px 180px 10px;
}
#sidebar-r {
float: right;
margin: 0px 0px 20px 5px;
}
#sidebar-l {
float: left;
margin: 0px 5px 20px 0px;
}
#sidebar-r, #sidebar-l {
width: 160px;
padding: 0px;
}



PsycHo Free Template Generator

You may also use the PsycHo free template generator to generator your own 3 column template the way you want it. You may view an example of a blog using a 3 column template generated by the PsychHo template generator: The Television Guide.

Firdamatic


Firmatic can also generate either a 2 column or a 3 column template for Blogger. With Firmatic, you have a choice of putting a graphic into the Header together with a title. You will have to choose the header font (serif/sans-serif), font color, etc.

UPDATE: Ramani has done a nice hack for a 3 column template for Blogger Beta. Have a look at Blogger Beta - 3 column template

Books from Amazon

The Rational Guide to Google Blogger (Technical accuracy is assured by Biz Stone, Former Senior Specialist on the Google Blogger Team)

Publishing a Blog with Blogger: Visual QuickProject Guide

NEWER POST    OLDER POST

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics