Sunday, October 11, 2009

How to set my blog's icon (favicon)

A favicon (short for Favorite Icon) is a little image displayed in the browser address bar and tabs or in bookmarks, like this in the address bar of this webpage above.

The very first step to installing a favicon is the creation of the small size image. It is not a easy task to crate a icon that you want (unless you use an existing photo and shrink it into small size like mine).

If you just want to use a ready made icon, here is the place to grab : favicons4free.com Just click on one of the categories (examples - animals, flags, birds, etc.) and select a icon that you want, copy the single line of code next to the favicon.

An then go to the template editor and paste the code just after ]]> and just before /head> .
]]>
----->

But the code from favicons4free.com is for HTML and it is not compatible with XHTML. So, you need to put "/" and end it like this "/>".

How to change background

Sometimes, the sidebar color code in the template to change the background color of the sidebar. The CSS (Cascading Style Sheet) of every template is written different and if something is missing, all you need to do is to add the relevant missing part in.

For example, in the standard Blogger Scribe template, this is the section in the CSS (Cascading Style Sheet) for the sidebar:

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

There is nothing mentioned about background. So what I did was to add a single line of the color code that you want.
#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background: #FFFFFF;
}

How to change alignment of the date header

Open the template editor by going to Dashboard > Layout > Edit HTML and look for these codes:
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
and change it to whatever alignment you want

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
text-align:center;
}