bloggers resources

Wednesday

Adding favicon icon to Blogger URL

When you visit the sites or bookmark them, these icons will make these URLs stand out. These are “Favicons” or “Favorite Icons”. You would first need to have an icon which you would like to use, bearing the extension .ico format. If you search your hard disk, you might find some icons which are generic. I would suggest that you create one to represent your own unique identity. There are quite a number of free icon editor software which you can download from the net.

As for myself, I went to vso software site and downloaded a very small program called VSO Image Resizer (download) which can transform images into .ico format. Run the program. It is rather simple to use. While you can create icons in 2 sizes – 16x16 and 32x32 – I would think a 16x16 icon is preferable since it is readable in most older browsers. and safe it under jpg, gif or png format.

If you do not wish to download any software, you may also try creating an icon online. Just enter the keywords “online icon generator” into your Google search bar, and you should be able to find several programs that you can try.

Once you have created an icon, save it into your hard disk. The next step of attaching the icon is a little tricky. The only method to use will be to upload the icon into some free photo hosting such as photobucket and create a link.

Once you have done that, take note of the URL of your icon. If you are using photobucket , you will see that the file is stored under a directory which looks like this:

http://i245.photobucket.com/albums/gg69/dk/icon-1.ico

Go back to your Blogger dashboard and under the Template tab, go to “Edit HTML”. Near the top you will see a line like this:-

Copy and insert the following code below the line:-

Examples icon file format:

IF you use png. or jpg. or gif. format file, its code should be like this :

Examples png. files format:

Examples gif. file format:

Examples jpg. file format:

Label List and Label Widget open in new window

If you have created a list of Labels through Template -> Page Elements -> Add a Page Element, you can also have your Labels open in new browser windows or tabs.

Scroll to these lines and add the code in red.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url' target='_blank'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>

Link List open in new windows

To have the Link List open in new windows when clicked, we first go to Template -> Edit HTML. Check the “Expand Widget Templates” box. Backup your template by copying the template and saving it in an MS Notepad text file. You can also click the “Download Full Template” link that appears right after the words “Before editing your template, you may want to save a copy of it.”

<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>
</b:loop>

Thursday

Scrollbar in One Widget

We can add the scrollbar only to one or several of the widgets. To do that, we must first know the ID of the widget. When we are at Template - Edit HTML, scroll towards the bottom of the template code. You will see something like this:-

In this example, we have added a Label1 Page Element into our Sidebar and the ID for this widget is “Label1”. If we have more link lists, the IDs will be “Linklist2”, “Linklist3” and so on. Also, we have inserted a HTML/JavaScript Page Element and the ID is “HTML1”. The third widget we added is a Label list and the ID is “Label1”. Look at your template and identify the widget. Take note of the widget ID.

Now add the overflow property into the stylesheet under /* Sidebar Content */ . Insert this piece of code.

#Label1{
height:200px;
overflow:auto;
}

In this example, we applied a height of 200px to the widgets. This can be changed to other values. Look at both sidebars. Notice the neatness and symmetry. Be careful though if you have AdSense Ads in the sidebars. It is against AdSense TOS to cut off the Ads and put scrollbars to their Ad Units.

/* Sidebar Content
----------------------------------------------- */

#Label1{
height:200px;
overflow:auto;
}

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

Bloggers Resources