Easy favicons ready to use

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 image to use for the favicon which if you trying to create in the small size allowed for favicons, is no easy task (unless you use an existing photo and shrink it to size like mine )

To cut the hassles, Favicons4free have created a huge library of ready to use favicons together with the codes you need to installthem. Just click on one of the categories (examples - animals, flags, birds, etc.) and in the new page, copy the single line of code next to the favicon you want, 


then go to the template editor and paste the code just after ]]></b:skin> and just before </head>, preview and if everything looks all right, save template. (span style="color:red;">

Note that the codes given by Favicon4free is not compatible with XHTML which requires ALL HTML tags to be closed. For example, the given code is 

<link rel="shortcut icon" href="http://www.Favicons4Free.com/icons/flags/malaysia.ico">

You will have to add a matching closing tag </link> at the end of the code so that it become 

<link rel="shortcut icon" href="http://www.Favicons4Free.com/icons/flags/malaysia.ico"></link>

or alternatively edit the tag to include a backslash / to make the tag self-closing, like this:

<link rel="shortcut icon" href="http://www.Favicons4Free.com/icons/flags/malaysia.ico" />

(note the space in front of the backslash / and the (red) backslash itself just before the last "greater than" symbol.

This was tested on a blog Guide to Malaysia for which the country's flag was selected for the favicon.


www.bloggertipsandtricks.com

Read more »

Template Designer: How to increase entire blog width beyond maximum

The new Blogger Template Designer has made it very easy to change overall blog width as well as the width of the main column and the sidebars. All you need to do is to sign into Dashboard, click DESIGN > TEMPLATE DESIGNER > ADJUST WIDTH and you will be provided with sliders to drag and drop to whatever values your heart desires, then click APPLY TO BLOG to save the new settings (see screenshot below):

Not only that, you can view the result of your selected changes below and if horrified by your changes, just click RESET WIDTHS TO TEMPLATE DEFAULT. (Note that while there is no slider to adjust the width of the main column, it would be indirectly set by the overall width - whatever width you have set for the sidebar)

However with the Simple (and I believe the others too) template, the overall width is limited to maximum 1000px. So what do you do when you want your overall blog width to be greater than 1000px.?

Well, while in the DESIGN tab/mode, click EDIT HTML to open the template editor and search for these codes (use ctrl+ F and search for, say, <b:template-skin> or any portion of the codes below:

<b:template-skin>
<b:variable default='930px' name='content.width' type='length' value='1000px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>

 then change that 1000px to whatever values you fancy and you would have changed the overall blog width.

BTW the default for the overall blog width is 930px which is roughly the value you would need to set in order to optimize your blog for 1024x768 screen resolution which is what many web designers are doing because the previous lowest denominator 800x600 screen is now used by very few people.

www.bloggertipsandtricks.com

Read more »