Thursday, September 21, 2006

Making links in a Blogger Beta link list open in new window

Note: Please see updates at bottom of post

Note: As always, whenever you make changes to the template, backup the current template PLUS the Page Elements first. Refer to Backup and edit New Blogger template or Backing up and changing New Blogger template. Remember also to edit your Page Elements one by one and save them into preferably the same folder as the one where you save the backup template. Some Page Elements may be deleted or become empty Page Elements if you reload the backup template.

In Blogger Beta, if you add a Link List, the links created open in the same folder by default.

Here is how you can make links open in new windows/tabs. Sign into Dashboard, for the relevant blog, click LAYOUT, then EDIT TEMPLATE. Check EXPAND WIDGET TEMPLATES. You will need to look for a block of code. I find the easiest way to find line of code in long template is to use the "Find" function in Notepad. (Note: See update 28 July 2007 at the bottom of the post)

After the template has been expanded, click inside the template window and press ctrl+A to highlight the whole template and then click ctrl+A to copy it into the clipboard (or click inside the template editor window, right-click and chose "copy"). Open a Notepad file, paste the expanded template into the Notepad.

Look for this block of codes:

<div id='link'>
<b:loop values='data:links' var='link'>
<li><a expr:href='' ><></a></li>

Look particularly for this code:
<li><a expr:href='' ><>

If you have done as suggested, that is, paste the expanded template into Notepad, searching for that line of code will be much easier. Click EDIT in the menu bar at the top of Notepad and chose "Select all" to highlight the whole template. Click EDIT > FIND in the menu bar again and enter part or all of the code you want to look for into the "Find what" box. Notepad will find that and highlight it.

Replace it with
<li><a expr:href='' target="new" ><> (in other words, add target="new" after expr:href=''. Make sure there is a space between expr:href='' and target="new" (see update below).

Click inside the edited template in Notepad, press ctrl+A to highlight the whole edited template, then press ctrl+C to copy into clipboard (or right-click inside the Notepad and chose "copy"). Go back to the template editor window. The original template should still be highlighted. Click the DELETE key. The template editor window should now be empty. Click inside the template editor window and press ctrl+V to paste what you have copied into clipboard (or right-click and select "paste").

Preview to ensure everything is OK. Save template and check that the links actually open in a new window. This has been done for this blog. Try clicking on the links in the link lists (Blogger Resources) and confirm that they actually open in a new window/tab.

Acknowledgement: This is a blog for testing. This post was in response to a reader who asked how to make Link List in New Blogger open in new window and if I remember correctly, was probably used to test the method given by Linklists don't open in a new window and new hacks and this post is probably adapted from his hack and made simpler for people to implement the hack.

UPDATE: 2 person commented of problems executing this hack. Read the comments. I retested it for this blog Good Health Information and confirmed the hack work. Check for yourself. The link list is titled "Blogger Resources" and is the second last in the right sidebar. Click on the links and confirm for yourself that they open in new windows/tabs. Just a note. Make sure that there is a space between

Update 28 July 2007: Instead of using Notepad to help you locate some section of the template, you cab also press ctrk+F to get the section you find direct in the template editor window: use ctrl+F to find section of code direct in template editor window

Update 10 August 2007: Many webmaster are of the opinion that making links open in new window/tab is a bad practice and may drive visitors away and it should be left to visitors whether they want link to open in the same or new window/tab. I have made previous survey and have found the majority of those who responded prefer links to open in new windows/tabs, which is also my preference as I find closing new windows/tabs easy to do. Further, not everyone is Internet savvy and most will not know how to make link open in new winddow/tab for a link configured to open in the same window. However, I like to keep my visitors and have no wish to discourage any from visiting again. I have this set up a Poll at the bottom of the left sidebar of Blogger Tips and Tricks. However, Polls are not working now. Blogger is aware of the problem and is trying to solve it. Hope they get it working soon. You may be interested in keeping track of that poll.

Wednesday, September 20, 2006

Testing adding of Google AdSense SearchBox

UPDATE 24 December 2006: You can now add a working Google searchbar directly via a "Add a Page Element" in the Layout now. Here is the message from AdSense Help Center: "I'm happy to let you know that we have resolved the issue with
implementing AdSense for search on blogger beta pages. Please regenerate
the code from inside your AdSense account and add the code to the
HTML/Javascript page element." I have tested it with a number of beta blogs, including this one, and it does work. So this hack is no more necessary.

Someone complained of some problem when putting Google AdSense SearchBox into a Blogger Beta blog. It seem the button gets misplaced and the script gets changed. So I am adding the SearchBox to this blog Guide to Malaysia to see how it goes. I put one in the left sidebar. You can see it on the site itself now, but I will probably be changing or removing it later, so I am putting a screenshot (Internet Explorer) of it below for posterity:
<br />Google SearchBox
Here is how the Google SearchBox look in FireFox (note that the text extend into the main column):Google SiteSearch Box, FireFox

I have put another one at the footer of the blog, which you would also be able to observe now, and which I will also likely be changing or removing later. So, here is the screenshot:
Google SearchBox


The button for the WebSearch seem to have been displaced, more so for the one in the footer. The displacement for the one in the sidebar may be to take into consideration the narrowness of the sidebar. I don't know. The search box not only look ugly, it also does not work. Try typing some search terms into the search box. For some unknown reasons, however many times I click on the CAPS LOCK key, the search terms I type in are in upper case letter. And worst, when I click on SEARCH, nothing happens.

Changes to the scripts

The scripts also have been rearranged by Blogger. Other than rearrangement, I haven't spotted any change yet, but that may be because I didn't look hard enough, and the scripts are difficult to compare because of the rearrangement. Anyway, I paste below the scripts for you to see.

Scripts from Google for the sidebar

<!-- SiteSearch Google -->
<form method="get" action="" target="google_window">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="">
<img src="" border="0" alt="Google" align="middle"></img></a>
<td nowrap="nowrap">
<input type="hidden" name="domains" value=""></input>
<input type="text" name="q" size="31" maxlength="255" value=""></input>
<input type="submit" name="sa" value="Search"></input>
<td> </td>
<td nowrap="nowrap">
<input type="radio" name="sitesearch" value="" checked="checked"></input>
<font size="-1" color="#000000">Web</font>
<input type="radio" name="sitesearch" value=""></input>
<font size="-1" color="#000000"></font>
<input type="hidden" name="client" value="pub-9408074091704638"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="channel" value="9774846827"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1"></input>
<input type="hidden" name="hl" value="en"></input>
<!-- SiteSearch Google -->

Script obtained from source code of blog

<!-- SiteSearch Google -->
<form action="" target="google_window" method="get">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" height="32" align="left">
<a href="">
<img border="0" alt="Google" src="" align="middle"/></a></td></tr></table></form>

<td nowrap="nowrap">
<input value="" name="domains" type="hidden"/></td>
<input maxlength="255" value="" name="q" size="31" type="text"/>
<input value="Search" name="sa" type="submit"/>

<td> </td>
<td nowrap="nowrap">
<input checked="checked" value="" name="sitesearch" type="radio"/></td></tr></table></td></tr>
<font color="#000000" size="-1">Web</font>

<input value="" name="sitesearch" type="radio"/></td>
<font color="#000000" size="-1"></font>

<input value="pub-9408074091704638" name="client" type="hidden"/>
<input value="1" name="forid" type="hidden"/>
<input value="9774846827" name="channel" type="hidden"/>
<input value="ISO-8859-1" name="ie" type="hidden"/>
<input value="ISO-8859-1" name="oe" type="hidden"/>
<input value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1" name="cof" type="hidden"/>
<input value="en" name="hl" type="hidden"/>

<!-- SiteSearch Google -->

UPDATE: AdSense Help advised to add the script direct into the template, but didn't gave instruction how. I did some trial and error, and succeeded in adding a working searchbox in this blog: Star Home Improvements. The searchbox in the first blog Guide to Malaysia should also be working as I have updated it.

How to put a working AdSense SearchBox in a Blogger Beta blog

I first tried adding a blank Page Element in the Layout, but got the error message "Required field must not be blank". Next I tried to add a Page Element again, (HTML or JavaScript), but this time, I added <!-- Google SiteSearch Box --> to the page element editor, and saved. This time, the Page Element saved successfully. There were 3 other HTML widget before I added the widget I want to use for the searchbar, so the widget should be widget no. 4 I then right-clicked on View Blog and selected "open in new tab". In that site, at the menu bar, I clicked "View Source" and looked for in the source code. I found it at the bottom (click on screenshot to enlarge it and note the HTML4 circled in red):
Blogger Beta template after adding guide text
I then opened the template editor (with the "Expand widget template" ticked) and searched for the section which contain the term HTML4. I found it towards the bottom of the template. See screenshot (click on image to enlarge it):
Blogger Beta template after adding adsense searchbox script
As you can see, I added the AdSense searchbox script after HTML4 and after the comment tag. I previewed, the searchbox appeared OK, I saved and got a working SearchBox in the footer. Only thing is, I distinctly remembered clicking the search when generating the script, but in the resulting SearchBox, the search Web got ticked instead. Also, when I examine the original script generated by AdSense, and the script I see in the source code, the script have been rearranged again, and I see some changes. Hopefully, this will not lead to us going against the AdSense TOS. Anyway, I'll write to AdSense Help and post an update here later.

UPDATE 2 November 2006: The problem regarding the radio button for the Websearch being displaced have been rectified, so now you will get a properly presented working searchbox.

Footnote: I should have made the title Testing adding or Google AdSense SearchBox for Blogger beta instead of what you see in the title now. The post title is important for search engines and doing this may help those using Blogger Beta trying to find information on how to add a working Google AdSense search box to find this post. This post is already indexed by the search engine. Changing the title will cause the URL to this post (permalink) to change, and that means whatever links I get in the search engine result page will become dead link. Additional information for those thinking of changing their post title.

Wednesday, September 13, 2006

Adding a graphic to your blog header

Update 25 September 2008: The very nice graphic at Guide to Malaysia has been replaced by a leaderboard ad unit from Nuffnang. When there are no incoming ad, the ad unit is minimized to a tiny logo Nuffnang logo.

For an example of a Blogger Beta blog with a graphic above the header, surf to Cheap Airfares: Air Asia, Malaysia's success story and Testing Expandable Post Summary (close new windows to get back to this page). The difference between the two is that the image in the first example is clickable whereas the image in the second example is non-clickable. If you are in the archives or in an individual post page of the first example, clicking on the graphic will take you back to the main (home or index) page (or any other sites you choose, depending on what you want). Try clicking on the graphic in the first example and see where it takes you.

Adding a "Add a Page Element" (Page Element is now called Gadget) widget in the Blogger Beta Layout

This is how you can add a graphic to your header. Sign into Dashboard. For the blog you want to modify, click LAYOUT, then click EDIT HTML. Then look for this block of codes in the template:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Replacing Blog Header (Header)' type='Header'/>

Change maxwidgets='1' to maxwidgets='4'(or any other number greater than 1, or even leave a number out, then there is no maximum) and change showaddelement='no' to showaddelement='yes'. (you may also leave out the figure in maxwidgets='' in which case the number of widgets you can add to the header is unlimited). So the section should now be

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Replacing Blog Header (Header)' type='Header'/>

Click SAVE TEMPLATE. Then click PAGE ELEMENT tab to go back to LAYOUT. You will see an extra "Add a Page Element" above the Header.

Adding unclickable graphic in the Header of Blogger beta blog

Click "Add a Page Element" and a pop-up will appear. Select "Picture" and click "Add to blog". In the next page, there will be 4 fields and some radio buttons for you to click. The fields are "Title", "Caption" and two fields for image. It is best to leave the title blank. If (rarely) you want a caption below the image, then fill in that field with your caption, otherwise leave it blank. If you have your photo stored on your computer, click "Browse" (the radio button for "Browse" is already ticked by default), then select the photo from your computer.

You may also tick the radio button to load an image already hosted on the web if you know the URL, but if the image is not hosted by you, there may be copyright and bandwidth issues involved. If you select this option, just fill in the field for the image URL and click "Save changes". For this, the safest option is to tick "Shrink to fit" as you have no control over the size of the photo.

The advantage of this is you don't have to deal with any HTML, but the disadvantage is that the image is not clickable like in the first example: Testing expandable post summary (close new window to get back to this page).

Adding a clickable graphic to the Blogger Beta blog Header

There is another way to add a graphic to the header. First, you need to host your image somewhere on the web. You can host it with Photobucket (close new window to get back to this page) or you can host it with Blogger. If you want to host it with blogger, look at post Getting Blogger to host your pictures for your profile, etc. (close new window to get back to this page). You may be interested to read about a comparison between the two methods here: Comparison between hosting images with Blogger and with Photobucket (close new window to get back to this page).

You may also use Google Page Creator to host the image. After uploading the image, click on the link then copy the URL from the address bar in the page hosting the image (or right-click on the mouse and select "copy shortcut" to save the URL into clipboard.

Non-clickable image Header

Have ready the URL of the image. Now when you click "Add a Page Element", instead of selecting "Picture" select "HTML/Javascript" instead and click ADD TO BLOG. Then type <img src="URL of picture" width="W" alt="" /> into the HTML editor, where W is the width of the image you want displayed. This will have to be equal or less than the width of the sidebar. If you don't know the width of the sidebar, get to the template editor (click LAYOUT > TEMPLATE > EDIT HTML) and look for this block of codes

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

This tells me the width of the sidebar is 150 pixels.

It will be good to type in some description of the image in between the quotation marks in alt="" as search engine cannot read images but can read the text in the alt tag. This will be an advantage to you if you want your blog to be easily found by search enginges. Another advantage is that if for any reason, the image cannot be displayed, instead of a blank box, the text withing the quotation marks will be displayed instead. The alt tag is optional and you may leave it out if you want. But putting some description between the quotation marks will be good for search engine which cannot read images, but can read the alt text. Also, if the image cannot be displayed for any reason, the text get displayed instead.

When ready, click SAVE CHANGES. Then in the LAYOUT, preview if you want, and click SAVE if you are satisfied. If you are not satisfied with the positioning of the elements, you can hover your mouse over the widget (then the cursor will change to a cross) and drag it to wherever you like.

Clickable Image Header

However, doing it in the manner above will still leave you with an unclickable graphic. If you want the image to be clickable so that it takes you back to the home page (or any other site you wish), you will have to write the image HTML this way:
<a href="URL of home page"><img src="picture URL" width="W" alt="" /></a>. This was the method used for the first example blog.

Adding other stuff to the Header

Note: Instead of just adding a graphic to the header for this blog, you can use the same method to add other things like text, etc. For example, to make a "sticky post" that always stay at the top of the page. You can do it the same way except that after clicking "Add a Page Element", for text, you have to choose TEXT and click "Add to blog". I have also tried adding an AdSense link unit to this beta blog Business, Travel and Leisure (cloce new window to get back to this page). The last time I did it, it didn't work unless I tamper with the script and remove the comment tags, but this time, it worked perfectly without having to change the script. Try it yourself. I have also tried to add a Google searchbar this way, but it still ended up with a non-working searchbar. To add a working searchbar, see this post: Putting a working Google AdSense searchbar in the Header of a Blogger Beta blog (close new window to return to this page).

Update. Putting the script for the Google AdSense search box directly now will result in a working search box. You don't have to do any tinkering.

Making a graphic

For the graphic I made at Guide to Malaysia, I just took a 640x480 pixels photo, crop it to size with the very good and free Irfanview, save and uploaded to photobucket. If you want a fancier graphic header, here is a very good tutorial that shows you how to do it with Photoshop: How to make a blog header graphic (close new window to get back to this page)

For the simple header in the second example "Good Health Information", I just use the very good and free Irfanview to make the graphic. For those not famalier with how to do it, I think I will do a post on that. When I do, I will add a link to that post here.

Getting rid of the text header

I personally believe that having a text header and a description in the header is good for search engine purpose, and I personally would not want to remove it. One of my blog reader did it this way. He retained the text header, but reduced its size to 1 pixel.

Now if despite what I said, you still desparately want to remove the header, as someone just commented, it can be done. Get into the template editor, and look for this block of code:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Testing Header Removal (Header)' type='Header'/>

Change locked='true' to locked='false' (To add the graphic header, you would already have changed maxwidgets='1' showaddelement='no' to maxwidgets='' showaddelement='yes').

If you do this, to remove the text header, click EDIT in the Page Element for the text header, click "Remove Page Element" and the text header (plus any description) will be remove. (see screenshot below)

Page Element: text header removal

Update: If you want the text title to be incorporated into the image, it is better to add the image as a background, making sure the image and the text have contrasting color. See Adding an image as background for the blog Header. Alternatively, you can use the method described in this post Special fonts for your blog clickable graphic header without deleting the text title

Thursday, September 07, 2006

Label cloud for Blogger Beta

phydeaux3 has done a hack for label clouds for Blogger Beta. If you want to do it for your Beta blog, surf over to Code for Beta Blogger Label Cloud (close new window to get back to this page).

Update 28 February 2008: A reader commented that the link to phydeaux3 wasn't working. I tested that and it was OK. I also tested phydeaux3 hack for the label cloud and you can see the lable cloud in the right sidebar of this blog Computer and Internet Articles. If you have any further problems, leave a comment.

Also, Phydeaux3 has an update to fix the maximum of entries. If you are interested, have a look a Blogger Beta Label Cloud Update

Testing uploading photos again.

There again has been numerous complaints about difficulties in uploading photos in Blogger Beta again, so I am going to do a second tests, again using different browsers. I am in Opera right now, and I am going to try to upload one:

Well, that was done in just a few seconds.

Now, I am in Internet Explorer. I will try to upload a picture. It said DONE, but clicking DONE reveal no photo. Same problem as before. Now, switching to FireFox.

Uploading photo in FireFox now:

Success on the first attempt.

10th September, 06. Trying again with Internet Explorer.

Well, the photo got uploaded on the first attempt. So if you have failed before, the thing is to try and try again until you succeed.

BTW the photos are at the curtesy of Tourism Malaysia. Malaysia is having a big Visit Malaysia Year in 2007 and they are having tons of things in line for tourists. Do make it a date in your calender.

Note: Photographps are copyrighted by Tourism Malaysia. You are free to use them, but you will have to get the their permission first. They can be contacted at Email:

UPDATE: There are still many reports of people having problems uploading photos. I seemedn to be the lucky one in not having much difficulties. If you are having difficulties, you may be interested that someone have tried this: in the upload photo form do a forced refresh (ctrl+F5). He said that that solved his problem. And another concurred. So it is worth a try.

Wednesday, September 06, 2006

Favicon for your Blogger Beta blog

After a question from someone on a forum, I decided to test out the method stated at Favicon for your Blogger blog (close new window to get back to this page) to see if it also works for Blogger Beta. Well, I did exactly as instructed in that post, and the Favicon is there now for everyone to see. The only exception will be those using IE6 who will not be able to see the Favicon.

Update 12 March 2007: The favicon can be seen in the address bar in Internet Explorer 7.

Note: The favicon is a bit faint because I have chose a bar chart (representing testing) for the favicon, and the image is mostly white except for a number of red bars.

Tuesday, September 05, 2006

Pre-post your posts

Someone mentioned that you may pre-post your posts on Blogger Beta, so I am going to test if this has been enabled in Blogger Beta. I am posting this post on 9/4/96 10:56PM. I am going to try post dating it to 9/6/06 at 1:00AM and see if this post will be delayed.

BTW you can pre-post posts on Blogger classic by doing a workaround. See post How to prepare post to be published in the future

Update: Well, looks like it didn't work. All that does is to change the time stamp to read 1:00AM but the post is published immediately. Anyone knows if there is some other way to pre-post posts in Blogger Beta, or is it just the same as Blogger classic? Anyway, the workaround should still work in Blogger Beta as I have checked the settings for email and there is a "Mail-to-Blogger Address" for posting by email.

Monday, September 04, 2006

Moderation for blog owner's comments

When Blogger Beta was first started, it was stated that one of the bugs was that if you set for comment moderation, owner's comments will not be exempt from moderation. Looks like that bug have been removed as I have been able to post comments without having to go through the moderation process. However, there are still complaints of being unable to do so in the Google Blogger Help group.

3 column template for New Blogger (previously Blogger Beta)

Update 17 July 2007: Informed by Ramani that there are some changes in his Hackosphere site. Don't know how it will affect downloading of his template which is used for this blog. In any case, you can get a modified version (blog Header widened to same width as rest of content plus additonal "Add a Page Element" in the Header section and the Main Column (posts) section of the LAYOUT by joining Google group Photostore. It was somehow set up as a private group, but I think I will leave its status as it is. You just join and you will be approved as a member to get access. Thought it will help me keep track of how many bloggers are interested in the template. Alternatively, you can email me, but the other option is better. You can then come back to read the rest of the post. The part about the warning of widgets getting deleted is normal. What you should do is to backup your template Backing up and changing New Blogger template. I need to update that post to inform readers that it is a good idea to edit the Page Elements one by one and saving them in Notepad files. Some Page Elements like Link List cannot be backed up.

Update 7 April 2007: There are other Hackosphere 3 column New Blogger templates: New Blogger 3 column templates modified by Ramani of Hackosphere

Other New Blogger 3 column templates:

New Blogger template modified by Stavanger

Dots New Blogger template with Header

New Blogger templates by Isnaini

New Blogger templates by Thur

Ramani's New Blogger Neo template

New Blogger template by FinalSense (note: blogs using these templates will have no navbar)

NOTE: I have noticed that some search engines have directed search with the search terms "blogger 3 column template" to this page. If you are looking for a 3 column template for the Blogger classic blog, you will have to refer to this blog Blogger template tutorial - 3 column template

Ramani of Hack-O-Sphere has a cool hack for a 3 column template for Blogger Beta. You can find it here: 3 column templates for Blogger Beta.

I have tested it. Initially, I copy the script from his site and pasted it into notepad, then the template editor, and that resulted in an error message: "XML error message: The document type declaration for root element type "html" must end with '>'." (See update below). It turns out I have to follow exactly the instruction, download the file into my computer (right-click, "Save target as". I downloaded it as an XML file), then upload it into Blogger Beta. That resulted in a message: "Please confirm that the following widgets should be deleted. All the widgets' configuration data will be lost.
When I tried it earlier for another Beta Blog, the message was even longer:
but looks like Blogger Beta is undergoing a lot of improvements). Also, in the resulting blog, the labels were missing from the sidebar. This, however, was easily rectified, as Labels could be added back using the "Add a Page Element" for the sidebars.

Update: Contacted Ramani about the XML error message. He responded that if we use notepad, we have to ensure that word-wrap is disabled.

To see the result, have a look at this blog which have been converted to a 3 column Minima Blogger Beta template: Star Home Improvements

NOTE: I have noticed that some search engines have directed search with the search terms "blogger 3 column template" to this page. If you are looking for a 3 column template for the Blogger classic blog, you will have to refer to this blog Blogger template tutorial - 3 column template