the original Blogger Tips and Tricks

How to delete a Blogger blog

2012-01-15T09:01:00.006+08:00

Many bloggers do not know how to delete a Blogger (blogspot) blog. The method depends on whether you are still using the old Blogger UI (User Interface) or the new UI. It is not difficult if you know where to look or where to click. The problem is, it is not obvious where to look, but this post will show you where and how. Below are the instructions to delete a blog together with screenshots to make the task easier for you.

Old User Interface
New User Interface

Old User Interface

To delete a blog is a more straight forward. First sign into www.blogger.com to access the Dashboard, Click on the SETTINGS tab and the default sub-tab will be BASIC. Click DELETE and it is done.

New User Interface

As above, first sign into www.blogger.com to access the Dashboard. Click on the drop-down menu and then click SETTINGS:

The on the left sidebar, click on OTHER and option to delete blog will be under the default BLOG TOOLS. Click DELETE and it is done:

Will old images disappear when changing to custom domain?

2011-10-29T09:54:00.002+08:00

The answer is no. Images will remain as long as the Google/Blogger account they are associated with is not deleted. I have checked one of my oldest post - How to change the date and time of your post which has a screen shot and which is dated Monday, May 01, 2006, way before I converted the blog to custom domain.

Upload text and picture direct from computer

2011-10-15T10:03:00.004+08:00

There are bloggers who want to be able to prepare their posts including text and photos in their computer and upload it direct to Blogger. Some have tried using copy-paste from Microsoft WORD which obviously will not work.

Here is a solution - Windows Live Writer. To add a photo while in Windows Live Writer, either click the photo icon or use the INSERT drop-down menu as shown in the screen shot below:

If you wish, you can also add an album. Click PHOTO ALBUM. For this, you will have to have a Window Live ID and be logged in. Once logged in, click ADD PHOTO and browse to the photo in your computer you want to add to the album. Then click OPEN and the photo will be added to the album.

I have tested this at Test uploading photo from Windows Live Writer and found that it works well.

RELATED POSTS:
Easily publish tables with Windows Live Writer

Windows Live Writer plugin

Blogger new User Interface

2011-09-18T16:19:00.003+08:00

Blogger has introduced its new UI (User Interface) where among other changes, those familiar tabs below the Blog Title (see screen shot below):

has been replaced by a drop-down menu at the right end of the list of blogs just before the VIEW BLOG tab. See screen shot below:

Solution to "not authorized to leave comment" message

2011-09-18T11:02:00.004+08:00

Have you ever experienced trying to leave a comment while logged in but get the message that you are not authorized to do so?

Try this: Click the link for using another account, then log in again with the same one. Uncheck the Stay Signed In box. This should take you to finish your comments.

Acknowledgement: The solution provided in this post is from The New Katney

Blog URL changed - how to restore original permalink

2011-06-30T19:18:00.000+08:00

When you change the URL of a blogspot blog, the permalink (individual post URL) also changes and if the blog already has incoming backlinks, these links will become dead links (page not found). So if you are unhappy about that, what can you do?

I would suggest going back to Blogger dashboard, click SETTINGS then PUBLISHING and change the blog URL back to the original blog URL. Of course you will need to do it fast because that option will not be available any more if another blogger has already registered that URL. If successful, all your original permalinks will be restored.

I have tested it at a test blog Computer Hardware Tips and Tricks and confirmed that after changing the blog URL back to the original, the permalink of the individual post had also been restored.

More details - original permalinks

http://computerhardwaretipsandtricks.blogspot.com/2011/05/brief-history-of-ipod.html
http://computerhardwaretipsandtricks.blogspot.com/2011/05/buying-right-notebook-computer.html

and when changed to a new blog URL, these permalinks became (those changed items in red)

http://computerhardwaretipsntricks.blogspot.com/2011/05/brief-history-of-ipod.html
http://computerhardwaretipsntricks.blogspot.com/2011/05/buying-right-notebook-computer.html

and when the blog URL revert back to its original URL, these permalinks then become changed back to the original as shown below:

http://computerhardwaretipsandtricks.blogspot.com/2011/05/brief-history-of-ipod.html
http://computerhardwaretipsandtricks.blogspot.com/2011/05/buying-right-notebook-computer.html

Lifestyle bloggers, Kontera wants you.

2011-06-14T20:46:00.004+08:00

Is your blog or website considered as a LIFESTYLE blog or website? "Lifestyle" encapsulates topics of interest to women and families such as Apparel and Beauty, Cooking and Dining, Holidays and Special Occasions, Home and Garden, Kids and Parenting, Shopping Smartly, and other ways to manage and save a household’s money.

If you blog on these topics, Kontera wants you. Here is a chance for you to earn some money online with your blog. Apply for Kontera account so that you can display unobtrusive in-text ads in your blog or website. Kontera have found that Lifestyle sites results in some of the best ads and results on Kontera

Also, if you get at least 25,000 U.S. page views during their first 30 days after implementing Kontera, will receive a $75 Bonus.

What does other Lifestyle bloggers and website owners found about Kontera? They get:

Premium ads and big brand advertisers.

Users are engaged with the ads (high click rates).

No extra space is required - an incremental monetization opportunities within site's editorial content and text.

Flexible settings for easy customization.

Only a minute to set up and DOES NOT require daily maintenance

So don't waste another minute and apply for Kontera account to start generating income from your blog or website. If you face any problem, leave a comment or contact me

Apprehensions regarding shift to custom domain - my response

2011-06-05T12:41:00.004+08:00

A recent reader expression of apprehension of converting blogspot blog to custom domain is the reason for this post. Worries about the effect of conversion to custom domain is very understandable as it involved a change in URL of the blog. What I can offer is my own experience in custom domain conversion and address one particular concern, does the old URL (including the old permalinks) redirect to the new custom domain URL's.

For traffic, I have published a previous post Effect of conversion to custom domain on traffic where I showed that it had no effect on traffic on my blog (please note the emphasis. I do not guarantee the same for yours). Further in that same post, a commentator complained that it affected traffic to his blog tremendously, but probably he registered his domain direct via Godaddy while I did it via Blogger. see Advice: upgrade to custom domain via Blogger.

Now to the other point about redirecting traffic. Below are 3 permalinks with new custom domain permalinks and below that are 3 permalinks of the same post but with the old blogspot permalink. Confirm for yourself that they do redirect to the new custom domain permalinks.

New custom domain permalinks:

www.bloggertipsandtricks.com/2010/10/make-amazon-banners-open-in-new-window.html

www.bloggertipsandtricks.com/2007/04/making-bookcover-image-link-to-amazon.html

www.bloggertipsandtricks.com/2009/08/recover-accidentally-deleted-post-how.html

old blogspot permalinks

blogger-tricks.blogspot.com/2010/10/make-amazon-banners-open-in-new-window.html"

blogger-tricks.blogspot.com/2007/04/making-bookcover-image-link-to-amazon.html

blogger-tricks.blogspot.com/2009/08/recover-accidentally-deleted-post-how.html

Note that your PageRank will definitely be affected initially and it may take time to recover your previous PageRank, but that didn't seem to have affected my blog traffic which is what is important to me and not specifically the PageRank.

How to backup your Blogger blog and print your whole blog

2011-04-29T17:33:00.000+08:00

Update: Blogger has introduced an easy export and import functions for you to easily save a backup copy of your blog in xml format and easily import it back into Blogger. Sign into Dashboard > Settings > Basic and the Export/Import/delete blog will be at the top, just under the tabs:

Save the xml file in a suitable folder in your computer and use it to export to your blog if the situation requires it.

Regarding printing as PDF file and also hard copies, Blogger has partnered with Blog2Print for you to easily convert it to pdf format and also to print hard copies. Go to Blog2Print

For instruction on how to backup your whole blog, convert it into a PDF file and print it in one go, refer to BlogCollector below.

Why backup your blog you may ask. Well, for one, Blogger has a robot doing its round on the web to identify spamblogs, block them, and after a period of time, delete them. There are many reports of false positives, much to the chagrin of the blog owners. Another reason is to guard against accidental delete (not rare) and hardware failure of the blogging service provider. Your blog may be hacked into one fine day. It is good to protect your hard work by backing up the blog.

Blogger does not have an export or download function. However, Blogger provided some instructions to create a single file with all your posts which you may publish and then copy to your own computer for use as a backup. See How do I create a backup of my entire blog? However, this will involve replacing your current template with a temporary template, saving, republishing and then putting it back again. I do not like this method.

HTTrack Website Copier

Another way to backup your blog is to make a mirror of your blog on your computer. HTTrack Website Copier allows you to download your blog from the Internet to your computer, building recursively all directories, getting HTML, images and other files. It also allow you to update an existing mirror. HTTrack Website Copier is a freeware.

Blog Collector

Blog Collector is a nice software to use to backup your blog, particularly if you use the standard Blogger template. If you use non-standard template or you use a extensively modified standard Blogger template, you may have problems and it may only backup the posts in your index page and not the whole blog. There is also a provision to publish your blog as a PDF book. There are 2 versions, Blog Collector and Blog Collector Lite (free) (update: now there are 3 versions - BlogCollector Lite, BlogCollector Standard and BlogCollector Professional. With BlogCollector Professional, you can export your backup file in PDF. WORD or Rich Text and print it in that format.
.

Other ways to backup the blog is to have Blogger send email of your posts. Go to SETTINGS > EMAIL and enter your email address in the BLOGSENT ADDRESS box. You can also have emails of the comments sent by going to SETTINGS > COMMENTS and enter your email address in the COMMENT NOTIFICATION ADDRESS box. In this method, you will only backing up the text, not the HTML.

Update 3 October 2007: Sorry to hear about your problem. I have stated that BlogCollector only works well with Blogger standard templates and/or templates that have not been modified extensively. What template are you using?

Anyway I think this post need editing as they still haven't got a way to put what they backup automatically back into your blog although they say they are working on it (if they did, they did not inform me). I think the only way to reliably backup your blog is to edit your post in the HTML mode one by one, copy everything into Notepad files and save them.

I have no time, so I think I will just copy and paste part of my reply into the post to update it.

NEWER POST

OLDER POST

Uploading animated .gif image to Blogger post

2011-04-20T04:46:00.002+08:00

Update June 2011: A commentator commented that he had no problem with uploading animated gif images directly via Blogger photo update icon, the animated gif image remain animated after upload. This 2009 post may be outdated and you should check if you are able to upload animated gif images direct via Blogger.

I tested uploading animated .gif image to Blogger post at Testing uploading animated .gif image to Blogger.

Conclusion of the test is, if you upload the animated image direct via the Blogger photo upload icon , the image will no longer be animated as you can see from the first image which was uploaded via the via the Blogger photo upload icon in the toolbar of the Blogger post editor.
Read rest of post >>>

Blogger "Edit posts" options

2011-03-29T09:03:00.007+08:00

Many of what used to be possible only possible via editing the template (example, 2007: Change comments to anything else desired now can be done via the DESIGN (previously called LAYOUT) and in the Blog posts section, clicking EDIT will take you to "Configure blog posts" options:

Now when you click Edit, you will be presented with a popup with options to change many of Blogger's default settings (see screen shot below):
Read rest of post >>>

How to make all links open in new windows

2011-02-18T08:17:00.006+08:00

This request to make all hyperlinks pops up every now and then so might as well make a post for it. To make all links open in new window is amazingly simple. Just sign into
DASHBOARD > DESIGN > EDIT HTML
to open template editor

Use keyboard shortcut ctrl+F to find <head> and immediately after that, add a single line <base target='_blank' /> so that it become

<head>
<base target='_blank' />

Save the edited template and viola, all links in your blog will now open in new tabs or windows.

Note: Blogger is now XHTML so all tags must have matching closing tags or be self closing. The above tag is self closing because it has that forward slash / at the end of the tag.

Update: A commentator asked for all links to opens in a new window/tab, but then when other links are clicked, rather than opening another separate new window/tab, it replaces the one that was previously opened. So they can stay on my page while new links all appear in the same new window, not multiple new tabs/windows. This can be easily done by using <base target="_new"> instead so that it becomes
<head>
<base target='_new' />
I have tested it at Useful tools for bloggers and it works fine.

Note 2: Just wondering if adding a note for frequent visitors to set browser to open in new tabs rather than new windows will reduce the number of visitors having an unmanageable numbers of new windows opened. Do leave your opinions in the comments below:

Note 3: Some bloggers may prefer some links not to open in new window/tab but to open in the same window, Nute gave this tip to add the attribute target="_self" for those links you want to open in the same window/tab.

I have tested his tip at Safety Tips and Tricks (see Blogger Resources in the second right sidebar). His tip work correctly if the first and third link ("original Blogger Tips and Tricks" and "Blogger Book" opens in new window without the need to add target="_blank" and the second (Blogger for Dummies) opens in the same window by adding target="_self"

Blogger limits update & workarounds

2011-02-07T17:42:00.010+08:00

Blogger Help: What are the limits on my Blogger account? is overdue for updating as the number of blogs in a single Blogger/Google account is still stated as unlimited. In truth, Blogger.com has limited it to a maximum 100 blogs per account. However it is easy to go around this limit as you can create a new Blogger/Google account, create a new blog then invite your old account as team blogger and after acceptance of the invitation, make yourself (old account) as administrator.

Update 2: Thanks to Mary of Google Sites Hints and Tips who says that the limit of 100 team members per blog is actually a limit of 100 invitations and that by forwarding an invitation email, the forwardee can accept the invitation and become a team member as well and in this way, one can have more than 100 team members per blog.

Read rest of post >>>

How to Split Blogger Header into 2: Pre- & Post Template Designer

2011-02-02T11:44:00.013+08:00

There are 2 methods depending on whether your Blogger template is pre-Template Designer or already using the new Template Designer templates.

1. Pre-Template Designer: How to split blog header into 2 (if you are on the main page, click Read more first)
2. Post-Template Designer: How to split blog header into 2 (if you are on the main page, click Read more first)
Read rest of post >>>

Template Designer: How to increase entire blog width beyond maximum

2011-01-27T21:43:00.014+08:00

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)
Read rest of post >>>

2011-01-27T21:43:00.003+08:00

2011-01-27T21:43:00.001+08:00

2011-01-27T21:39:00.001+08:00

Windows Live Writer table plugin

2011-01-20T15:30:00.005+08:00

For many bloggers creating HTML tables are a nightmare, right? Well, I'm here to tell you that all changes with ComputerJy's free Windows Live Writer (WLW) table plug-in.

I've been using this table plug-in for sometime now and I can guarantee it does an excellent job. The options far exceed what

Read rest of post >>>

Reminder: Backup your blog with Blogger's Export function

2011-01-14T13:48:00.004+08:00

Because Blogger.com is free, spammers have abused it thus forcing Blogger to use robotic programs to detect and delete splogs (spam blogs) as well as violation of Blogger's Terms of Service (TOS), but unfortunately the possibility of false positive (legitimate blogs wrongly identified as splog) is ever present. Every now and then we get plea for help and this recent one is typical:

"I had put a lot of time and effort into this blog over the years to have it just taken away. If I cannot get it restored, is there a way to at least get my content? I am just heartbroken over this."

Now Blogger has set up some procedure for such unfortunate occurrence as described in How to recover blog deleted as splog or TOS violation, it is best to take a bit of time to backup your blog using Blogger's export function. By doing so, you would not only be saving the blog posts for any eventuality, but also the comments.

How to delete label enmass

2011-01-10T13:42:00.004+08:00

Deleting labels en mass was found to be not as straight forward as I had expected when I had to occasion to do it when I labeled by mistake all posts at this Damansara Uptown Directory that I administer with a label I didn't want so thought it is a good idea to lay out the steps here for the record and for those who may need them when the occasion arises.

To delete a label en mass, sign into Dashboard, click EDIT POSTS. Read rest of post >>>

Easily create tables with Windows Live Writer

2011-01-05T10:28:00.000+08:00

Hard coding the HTML for a table is very tedious, but here is an easy way to do it. Go download Windows Live Writer and install it into your computer as I have found with this test post Blogger versus Wordpress Comparison that Windows Live Writer is a good tool to simplify publishing tables.

(Writer is part of Windows Live Essentials. You can download just Writer or all of Windows Live Essentials. Windows Live Essentials 2011 includes Messenger, Photo Gallery, Movie Maker, Mail, Writer, Family Safety, and Windows Live Mesh, plus Bing Bar, Messenger Companion, Microsoft Silverlight, and Outlook Connector Pack (Microsoft OutlookHotmail Connector and Microsoft Outlook Social Connector Provider for Windows Live Messenger).

Read rest of post >>>

How to resize embedded video using GIMP

2011-01-04T09:37:00.005+08:00

Update: For embedding Youtube video, you can do the resizing at Youtube.com itself by either ticking one of the 4 size option (560x340 640x835 835x505 1280x745) or by clicking CUSTOM and typing in your choice of width while letting Youtube automatically fill in the value for the height to keep the aspect ration constant (see screenshot below). However the method described in this post will still be useful if you want to resize other video embed codes or similar:

Method of resizing video embed codes while keeping aspect ration constant

Irfanview which I used as a convenient tool to help resize Youtube video wouldn't work with MAC. The alternative using calculation to resize Youtube video is also a problem for some, so this post will explain how to use GIMP to help with resizing Youtube video to fit your blog sidebar or main column or whatever. (Note: Youtube video can also be resized/customized direct in Youtube website too to be covered with another post)
Read rest of post >>>

How to link to a location in different page

2011-01-01T16:27:00.003+08:00

The previous post explain how to link to a location in the same page. In summary, it would be as follows:

The hyperlink HTML is written as

<a href="#key">some text</a>

where key is any text you would like to use as the key, and the location to which you want to link to is preceded by

<a id="key" name="key">>/a>

To link to a location in a different page, it will be almost exactly the same except the #key will now be preceded by the URL of the page to which you want to link to so it now become

<a href="URL#key">some text</a>

For example, the URL of the previous post is http://goo.gl/bB0Iu (permalink shortened using Google URL shortener)

Thus, I write the hyperlink HTML as

<a href="http://goo.gl/bB0Iu#linksamepage">some text</a>

As I have used as the key "#linksamepage".

Try clicking http://goo.gl/bB0Iu#linksamepage and see where it takes you.

How to link to a location in same page

2010-12-29T06:26:00.012+08:00

It is often convenient to create a hyperlink to another location in the same post or webpage. For example, in a post explaining AdSense Privacy Policy Generator for AdSense publishers, there is a whole section on the relevant portion of AdSense Program Policies before the actual content on how to use an AdSense Privacy Policy Generator. For the convenience of visitors who have no interest in reading about AdSense Program Policies and just want to learn how to easily create the required policy for their blogs, it is thus good to create a hyperlink at the beginning of the post so that they can click on it to bypass the unwanted portion of the post and jump straight to the portion explaining how to create the AdSense Privacy Policy with the generator.
Read rest of post >>>

Styling the blog date header

2010-11-30T18:36:00.003+08:00

A reader asked: " I really want to make a different date header!"

Well this can be done via editing the Read rest of post >>>

HTML textarea tag replaces scroll box

2010-11-30T18:17:00.002+08:00

A blog reader by the name of Kevin of http://www.thebrosource.com/ alerted me to the <textarea< tag in place of the more complicated codes for scroll box. I tested it at Testing Blogger: testarea tag in place of scroll box.

The code is as follows:
<textarea cols="50" rows="30">type your text here</textarea>
where cols="50" defines the box for the text area to be 50 characters wide and rows="30" defines the number of rows to be 30. Note that the test shows that you should type the text without using the ENTER key otherwise the line break will be represented by the line break tag <br />

More details on the usage of the textarea tag at W3schools: HTML textarea tag

How to include link to Twitter page in your navigation bar

2010-11-11T00:14:00.008+08:00

"Is it possible to have a RSS feed of another blog as Blogger page? I noticed also that one of your Page is just a link of your Twitter account. How do you do that?"

I assume you are referring to that link to my Twitter "tab" that you see just below this blog Title as highlighted with a yellow arrow in the screen shot below:
Read rest of post >>>

Make Amazon banner (iFrame) open in new window

2010-10-05T23:40:00.006+08:00

"Do me a favor, explain how to open an Amazon banner in a new window. Thanks."

The question would be as the same as asking how to make an iFrame open in new window because Amazon uses iFrame for its banner.

Let's take the Amazon gift card banner below. Read rest of post >>>

How to center post title (customization)

2010-09-27T15:57:00.004+08:00

If you want to center (or align left or align right) the post title, sign into Dashboard > DESIGN > EDIT HTML to open the template editor and search for .post h3 (use ctrl+F) or code that may look something like those below (code below for Minima template, yours may be slightly different):

Reminder: Always backup template and backup gadgets before editing the template.

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

The just add this line text-align:center;

.post h3 {
text-align:center;
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

preview and if OK, save template.

Update: Different template may define post title differently. For example, a commentator found that for her, it was
h3.post-title {

If you want to align the post title to the left or to the right, just substitute text-align:center; with either text-align:left; or text-align:right;

Note: If you can't find the relevant code, let me know what template you are using via my contact form

How to hide blog date header

2010-09-27T15:28:00.007+08:00

Update: There is an easier way to do this without editing the template directly. See Blogger "Edit posts" options

I have tested "unticking" the date header by testing at Testing Blogger Beta without editing directing the template directly at Testing Blogger Beta and you can check a label page eg Label: Comments you would see that there are no date header. Also read the comment: puluth® has left a new comment on your post "How to hide blog date header":

Thanks. but how to remove it from blogger label page?

While blogs started as web logs or weblogs (chronological publication of personal thoughts or diary) and thus characteristically have a date header like the one above this post, but because blogs have now become a convenient way of putting content online, many have been using blogs for other purposes more like a typical website, many bloggers want to get rid of the typical date header.

That is not difficult to do. Sign into Dashboard > Design > Edit HTML to open the template editor and look for the block of code like the one below (for the Minima template, yours depending on your template may be slightly different):

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

and just add this line: visibility:hidden; for example like below:

/* Posts
-----------------------------------------------
*/
h2.date-header {
visibility:hidden;
margin:1.5em 0 .5em;
}

and the date header will be gone.

Make images uploaded via Blogger unclickable

2010-09-21T00:24:00.002+08:00

Many bloggers want their uploaded images not clickable probably because they don't want their images especially the enlarged version to be copied. Previous post How to make images not clickable (not enlarge) provided a method in varying circumstances may not work.

Here is a more efficient method and failsafe method. All one need to do is after uploading an image via Blogger image upload icon to switch to Edit HTML mode if one is not already in this mode.

Now depending on which post editor you had use, the HTML codes used to display images that Blogger generate upon uploading is different. We will deal with the old post editor (my preferred post editor) first as it is easier to explain and deal with the new updated post editor later:

CODES FOR THE OLD POST EDITOR:

Please note that only the code in black is needed to display the image. Those highlighted in red are not needed to display the picture and can be removed safely leaving only

<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 178px; height: 67px;" src="http://1.bp.blogspot.com/_jizoPL28qCY/SpEIlvjfinI/AAAAAAAADBo/nYU8u4C1_6Q/s400/BlogStar.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5373085274943228530" />.

Thus to make the image not clickable, all you need to do is just to delete those codes highlighted in red. I have tested that successfully over at Test to make images uploaded via Blogger not clickable.

New post editor

We will now deal with the new post editor which is not my preferred post editor. The codes to display the uploaded image generated by Blogger with the new post editor is as follows, again with the code to display the image in black while the codes in red are to make the image clickable to display an enlarged image. The codes in blue is to center the picture and can either be removed or left in place (note: center will be replaced by left or right if you had elected to float the image to the left or right but that will not affect the explanation to make the image not clickable):

Again, only the code in black is needed to display the image while those in red are used to make the image clickable to enlarge the image while those in blue is meant to center the image. Thus if you want the image not clickable, just delete those highlighted in red (<a....> and </a>) and those highlighted in blue too leaving those in black intact and the image will still be displayed. Alternatively we can just delete those codes in red to make the image unclickable while leaving those in blue intact to center (or float) the image.

Easily make HTML sitemap table of content javascript

2010-08-13T01:48:00.003+08:00

A commentator at Blogger Tips and Tricks (HTML) Sitemap (Table of Content) said: "Hi Peter, This sitemap is really good and helpful. I would like to add a sitemap like this one to my blogger blogs. Can you please give me a detailed reply on creating a sitemap like this and loading it to blogs and then to Webmaster tools."

Fortunately for me, that is not difficult a task for all you need to do is to first create a post or better, a static page, making sure you are in the Edit HTML mode, copy the following Javascript:

making sure to replace http://myblog.blogspot.com with the actual URL of your blog. To make this clearer, below are 2 examples of the codes I used to create such HTML sitemaps of 2 of my blogs, one of which is Easily make HTML sitemap for your blog using Javascript

How to set comment option for individual post

2010-07-05T09:04:00.005+08:00

"Is there a way to not have comments for a post in the body of the blog or post? I would like to have a "comment" page that readers can go to and comment there, but not on the post itself."

You can easily set any individual post to either allow or don't allow comments. You will have to first go to Dashboard, click SETTINGS > COMMENTS and set the blog to show comments:

Comments (.) Show ( ) Hide

All you need to do now when publishing a post is to click POST OPTION at the bottom left corner of the post editor and select one of the 3 options:

( ) Allow
( ) Don't allow, show existing
( ) Don't allow, hide existing

Required field must not be blank - solution

2010-06-29T09:10:00.010+08:00

Any blogger who recently have tried to add or edit a gadget (page element) which did not have a title for the gadget must have come across this problem - the gadget cannot be saved without a title. Error message - "Required field must not be blank"

Read rest of post >>>

How to change post title background color with template designer

2010-06-18T09:42:00.015+08:00

"And how can I give my post title a colour background?"

The first thing I thought of trying is to go to LAYOUT > FONTS AND COLORS as described in my previous post Changing fonts and colors for New Blogger (xml).

However, Blogger for better or for worse is constantly evolving and the LAYOUT tab is no more, replaced by a DESIGN tab and apparently have moved the template designer from Blogger in Draft to standard Blogger.

I believe that it is still possible to edit the template direct to add CSS (Cascading Style Sheet to control the post title background but found that Blogger Template Designer has provided a "Advanced" option to do that via the template designer with INSTANT PREVIEW. And apparently some of the functions of the new Blogger Template Designer can be used even if the template you are using for your blog has not been designed with Blogger Template Designer
Read rest of post >>>

Recover blog deleted as splog, TOS violation

2010-05-16T18:11:00.010+08:00

Blogger is really going all out to delete blogs which are splogs (spam blogs) and those not confirming to their Blogger Terms of Service which unfortunately is resulting in many false positive (blogs deleted which are not splogs). I was a victim too when one of my environmental blog - Aerator - an environmental blog was deleted for supposed "TOS violation" which it is not. It is an environmental blog with an original innovation Method to increase efficiency of wastewater aerator

If yours too had been wrongly deleted, follow the steps below which I used to get my blog restored:
Read rest of post >>>

How to enable comments for pages

2010-05-16T15:30:00.005+08:00

"I have created new pages and would like people to be able to leave comments"

To enable comments, go to Dashboard, click EDIT POSTS, then EDIT PAGES and you will see the pages you have added to your blog:

Click EDIT for the page which you want to enable comments, then at the bottom left corner of the resulting "page editor", click POST OPTIONS and in the options under READERS COMMENTS:

tick (.) Allow to allow readers comments, then click PUBLISH.

Update: Blogger seems to have blocked comments for static pages. I have tested allowing comments for some page and found that what many commentators complained about - that it immediately revert to not allow is true. In fact on previous pages where I have allowed comments and the Dashboard showed that there comments, however, on loading the page, the comments are nowhere to be found.

Note: Blogger is aware of the problem and is working on it. See Blogger Help Forum

Tool - Cover live events with blog

2010-05-15T10:35:00.002+08:00

Here is another very useful tool for blogger which will enable you to conveniently cover a live event such as a sport event, court trial proceedings, elections, disasters etc. This can be done either in person, invited panelists, Twitter accounts, XML feeds, readers comments so you have lots of choices for its content. That tool is CoverItLive.com which can either be a free tool with ads or a paid for tool.

To see an example, surf over to Anil Netto: Live - Polling day for Sibu by-election. Apparently, one can select either chronological order (newest events first) like in the above or reversed chronological order (oldest events first) like this post which covers the same event - Bintulu.org: LIVE Sibu By-Election On Polling Day. And if you want to compare how different bloggers can cover the same event, see also Lina Soo: Sibu by-election live coverage (same event but content different among others, due to different feed).

Recover accidentally deleted post Part 2 with original permalink and comments

2010-05-04T23:02:00.002+08:00

The earlier post How to recover accidentally deleted post described 4 methods of recovering deleted post of which the first 2 methods are applicable if you happened to still have access to the computer where you had prepared the deleted post or you have not closed the browser or browser tab where you had viewed the the deleted post.

Method 3 of recovering deleted post require you to find a cached copy of the deleted post on the Internet and assume that you would be satisfied with reconstructing your deleted post from scratch using the information from the cached copy. You would not be able to restore the comments or recover the original permalink, but will end using the content from the cached webpage to reconstruct the post which will probably have a different permalink from the original.

Below is described a fifth method which can considered to be an improvement to the above in the sense that you can recover the exact post as it was before it was deleted together with comments and the original permalink. Credit should be given to Tom who blog at TED Image tests for hitting upon this method of recovering the post ID from cached copies to restore deleted post.
Read rest of post >>>

Guest post: Animated gif images, Blogger and Photoshop

2010-04-26T11:20:00.003+08:00

Welcome to Steve Wallet, Architect, Blogger Tips and Tricks first guest blogger with his post on working with animated gif images, Blogger and Photoshop. As for me, I only use free software, namely Irfanview and PC Paint, so I hope Steve's post will provide useful information which I am not able to provided for those who like graphic heavy posts or blogs:

I saw Peter's article about adding .gif's to blogger (Uploading animated .gif images to Blogger post), and thought I'd give it a try. I wanted to make .gif's and post them directly to my blog, without all the complicated html and uploading from other websites. After much trial-and-error, I have created simple .gif's for my blog.

I use Adobe Photoshop and ImageReady, version 7. This article will make much more sense if you are familiar with Photoshop.

What I've learned so far.
Read rest of post >>>

Blogger video upload icon and the old post editor

2010-04-09T09:22:00.006+08:00

Many bloggers have asked why they cannot upload video via Blogger post editor anymore? Or they ask, what happened to the "filmstrip icon" which I believe is the Blogger video upload icon at the end of the toolbar you see in the screen shot below:

In practically every case, I have found that the reason their "filmstrip icon" disappeared is because they are using the new updated post editor which do not provide for video upload.

The solution is simple. Just go to SETTINGS > BASIC (the Basic tab is the very first "sub-tab" for SETTINGS which you will be in once you click the SETTINGS tab) and scroll to the bottom of the page. There you will see the options to select the new updated post editor or the old post editor:

Select the old post editor, save, go to your post editor and there you will see your "filmstrip icon".
Read rest of post >>>

How to embed webpage in blog with iFrame

2010-04-03T17:31:00.008+08:00

Suppose you want to integrate a website or a particular webpage with your blog. Some possibilities, you may be auctioning some items on eBay and you want your ebay offering in your blog or perhaps you have an Amazon AStore and want to embed the AStore into a post in your blog. Click here to see a sample.

Note: Embedding a webpage in an iFrame in your own blog of website is equivalent to copying that webpage into your own website or blog so it is good to ask permission of that webpage you want to embed. In the example below, I uses my own Amazon's Blogger's AStore Bookshop so there no copyright issue as it is my own webpage.

What you can do is to first obtain the URL of that webpage and put it in an iFrame as follows:
Read rest of post >>>

Post in chronological order hack

2010-03-22T01:44:00.005+08:00

Blog posts are by default arranged in reversed chronological order in the home page, that is, the newest (latest or most recent) post right at the top and followed by older post. A very common request from bloggers is to have the posts arranged in chronological order instead, that is, the oldest post at the top to be followed by earlier posts.

Up till now, the best solution we had been able to offer is to ask the blogger to play with dates and time or alternatively, edit the template to add extra "add a gadget" and then make a "sticky" post.

Now apparently the David Merriman had come up with a Blogger Hacking: Chronological Order where apparently all you need to do is to copy some script and paste it into your blog template just before the </body> tag and it will make posts in the home page display in chronological order instead of the usual default reversed chronological order of blogs.

Read rest of post >>>

Advice: Never delete blog or post (And if you ever did, what to do?)

2010-03-20T23:01:00.004+08:00

One very good reason not to delete a blog or a post, especially if the blog or post is not a relatively new one, is that deletion will lead to dead links. Take Prabha's problems for example (from a comment at Permalink SEO:

Read rest of post >>>

Create sub-domain with custom domain

2010-03-19T11:22:00.005+08:00

If you are just interested to know how to create sub-domain, skip directly to How to create sub-domain

A blogger's complaint that the static page he created has unwanted expandable post summary (if I understand him correctly is the push I needed to finally write this post on sub-domain. He suspect it may have something to do with the fact that he is using a template with built-in expandable post summary (again if I understand him correctly. He may be right but it looks that the static page one created via Blogger uses the same template.

Anyway I figure his solution might be to abandon blogspot and upgrade to custom domain and create a sub-domain instead as the sub-domain can use any template which may or may not be the same as the original. It is practically a separate independent website. Look at the one I created recently faq.bloggertipsandtricks.com/ (still under construction). If you go to BT&T FAQ which is the title of that sub-domain, you may see me using the same template, but the blog title, sidebars, etc are different from Blogger Tips and Tricks.

A bit more rambling. While for a long time, Blogger.com was negatively compared with Wordpress, since it abandoned the old classic template and forced everyone to upgrade to the new Blogger xml templates, Blogger has improved by leaps and bounds. Not only that, now coupled with Google Apps, you have a very easy "content management system" to create many things without getting too technical. In fact, I know that Google (here in Malaysia anyway) is working with a students from a University to help SME (Small and Medium Enterprise) using Blogger and Google Apps to create >websites for businesses.

How to create sub-domain

Read rest of post >>>

Check broken links Xenu's Link Sleuth

2010-02-28T18:29:00.005+08:00

Here is a very useful tool which I had meant to use for a long time and also had meant to tell you about it, but keep procrastinating. Well, finally here it is, the Xenu's Link Sleuth which you can download here.

Most of you probably already knows that search engines don't like dead links (Definition: A dead link (also called a broken link or dangling link) is a link on the World Wide Web that points to a web page or server that is permanently unavailable, usually 404). So if you are concerned about how search engines rank your blog, you should take the trouble to search for dead links in your blog, then correct them.

Read rest of post >>>

Web Host Rating comparison

2010-02-17T13:06:00.001+08:00

There are now more and more businesses using blogging software as some kind of CMS (content management systems) to setup and manage their website, my son's security business for example which will be using Blogger.com. And for most cases where the requirements are not too demanding, it is sufficient. This is especially true now for Blogger.com since it has upgraded from using the old classic template to the new xml template plus teamed up with Google Apps.

Currently, that Blogger.com powered website is hosted free of charge by Blogger. Going down this route means no direct access to the web servers hosting his blog/website. But if ever he need direct access to the web servers such as for certain database operations, he will have to think of self-hosting his website which means the need to find a reliable web host at reasonable cost.

Fortunately there are websites offering web host rating making the task of selecting web host slightly easier. The more consistent the ratings, the more confidence we should have of their ratings. Below is a comparison between 2 web host rating websites:

Rank	WebHostRating	WebHostingGeek
1	InMotion Hosting	Inmotion
2	FatCow	iPage
3	Just Host	JustHost
4	Web Hosting Pad	WebHostingPad
5	HostClear	FatCow
6	IX Webhosting	GreenGeeks
7	BlueHost	Bluehost
8	HostMonster	Hostmonster
9	Acenet	GoDaddy
10	Globat	Yahoo

We can see that the ratings are fairly consistent. And similarly in the 2 sidebars, there are similarly links to different ratings according to different purposes or criteria such as Best Blog Hosting and Best Forum Hosting, something (forum) I am considering for this blog itself.

Why self hosted blogs and web host ratings

2010-02-17T09:38:00.001+08:00

When you can register and use your own domain for you blog (custom domain) and Blogger can host your blog for you gratis (free), it makes me wonder why would anyone still wants to use the outdated classic Blogger template, host the blog themselves and use the more cumbersome FTP (File Transfer Protocol) to publish their posts. Hosting the blog ourselves means we have to pay monthly charges, amount of storage, worry about whether the bandwidth we purchased is sufficient, worry about the reputation of the web host, security, down time and a host of other issues.

In any case, old classic Blogger template will soon be history as Blogger is stopping support, so if you want to insist on hosting the blog yourself, you will have to migrate your blog to Wordpress.org or any of the other blogging software.

The question of why anyone would want self-hosted blogs still remains. I tried some research, but it mainly turned up posts that are way off track because they discussed pros and cons between free blogspot.com or wordpress.com blogs which are sub-domains of Blogger and Wordpress versus blogs like this (www.bloggertipsandtricks.com, no blogspot in URL) which even though uses my own domain, is hosted by Blogger.com free). One example of a post not hitting the mark is 10 Reasons to Self Host Your Own Blog.

That leaves to think up of old issues encountered in the past plus guesswork. I remembered us trying to Google sitemap for our blog. The method described is but a workaround using the RSS/Atom feed and is not a real Google sitemap. For that you need direct access to the server which we bloggers using custom domain don't have.

So the crucial item is direct access to the server which would be needed if whatever you want need you to directly control what goes on in the backroom behind the scene with your blog. Such as you need that when a visitor fills in a form and the database is altered, based on some preset conditions, some events are set into motion and displayed to the visitor.

At the moment, I am toying with the idea of creating a forum as a sub-domain of one of the blog I am helping manage and I suspect that may need to be self-hosted. If you know of any other reasons which forces self-hosting, please let us know by leaving a comment.

Very few bloggers would need that, but if you ever do, then it is time to self-host and its attending headaches. So I just wonder if this web host rating is at least a partial solution for your headaches. What caught my eyes are those Best this and Best that categories in that website, in particular, the Best Blog Host and since I am thinking of setting up a forum, the Best Forum Host. Unfortunately, I could not find any references as to why these 2 were chosen as the Best Blog Host or the Best Forum Host. I think I will shoot off an enquiary to them.

Create static Blogger Pages for Contact Form, About, privacy, etc

2010-02-17T07:04:00.001+08:00

Definition of static page: A web page that is not modified by an application server before the page is sent to a browser. and do not employ dynamic technologies (like PHP, ASP, Perl...).

"I'm new to blogging, how do you create a contact me form on a separate page on your blog, without it showing up as a post or in the Archives."

The above question is the kick I needed to finally write this post about Static Pages which will be very useful for stuff like contact form or an About page, etc. especially if you don't want them to appear in the blog archive or irritate those who subscribe to your RSS feed with too much notifications as static pages will not be part of the normal post although the way to create these static pages is almost the same as ordinary posts.

To do this currently, you must switch to Blogger in Draft (UPDATE: According to Sean McCullough: Blogger Buzz, PAGES is no longer confined to Blogger in Draft to, and you can now create static PAGES in your standard Blogger Dashboard) and sign into your Blogger account and click on the New Post tab to open the post editor. However, this time, you will see an extra tab in the Blogger in Draft post editor, namely Edit Pages tab and below that, a NEW PAGE tab.

Clicking NEW PAGE will open the PAGE EDITOR which looks exactly like the normal post editor except instead of POST TITLE there is a field for entering the PAGE TITLE. Prepare the static page just like you would a normal post and click publish. You would then choose get the link to the static page either in BLOG SIDEBAR or as BLOG TAB below the header or NO GADGET (link pages manually)

Click SAVE AND PUBLISH and your static page will be publish but not as normal post which will appear in the blog archive and will not trigger your RSS feed to inform your subscribers that there is a new "post".

I have chosen for this blog, NO GADGET (link pages manually) and what you will see in this blog header is the horizontal navigation bar I manually added and which currently has 3 tabs, | HOME | CONTACT | PRIVACY POLICY | of which only one CONTACT is a static page. The other 2 were created earlier as ordinary post (I may change it later).

If you want to link pages manually, refer to Creating simple text horizontal navigation bar. One advantage of using this option is that you can link to any website you choose like what I have recently done and will not be constraint to only pages create in this blog which would be the case if you choose the following 2 options.

To show you what the other 2 choices would look like, refer to the screen shots below:

Static page tabs (HOME CONTACT PRIVACY) in sidebar

Now I experiment with dragging the Pages gadget from below the blog Header right into the blog Header itself, hoping to create a horizontal menu bar inside the blog Header itself, but unfortunately that is not to be, for the horizontal tabs arrangement change into a vertical one (see screen shot below). If you prefer the pages tabs created by Blogger to be within the Blog Header, you will have to use the manual method plus create a horizontal navigation bar.

Static Pages tabs (HOME CONTACT) changed into vertical bar of tabs

Tip: Editing old post and using the HTML comment tags to hide the original

2010-02-14T16:27:00.001+08:00

A blogger asked: "if a do a post/message in blogger. And after I rewrite this post. But more later I want to replace (substirute) the rewrited post by the first original post. How can I do it?"

I assume the above implies frequent editing of old post and the possibility of reverting to the earlier/previous edition after editing. Now the problem is the previous edition would most probably have been overwritten by Blogger.com's automatic saving, so how to revert to the earlier/older edition?

Here is what I would suggest. Suppose I now want to edit an old post. What I would do will be to first copy-paste the whole original post within the same post under editing with one following the other so that there will be 2 duplicate copies of the post with duplicate below the original.

Now I would surround duplicate with a pair of the comment tag  like this (anything that is surrounded by the pair of comment tags will not be displayed by any browser):

Enviroman says: "We must take very good care of our 1 and only Spaceship Earth without lifeboat. Where can we go if something terrible happen to our spaceship and it become unlivable? What will we leave behind for our children, grandchildren, great grandchildren? What kind of legacy are we leaving behind?
<--
Enviroman says: "We must take very good care of our 1 and only Spaceship Earth without lifeboat. Where can we go if something terrible happen to our spaceship and it become unlivable? What will we leave behind for our children, grandchildren, great grandchildren? What kind of legacy are we leaving behind?
-->

Perhaps for extra measures, we may append an Version note and date, like for example, Version 1.0 14 February 2010, so it become

Enviroman says: "We must take very good care of our 1 and only Spaceship Earth without lifeboat. Where can we go if something terrible happen to our spaceship and it become unlivable? What will we leave behind for our children, grandchildren, great grandchildren? What kind of legacy are we leaving behind?
<--
Version 1.0 14 February 2010:
Enviroman says: "We must take very good care of our 1 and only Spaceship Earth without lifeboat. Where can we go if something terrible happen to our spaceship and it become unlivable? What will we leave behind for our children, grandchildren, great grandchildren? What kind of legacy are we leaving behind?
-->

And now we can confidently edit the first duplicate and if we don't like what we did, all we have to do is to discard it and remove the pair of comment tags to make the original display.

If you don't like the above method, perhaps you can copy-paste the original post to be edited into a new post, then save the original as draft. If you don't like the new edited post, then discard it, go back to the draft and republish it.

Alert: Change in Twitter username and account

2010-02-09T07:19:00.003+08:00

Hi folks,

Sorry to disturb you and if you are subscribing to this blog's feed, apologies for interrupting you, but it can't be help. If you are a subscriber, I hope you do not unsubscribe.

Reason, I need to alert readers who had followed my first Twitter username @enviroman that for blog related tweets, I have changed username to @bloggerfordummi. So if you have been following @enviroman previously and you wish to continue receiving blogs and Blogger.com related tweets, please follow @bloggerfordummi.

And of course you are free to unfollow @enviroman or continue as this Twitter account (my first Twitter account) is still active, but if I ever tweet again here, it will be for things other than blog related stuff (may change later, don't know).

Reasons for this was @enviroman was suspended for a long time and when I got tired of appealing a waiting, I started @bloggerfordummi. Not too long after that, my suspension was lifted and since I had followers, I continues to twit here on blog related matters.

However, noting that @bloggerfordummi has the words blog and Blogger and phrase "for Dummies" (incidentally Blogger for Dummies was my first blog related blog, but decided to start this Blogger Tips and Tricks because of trademark related issues ("for Dummies" is a trademark of Wiley Publishing).

However, the aim of Blogger Tips and Tricks remains the same, namely as a source of easily understood information and instructions for blog, blogging and Blogger.com related matters. The blog title of Blogger for Dummies will now be changed to Blogger for Dummies (for blog) since the trademark "for Dummies" I assume is for books, so using the same term for blog means there is no violation of their trademark "for Dummies (for book). And Blogger for Dummies (for blog) will continue to be updated but for stuff which are relatively simpler.

There are some who may be sort of offended if the read Blogger for Dummies, but to me and I hope to you, let us regard "for Dummies" as a phrase which conveys something which (no offence) indicate something anybody view himself as a dummy (no offence) can understand easily.

To me, it is no problem at all if I call myself a dummy but the person I address then proceed to give me very clear instructions or information. I fact, I am happy to call myself a dummy as long as everybody including anyone more "dummy" than me continue to educate me as I consider myself a lifelong learner.

So folks, call me a dummy if you want but please if you have anything to teach me, I beg you not to hesitate. Cheers.

Peter @ Enviroman (Blog*Star)
(think I will leave a graphic signature as well):

Simple text horizontal navigation bar

2010-02-07T08:54:00.010+08:00

Skip to instructions if you are only interested in reading the instructions on how to do create the navigation bar. You may also be interested in How to create static pages as things like contact forms, About this blog, etc is ideally suited to using Pages and the horizontal navigation bar.

Preamble

There are 2 things that we want in designing a blog or website. One is to make it easy for visitors to find content and the other is to make full use of the portion above the fold. And both of these can be fulfilled by creating a horizontal navigation bar either just below the Header or even within the Header itself.

Because I am comfortable with tables (<table>) I have used I have used table to create horizontal navigation bar before. However, current opinion is table should be used for data, and navigation bar which contain links are not data and the proper HTML tag to use for navigation bar should be list (<ul>). This has to do with web sematic which I think relates to how a computer, not a human, see a website. However, this will involve CSS (Cascading Style Sheet) and a lot of coding. The method I am going to describe here just use a simple <div> tag and http://bloggerfordummies.blogspot.com/2008/07/dummies-guide-html-tutorial-hyperlink.html" target="_blank">hyperlinks and is simple to do.

I am not a trained programmer so don't know yet the significance of web sematic and don't know yet what is the significance of using this method on the blog, SEO, whatever, but any significance I doubt it will have a large bearing on the blog, and I quite like the simplicity. If you have doubts regarding using this method, perhaps you can wait until I publish a new post on using CSS. In the meantime, I am very happy using this method for my blog.

How to create simple text horizontal navigation bar without CSS

Step 1: extra "Add a gadget" in the LAYOUT for the blog Header. Briefly, this just involved the simple step of finding editing showaddelement='no' to showaddelement='yes' in the template.

Step 2:Go to LAYOUT, click ADD A GADGET in the blog Header section and choose a HTML/Javascript gadget (formerly called page element). Then type in this HTML, with any number of links you wish(the first code is just to show how it is done, the following codes are to show how to make it look better):

where you should change the URL and the "Link 1" to any text that describe the page you want to link to like HOME, ABOUT US, etc.

Now if you use the code above, the links will all be bunched together. If you don't like that, you will have to add space by using the space bar. You can only use the space bar once. If you want to add more space, then you will have to type where nbsp stands for non breaking space.

Further, you may also want to consider putting a vertical bar | (one with the backslash key) to separate the links like what I have done for this blog. I have also experimented with [ ] as separator and if you want to see how it looks, refer to FAQ for Blogger Tips and Tricks

The codes for the above will be something like this:

Step 3:If you are happy with the navigation bar above the Blog Title, you may leave it as it is. Otherwise, go back to LAYOUT and drag the gadget to wherever you want.

If you still want to embellish the navigation bar, perhaps you may want to add background color to distinguish the navigation bar from the rest of the blog Header. You can add an attribute background-color:red to the div tag like this

I have used the example red for the color, but you can use any color or use HTML color code #E1E1E1; for more color choices. For tasks related to color, I have found the free Iconico Color Pic and Color Blender invaluable. For color, I may write a general blogging tip on colors for blog later. In the meantime, this getting started with Color Pic may be useful.

Creating Contact forms with Kontactr (plus comparison with Google Docs)

2010-01-24T18:29:00.016+08:00

Rather than publishing your email address which may attract robotic email harvesters and spam, it is wise either to display a graphic of your email address or even better, a contact form (which I have done at Contact form for Blogger Tips and Tricks which don't reveal your email address. This post will discuss the pros and cons of using either plus how to use Kontactr for your contact form. I think I will leave a post about how to use Google Apps for contact forms till later since I have opted for Kontactr for contact form.

Kontactr for contact form

It is very easy to create a contact form with Kontactr. All you need to do is to sign up for an account, using the email address which you wish to receive emails sent from the contact form. On successful registration, an email will be sent to that email address with an activation link which you must click to activate your account. If after some time you still haven't receive the activation email, click RESEND and it will be sent to you again.

Once your account is activated and you successfully signed in, there will be a total of eight choices out of which 3 will send your respondent to Kontactr's website and the other 5, your respondent will not leave your website. I have put demonstration contact forms, links and buttons over at my test blog with the eight possibilities in the exact order as they occur over at Kontactr

The very first one is uses AJAX Embed Widget and is highly recommended.

You can also customize the color to blend with your website's colors. All you need to do is to copy and paste the script into the post editor and publish the post and if you want the contact form in a post or alternatively, into a HTML/Javascript gadget (page element) if you want it in your footer, sidebar or whatever, but the place where you embed it must be wide enough to contain the contact form. However, the good thing is it will not send your respondent to Kontactr website, but will remain in your website.

The last one at the bottom of the page is the HTML embed widget which I do not recommend

as you will have to edit the HTML to get rid of all the line breaks, otherwise you will get lots of blank spaces above your contact form.

Somewhere in the middle of the page will be the codes for the "button contact form" which is what you should choose if you don't want a large contact form and a little non space invading button that fits nicely into a little space in your sidebar. Don't take those three codes on the left. Pick any of those 3 "KPU form" with KPU a short for Kontactr Pop Up. If you install these either somewhere in a post or in the sidebar or anywhere, clicking on the button will cause the contact form to pop up with the respondent staying on your site.

Pros and cons of using Google Docs and Kontactr for contact forms

I have used Kontactr before for contact forms for other blogs except for this blog until recently. In fact, I made a small donation to Kontactr in gratitude.

Kontactr: Kontactr gives a "true contact form" in the sense that when someone enters his true email address into the Kontactr contact form, what you receive is actually an email from that email address and not a message from Kontactr that someone has sent you a message and you have to go to Kontactr's website to read the message. With that email message, if you so choose, you can respond direct to that email address. In addition, Kontactr provides a captcha (word verification) to help you reduce spam from the contact form.

What I don't like is that you will be dependent on Kontactr, a third party not as big or as strong as the mighty cash cow Google. If Kontactr services or website goes offline, there goes your contact form. Not many people provide services and products for charity, and if a provider is not making any money or worst, losing money, it is very likely to cease to provide support. This is exactly what happened in the case of a Philippine online favicon generator and host.

Google Apps: While Google Docs is still a third party provider, I have confidence in Google Apps because it is backed by that cash cow Google and so unlikely to go bust anytime. Another pro if you consider it a plus is that all the fields created in that contact form when someone fill in and submit will go to an online Google Spreadsheet which tabulates them neatly into searchable rows and columns. That can be mighty handy for you to organize all the data collected.

Unfortunately, using Google Docs don't give you a "true" contact form because it only provide you with the possibility that when someone fill in that contact form, an email message is sent to you plus a link to read the fields (such as name, email address, message) that you included in the contact form at the Google Spreadsheet that is created when you create that contact form.

Contact Form

2010-01-23T20:15:00.002+08:00

Blogger Tips and Tricks Privacy Policy

2010-01-23T14:31:00.004+08:00

Privacy Policy for Blogger Tips and Tricks:

If you require any more information or have any questions about our privacy policy, please feel free to contact us by email at .

At Blogger Tips and Tricks, the privacy of our visitors is of extreme importance to us. This privacy policy document outlines the types of personal information is received and collected by Blogger Tips and Tricks and how it is used.

Log Files (Visitor counter)
Like many other Web sites, Blogger Tips and Tricks makes use of log files. The information inside the log files includes internet protocol ( IP ) addresses, type of browser, Internet Service Provider ( ISP ), date/time stamp, referring/exit pages, and number of clicks to analyze trends, administer the site, track user’s movement around the site, and gather demographic information. IP addresses, and other such information are not linked to any information that is personally identifiable.

Cookies and Web Beacons
Blogger Tips and Tricks does not use cookies.

DoubleClick DART Cookie
.:: Google, as a third party vendor, uses cookies to serve ads on www.bloggertipsandtricks.com.
.:: Google's use of the DART cookie enables it to serve ads to users based on their visit to www.bloggertipsandtricks.com and other sites on the Internet.
.:: Users may opt out of the use of the DART cookie by visiting the Google ad and content network privacy policy at the following URL - http://www.google.com/privacy_ads.html

Some of our advertising partners may use cookies and web beacons on our site. Our advertising partners include ....
Google Adsense
Amazon
Kontera

These third-party ad servers or ad networks use technology to the advertisements and links that appear on www.bloggertipsandtricks.com send directly to your browsers. They automatically receive your IP address when this occurs. Other technologies ( such as cookies, JavaScript, or Web Beacons ) may also be used by the third-party ad networks to measure the effectiveness of their advertisements and / or to personalize the advertising content that you see.

www.bloggertipsandtricks.com has no access to or control over these cookies that are used by third-party advertisers.

You should consult the respective privacy policies of these third-party ad servers for more detailed information on their practices as well as for instructions about how to opt-out of certain practices. www.bloggertipsandtricks.com's privacy policy does not apply to, and we cannot control the activities of, such other advertisers or web sites.

If you wish to disable cookies, you may do so through your individual browser options. More detailed information about cookie management with specific web browsers can be found at the browsers' respective websites.

Simple adjustable way to hide Navbar

2010-01-16T17:31:00.010+08:00

An email from a blogger regarding his problem with hiding the navbar caused me to revisit the hiding the navbar issue plus recheck the Blogger TOS (Terms of Service) plus discovered a very simple way to hide the navbar which I tested at A-Z Products and adapted from Disable/hide navbar.

In order to hide the Blogger navbar, all you have to do is to sign into Blogger dashboard, click LAYOUT then EDIT HTML to open the template editor. Look for the body section in the stylesheet which in the standard Blogger Minima template is as follows:

background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Now all you need to do is to copy and paste this small bit of CSS

margin-top:0px;
position: relative;
top: -40px;

and paste it, say, at the bottom of the above script just before the last } like this:

background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
margin-top:0px;
position: relative;
top: -40;
}

Depending on your template, you can play with the variable -40 until the extreme top of your blog header sits right at the top of the browser window or at any position according to your desire. To illustrate, see the screen shots below showing the original, the appearance with the variable as -50, then -40:

Original appearance with standard Blogger Minima template with Blogger Navbar plus space visible

Blogger Navbar plus part of Header hidden

Update: A commentator commented that the comments of J and Carol helped him, I think, with the new Blogger Template Designer, so I figured I will add their comments into the post proper:

For those using the new Template Designer, go to Design - Template Designer - Advanced - Add CSS.
Paste this code:

div.navbar {
opacity:0.0;
display:none;
}
body
{
margin-top:0px;
position: relative;
top: -50px;
}

Curse Blogger for making me spend two days on this!!!!

7/23/2010
Carol Schultz said...
j-
I tried yours and the only modification I needed to make was the last line from top:-50px; to top:-40x;
Maybe it's different depending on the template? Thanks for your help

Related posts:
Another way of hiding the navbar (February 2007)
How to hide Navbar for New Blogger (May 2007)
How to hide New Blogger Navbar (October 2008)

Blogging tip - search definition (general)

2010-01-14T17:53:00.007+08:00

I plan this to be a series of tips and tricks for blogging in general, not only related to Blogger.com platform, but applicable for any blogging software including Wordpress, Live Journal, Jomlah, etc.

I will start off by one simple little search engine trick I often use. Frequently, I like to define some word before writing about something related to that word. What I will do is just to type the word "define" before the word in a search engine.

For example, I want to publish a post about diabetes. Searching for [define diabetes]. Further, you can use different search engines depending on what kind of results you want.

If you use Google.com, the very first result will usually be the Web definition:

Web definitions for diabetes
a polygenic disease characterized by abnormally high glucose levels in the blood; any of several metabolic disorders marked by excessive urination ...
wordnetweb.princeton.edu/perl/webwn - Definition in context

If you use other search engines, the first result will not be as consistent. For example, using bing.com, first result was from www.diabetes.org:

American Diabetes Association Home Page - Aerican Diabetes ...
The American Diabetes Association is leading the fight against the deadly consequences of diabetes and fighting for those affected by diabetes.
www.diabetes.org Cached page

but the first result for asthma was from

Asthma UK - Homepage
Asthma UK is the charity dedicated to improving the health and well-being of the 5.4 million people in the UK whose lives are affected by asthma.
www.asthma.org.uk Cached page

Cannot add gadgets with template designer? - solution

2010-01-01T19:55:00.000+08:00

A blogger who was unable to add gadgets when in design (clicking on "add gadgets" takes me the blogger back to my dashboard page). Also, if he try from layouts, thru new template designer, all options are deactivated.

The blogger solved his problem quite simply in the end:
(1) adopted new template, and
(2), changed to mozilla firefox browser... "add gadgets" got enabled again...

Well if you have a similar problem, perhaps his experience can help you solve the problem

Why sometimes AdSense unit missing and how to fix them

2009-12-19T04:58:00.056+08:00

Bloggers who have Google AdSense units set to display in their blogs often complained about missing AdSense units. I will use this blog to explain.

I have set the following AdSense units to display in this blog with the number of AdSense units in bracket):

wide skyscraper unit in the left column (1 unit)
leaderboard unit in the footer (1 unit)
large rectangle in between posts (6 in the main page but only 1 in the individual post page)

Note: There should be 6 ad units in the main page or homepage) because I have set the number of posts to display in the main page to be 7 (the default).

Now in you count the total number of ad units, you will get a total of 8 ad units (1+1+6) in the main page but only 3 in the individual post page (permalink).

Google AdSense only allows a total of 3 AdSense ad units in any page and so in the main page, the extra 5 ad units get suppressed and you only see 1 wide skyscraper unit in the left column, 1 between the first and second post and 1 between the second and third post giving a total of three.

However, in the individual post page (permalink), there is only 1 ad unit immediately after the only post, 1 in the left sidebar and 1 in the footer giving a total of 3 (allowed) units with none suppressed.

Now if you have set AdSense units to display between posts and you don't want any ad units to be suppressed and you have similar settings for the AdSense units, all you need to do is to set the number of posts to display in the main page to 1 and only 1.

Resizing Youtube video to fit main column or sidebar using calculation

2009-12-13T18:18:00.007+08:00

Method of resizing video embed codes while keeping aspect ration constant

Two previous posts Embed video in blog post and Embed video in sidebar described how to use Irfanview photo editor and resizing image to help resize Youtube to fit the width of the main column or the sidebar of the post. I have been told that Irfanview may not work on a MAC.

In this case, we will have to resort to mathematics, using proportion (ratio) to keep the resized video undistorted. I will do this using example. Below is the code for embedding a video:

Let's say we want to fit the video post (main column) into a blog using the standard Blogger 2 column Son of Moto template which main column has a width of 400 pixels (refer to How to find the width of the blog Header, main column and sidebar). Note from the code above that the the width and height of the video is 425 and 350 respectively, so the video is too wide for the main column and we have to resize it down to, say 395 pixels wide. In order that the video be undistorted, the height will also have to be resized down, say to h pixels.

Thus we have

original width = new width
original height   new height

Thus

425 = 395
350   h

Transposing, we have

h = 395 x 350 = 325
       425

Thus the resized video will be 395 pixels wide and 325 pixels high, and the code for embedding the video should be changed to

Resizing video to fit sidebar

Taking the same example blog (Son of Moto 2 column) which has sidebar width of 226 pixels, let's say we want to resize the video width to 220 pixels. Using the same calculation like above, we have

425 = 220
350 h

Transposing, we have

h = 220 x 350 = 181
425

Thus the resized video will be 220 pixels wide and 181 pixels high, and the code for embedding the video should be changed to

Blogger Dashboard (Create Posts Settings Layouts etc)

2009-12-13T12:27:00.005+08:00

"..I am having trouble with finding the settings everyone is talking..."

Today's post is pretty basic but is important because it is the starting point for all your blogging tasks. I am referring to the Blogger Dashboard which essentially is the main launching pad to whatever you want to do with your Blogger blog. Many instructions will first ask you to log into Dashboard (from blogger.com). Once you log in, you will see something like the screen shot below:

In the Dashboard you will see the link for SETTINGS which the blogger who asked the question above is looking for, among other tabs including "create" NEW POST, EDIT POSTS, LAYOUT, MONETIZE and STATS (visitor counter using Google Analytics). Clicking on SETTINGS will take you to another window with many sub-tabs (see screen shot below):

and initially you will be in the BASIC sub-tabs, and right at the bottom, you will see the GLOBAL SETTINGS (applicable to all blogs in the same Blogger account) where you can toggle between the Updated post editor and the old post editor.

Make blog into a website

2009-12-12T14:02:00.007+08:00

The title of this post could just as well be How to remove the time stamp, etc or Configure blog post. Let me explain.

This post is inspired by a blogger's question - how to remove the time stamp. I don't know his motivation for wanting to remove the time stamp, but I suspect that it is likely to be that he wants it to look more like a website than a blog. Which takes us to the question, what is the difference between a website and a blog?

Let me just quickly state what to me are some characteristics of a blog without going into controversies and then described how to remove those characteristics of a blog such as "time stamps", "posted by ....", comments, etc. so that they look more like a "website". Update: to those characteristics, perhaps I should also add Hide navbar.

Blogger with the "drag and drop" LAYOUT (New Blogger xml template) has made this very easy. All you need to do is to sign into Blogger (Dashboard), click on LAYOUT, then click EDIT in the BLOG POST section (see screen shot below):

Clicking on EDIT will then give you a window to CONFIGURE BLOG POSTS where you can just simply remove the ticks against those elements which you do not want to appear in your blog (see screen shot below):

The above screen shot showed all the elements (Day and Date, Posted by, time stamp, comments, trackbacks {links to this posts}, labels, quick edit icon) characteristic of a blog post removed (unticked). You can see an example of how such a blog will appear at Computer and Internet. I have left the other "give away's" like blog archive intact. The things you would notice missing are Day and Date accompanying the post title and the time stamps, "posted by", comments, labels, etc. at the bottom of the posts. This leave just the title and the post body.

Perhaps later I will elaborate more on the difference between a blog and a website and an illustration of what I mean.

Updated post editor: remove image border

2009-10-29T10:34:00.005+08:00

First thing to note is that with the Blogger updated post editor, you can only upload pictures in the compose mode. To remove border from uploaded photo, you will need to edit the HTML used to display the photo and that you can only do in the Edit HTML mode where in place of the photo, you will see this script:

Now one would think that the attribute border="0" would ensure that the displayed picture would not have a border, but it does, as you can see in that photo of kimchi (Korean version of sauerkraut or fermented cabbage) above.

In order to make the border disappear you can add this attribute style="border:none;" to the <img> tag like this:

and the result of that edit is this photo minus the border:

Update: As a result of test removing border from images uploaded via Blogger I have found out that the attribute style="border:none;" must be placed before src="photo URL" and not after.

Update 2: "Hi Peter, How about adding an image border? Simply changing border="0" to border="5" or "10" and making sure my colors were correct didn't cut it. Please help."

My response: Since Blogger add border to images as a default, I suppose one does not need to do anything to have border with images and to prove that, I uploaded 2 photos, first with the updated post editor, then with the old post editor, both without editing the codes. As you can see below, both are framed with a border:

Images and the Blogger updated post editor

2009-10-21T09:04:00.005+08:00

Previously with the old Blogger post editor, when you upload images, Blogger adds an alt="" tag for you to complete as seen in an example below:

Now with the updated post editor, you will only have the image upload icon in the COMPOSE mode and Blogger also inserts codes different from the above example to display the image (visible only in the Edit HTML mode) illustrated by the example below:

The code which actually display the image is highlighted in green above. Although in this case, Blogger wasn't as considerate to add the alt tag for you, you can still add it in yourself together with the title tag if you wish like the example below:

Note: You can switch between the old post editor and the updated post editor by signing into Dashboard, SETTINGS > BASIC and near the bottom of the page, you will see this for your selection:

Related posts:
Blogger updated post editor: Removing image border
New Blogger updated post editor - Birthday gift?

How to delete own comments in other blogger's posts

2009-10-12T00:41:00.008+08:00

A previous post described How to delete comments and another post was about a delete comment utility. However, "But I was thinking more in lines of my comment in another person's blog"

That is not difficult. All that is needed is that you be logged into your Blogger account when you surf over to the post where you have left comment you want to delete. You will then see a trash can icon at the bottom corner of your comment like in the screen shot below:

All you need to do is to click the trashcan icon, confirm the deletion, and your comment will be (partially) deleted, leaving behind this:

Related posts:
Delete comment utility
How to delete comments
How to delete comments Part 2

How to center date header and change font size

2009-10-10T11:00:00.005+08:00

"Do you know how centre the date?????"

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

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

and if you also want to change the font size, add this line - font-size:200% or font-size:12px; or whatever values you wish, so that the codes become

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

"Horizontal scrolling recent posts" for your blog

2009-10-09T03:34:00.012+08:00

Found this hack to make a horizontal scrolling recent post at IdeasBubble, tested it at Star Home Improvements. Before you implement this, read this caution note.

If you want this horizontal scrolling "recent posts" just below your blog Header, first you got to add extra "Add a gadget" to the blog Header section (more specific instructions at Adding "graphic" to blog Header)

When you have this extra "Add a gadget" (gadget were previously called page element), sign into Dashboard, click LAYOUT then the "Add a gadget" in the Head section. Chose the HTML/Javascript gadget:

then copy-paste this script into the HTML/Javascript gadget:

Replace http://YOURBLOG.blogspot.com/ with you actual blog URL, preview, and if satisfied, save.

Caution

I tried varying some of the parameters (attributes) like changing

nScrollDelay = 175;
to
nScrollDelay = some number;

and got eratic results, among which were getting error messages when trying to access the edited blog like this one: Recreation and sport (blog only displayed by clicking OK in the error message. Would do more testing later if I find the time) (Update: managed to get rid of that irritating error message by changing templates, and finally by going to LAYOUT > EDIT HTML > click Revert widget template to default at the bottom of the page, publishing a few posts. Don't know exactly what cleared the problem. Will do somemore experimenting later)

Make blog into book including photos

2009-10-08T08:32:00.003+08:00

Many bloggers want to make their blog into a book and one possibility is Blog Collector. Unfortunately, Blog Collector cannot print photos.

Here is another possibility - Blog2print which can also print photos. Just give them the blog URL, set the date range, choose your book cover and add an acknowledgement or dedication if so desired, and Blog2print will generate a preview of your book including a table of content plus quote their prices.

If you are not prepared to foot out $24.95 for a 20 page hard cover book or $14.95 for soft cover, you can opt for PDF file for $7.95

Create and Embed Youtube Playlist

2009-10-07T20:10:00.011+08:00

From a comment at Google sites to host and hotlink music files

"ok I have loaded a list, how do I play more than one song?"

Haven't studied how to create playlist with Google Sites (check back later), so I tried using Youtube and tested it twice - Test embedding Youtube Teresa Teng playlist (my favorite singer who unfortunately died young) as well as Test embedding Youtube Bee Gees playlist (bring back memories of the good old times), and here are the steps I took to embed those 2 playlists:

Create a Youtube if you don't already have one and sign in. Either upload your own videos with music or search for those songs you want to include in your playlist. At the page showing the selected video, click + Playlist:

Update: A commentator has drawn my attention to a change on how to create playlist and the screen shot above can now be replace by a new screen shot below where you hover your mouse over "+ Add to" and then click on the drop down choice:

Give your new playlist a name, then click ADD. Search for more videos and repeat the ADD process till all the videos you want have been added.

When done, click the down arrow next to your Youtube username at the top right-hand corner of the page and select ACCOUNT:

At the next page, click Custom video players:

then click Create custom player. Give your player a name and enter some description, select the color theme, the layout, then under CONTENT, highlight the playlist, then click SELECT:

Next, at the section for Generate Code and Save Player, click GENERATE CODE and you will get a script similar to the one below to copy-paste into your post editor or into a HTML/Javascript gadget:

Note width and height (in red). If you want to edit the codes so that the width of the embedded video player is commensurate with the width of your main column or the sidebar, use the method to resize Youtube video with no distortion so that it fits nicely into your post or sidebar.

width of

How to delete Google Account

2009-10-07T12:10:00.004+08:00

"This sounds weird, but how do I delete my google account?"

Strangely, I too had some problems when I first tested deleting a Google Account as it was not as straight forward as I thought. So here is a step-by-step instruction on how to delete your Google Account. Warning: Deleting your Google Account means you will not be able to access your Blogger account, gmail account or whatever Google Products you have signed up for. So be absolutely sure you don't ever want to access those accounts again later before you delete your Google Account.

First, sign into your Google Account. Then, next to My Products, click Edit.

At the next page, under Delete Account, click Close account and delete all services and info associated with it.

At the next page, tick all the services and products shown and enter your password.

Click Delete Google Account and your Google Account will be gone almost forever.

Related posts:
How to recover deleted Google Account (not fool proof)

Google Account deleted, cannot access Blogger.com, what to do

Motorcycle safety tip

2009-09-29T04:59:00.001+08:00

This is not a normal Blogger Tips and Tricks post but a post with an important safety message on which your life may depend if you ride a motorbike. I do not know how many of visitors to this blog ride motorbikes, but the post Motorcycle safety tip - keep to the side of the road as far as possible has an important safety message and a horrific video of a motorcyclist being run over by a truck. I hope all who view that video will tell any motorcyclist they know about the motorcycle safety tip.

Do let those you know who ride motorbikes about that video.

Picture to link to label page or any webpage

2009-09-29T00:21:00.003+08:00

"I have a picture on my side bar, I would like to link it to all labels containing say books. There are five post under that label, and when my guest push the picture of the books, I would like the page to pop up only the posts with the label, Books."

Well, that is easily done. First you have to be familiar with hyperlink, namely using <a href="URL of target webpage">anchor text (some text descriptive of target webpage)</a>. And since you want the link to go to the label page "Books", that URL will be the URL of the label page of "Books" which you can get by right-clicking on the label "Books" in the sidebar and selecting "Copy link location".

You also need to be familiar with uploading pictures to the web and getting the picture URL like what is described in Using Blogger to host pictures.

Now the required codes are

<a href="URL of target webpage"><img src="picture URL" /></a>

and if that is not clear enough, ask.

Using Google Sites to host music files for hotlinking and embedding

2009-09-26T22:22:00.013+08:00

Because the reliability of various third party web hosts are in question, I am now looking into using Google Sites for hosting music files for the purpose of hotlinking and embedding. I have done a test at Testing Google Sites for hosting music file for hotlinking (Click Play button , also, you may need to install Apple Quicktime) and the test is successful.

Using Google Sites to host music files for hotlinking and embedding

Go to Google Sites and log into your Google Account if necessary.
Click Create new site
Give your site a name (Fill in the box for
Site name:....:
Google Sites will automatically create a URL for your new site
http://sites.google.com/site/.... (depend on availability)
(If the URL is not available, a list of alternatives may appear below. Tick one if suitable, otherwise repeat the "Give your site a name" process again)
You may fill in a Site Description if you want
Site Description:.... (optional)
Choose Share with (.) Everyone in the world can view this site
Choose a theme
Complete captcha
Click Create page at the top right corner
Select a template (see screen shot below)

Choose (.) File Cabinet
Choose (.) Put page at the top level (unless you are creating a homepage)
Give your new page a name (example "Music")
Click Create Page

Click Add file
Add a file from:
(.)Your computer
Click Choose File and browse to location where you have your music file stored)
Fill in the File Description
Click Upload and wait till your file complete uploading
When the file has finished uploading, the uploaded file will be displayed below. Right click on it and choose Copy link location to save the uploade music file URL into clipboard (see screen shot below):

Replace the URL of hot-linkable MP3 file in the embed code below:

with the music file URL that you have saved into clipboard. Edit autostart="true" to autostart="false" if you don't want the music to play automatically.
Paste the embed code into your post editor if you want the music player in a post or into a HTML/Javascript gadget if you want the music player in the sidebar or similar locations.

Related posts:
Install Apple Quicktime to make MP3 player work
Hotlink filehost and embedding music player
Invisible background music player
Testing embedding music player with Imeen
Embedding Imeen playlist
Embed eSnip music player in sidebar
Make music slideshows with Fliptrack
Add music to your blog another easy way
Adding music to your blog

Access blocked sites with proxy servers

2009-09-21T01:45:00.010+08:00

For a long time, I have known that if a website is blocked (like how blogspot.com was blocked in China), one can use a proxy server to bypass the blocking, but have never tried it before. Recently, because the Malaysian government blocked Malaysia Today because the blog exposed what the Malaysian Cabinet tried to hide from the public information contained in this damning confidential Cabinet paper, I came across How to access Malaysia Today by proxy to beat the block.

Basically, this is what I gathered from that post. These are various proxy servers you can use:

Update: Those search boxes you see below are images of the search boxes of the proxy servers mentioned below. If you want to use the proxy servers, you will have to click on the links and search on those proxy servers sites themself.

Zend2.com

Surf over to http://zend2.com/ where there is a box (see screen shot below):

type in the URL (in that particular case, mt.m2day.org) and click Go!, and presto, the blocked site Malaysia Today is accesible again!!

Here are some more:

Free Anonymizer:

Hide My Ass (has pop-up)

Kproxy

HAPPY SURFING AND THUMBS DOWN TO THOSE ATTEMPTING TO HIDE WHAT NEEDS TO BE REVEALED.

Recomendation for comments - no captcha

2009-09-16T08:19:00.008+08:00

A few years back, most bloggers have to deal with unwanted spam comments, especially if they had not enabled comments moderation. Because of such widespread spam comments, most bloggers enabled captcha (word verification) for comments in which case commentators would first have to complete the word like the one you see in the screen shot below:

If you allow comments for your posts and moderate your comments, I would highly recommend you do not enable captcha (word verification) for the following reasons:

Ever since all blogging platforms including Blogger add the "nofollow" attribute to hyperlinks in comments, the incentive for spammers to post spam comments have been greatly reduced and I have found that spam comments have reduced to almost zero.

Having to complete word verification is a great inconvenience, especially for the visually impaired who have to click on the universal handicap icon in order for the alphabets in the captcha to be read out in audio form. I have tested clicking on that icon and the resulting machine voice is practically indecipherable. I have captured it on a video. Play the video below and see if you can make out what the voice is trying to say:

In my opinion, captcha is a torture. Why subject your readers to torture when the original reasons for enabling captcha, spam comments, is no longer a problem.

Update: Looks like a few bloggers have a different experience from mine in that they get lots of spam comments. I will like to hear about your experience. Please leave a comment.

Easy favicons ready to use

2009-09-16T03:20:00.007+08:00

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 install them. 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

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

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

(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.

Display images in larger sizes

2009-09-15T22:27:00.004+08:00

"why is it that my images are big but when i upload them they become so small?"

When you use Blogger's photo upload icon to display images, you can chose 3 different default sizes - large, medium and small. If your image is very large, Blogger will shrink it to a smaller size for display. However, if you are in the COMPOSE mode, you can use your mouse to grab the edge or the side and drag-drop it to create a displayed image that can be larger or smaller than the default.

Alternatively, you can use the HTML image tag <img src="photo URL" /> to display it in the original size or use that tag with a width attribute <img src="photo URL" width="some number" /> to display it in whatever size you choose.

Related posts:
Using Irfanview photo editor for your blog

How to add caption to photos

New Blogger template for posting large photos

Bubbleshare, another way to display photo album

How to make clickable (hyperlink) pictures

Put photo of authors in post footer

Putting author's photo in center bottom of post

Add series of photos in blog footer

More later.

Sitemap (TOC) for "Blogger Tips and Tricks"

2009-09-14T06:31:00.001+08:00

bX- error codes

2009-09-08T17:21:00.011+08:00

Are you facing problems and getting bX- error codes? Press ctrl+F and type in the error code to search a list of error codes below which are links to explanations for troubleshooting. For example, if after pressing ctrl+F keys, a little window will open and as you type in "bX-3r3e" you will find the link to bX-3r3ejc like in the screen shot below:

bbX-lgwej
bX-1us3c3
bX-1zu2vy
bX-2bdp09
bX-2f00qm
bX-2o3sed
bX-2v7ys6
bX-37qik4
bX-391dlh
bX-3d9atb
bX-3r3ejc
bX-45y3w1
bX-4d29hg
bX-4qmsfw
bX-5d69vr
bX-5j5nhh
bX-5tdd1p
bX-677pki
bX-68tbuv
bX-6gfpx3
bX-6tj0s5
bX-6tnmaz
bX-6vix0l
bX-7auoq8
bX-7mplh0
bX-7s15tm
bX-85oi4e
bX-9pjt6o
bX-9w7qz9
bX-acffys
bX-afo7e2
bX-aw21o0
bX-bce8517c
bX-blo1ut
bX-btoxyn
bX-cf3xin
bX-cldfi1
bX-cviw8s
bX-cxyu7t
bX-d7il0a
bX-dalets
bX-dw5843
bX-e441ek
bX-ekwfjb
bX-f87uq5
bX-ftexlv
bX-gbdnj4
bX-gcdngf
bX-geqofh
bX-gfz536
bX-gi5hu8
bX-h94xv
bX-hqxd1g
bX-i54acw
bX-idlp73
bX-irbo2k
bX-jdokxi
bX-ji78k6
bX-jp3d1
bX-kayz6v
bX-kewlk9
bX-kka0xf
bX-l28v5z
bX-l96j2
bX-l9xjx9
bX-la6m4o
bX-lsioy8
bX-ltlqzv
bX-lw8mpb
bX-lzkkhl
bX-mq2of1
bX-mtwwdi
bX-mws9sr
bX-mzm63b
bX-n3ff52
bX-n4mon3
bX-napiw5
bX-nsm4vm
bX-o0zoa0
bX-obv7m3
bX-ot8any
bX-pgtif7
bX-pn0dtw
bX-pohgdk
bX-ppqi9d
bX-pq8xgs
bX-prdd9n
bX-prxtbp
bX-pu7aaj
bX-pvq71c
bX-qa45xg
bX-qeihpe
bX-r1buvw
bX-r1ezpk
bX-resilr
bX-rfg2oe
bX-rh26vj
bX-rr85sd
bX-rthuiq
bX-rxaqrt
bX-seep61
bX-sp4hmm
bX-t0ou3g
bX-tgu0qs
bX-tkcah7
bX-tlsikm
bX-tsvpgj
bX-u01hr1
bX-ujue70
bX-uwdr66
bX-uxu3fu
bX-v2vqfh
bX-volzpw
bX-w0b81c
bX-woam4u
bX-x7mp8t
bX-xd3w84
bX-xetjcr
bX-xjlu2f
bX-xovb7t
bX-xt3xtp
bX-xu1zoq
bX-y4ne02
bX-yvq86z
bX-yvtdin
bX-z8kqgm
Error bX-l1gck6 (cannot post/upload photos from Picasa Web Album. Blogger Known Issue Problem solved as of JANUARY 21, 2010)

See also bX error codes - what to do

Sitemap (TOC) for "Blogger for Dummies"

2009-09-02T21:24:00.007+08:00

Thanks to Amanda of Blogger Buster, I learned about this simple Best Table of Content (TOC) or sitemap for Blogger which I tested by creating a sitemap for my very first "Blogger related" blog, Blogger for Dummies (which I reluctantly had to change title to Dummies Guide to Blogger because of trademark issues).

You can see the link to the sitemap at the top of the second sidebar of my very first Blogger related blog. I hope you will have a look at it and give me some feedback by leaving a comment.

I think I will probably use Abu Farhan's 2 line script for this blog as well sometime in the very near future.

Using Blogger to host images for various purposes

2009-08-30T08:47:00.004+08:00

Summary: Upload photo via photo upload icon, publish. Open post. Click on photo, press ctrl+U to display source code, copy photo URL from source code.

Nearly all bloggers would be familiar with uploading photo via Blogger photo upload icon . However, you can only display the photo in 3 limited sizes - small, medium and large. (Update: this is referring to uploading photo in the old post editor, not the new updated post editor, but what follows still remain true). Clicking on such images generally result in a larger image displayed.

You cannot directly use such uploaded images, say, to put in the sidebar, for your Blogger profile photo or to use the image as a link to another webpage or to display images side by side. For such purposes, the photo need to be uploaded to a webhost which allows inline linking or hotlinking (also called leeching, piggy-backing, direct linking, offsite image grabs and bandwidth theft).

One of such webhost is the free Photobucket image host. This post will be about using Blogger itself as a host for the images for inline linking.

I prefer to use Blogger for image hosting as I prefer my blog stuff to be stored all in the same host. If you plan to do the same, may I suggest you create a new blog for this purpose, as I have at My Photo Store and upload your photos for profile photo, backround image, etc., there.

When you upload a photo to Blogger using their photo uploading icon and you are in the EDIT HTML mode, you will see in place of the photo the following HTML code:

Such uploaded photos can be used for inline linking for profile photo, etc.You will see 2 URLs in the code. You can use the second one for inline linking (in red). However, it is better to do the following:

Publish, click on the photo which will take you to a webpage where only the photo will be displayed. Press ctrl+U to open page source and get your photo URL there. I will upload a photo below and use that as an example. You may click on the photo and verify for yourself what I am going to write:

Click on the above photo, you will be taken to a webpage where only the photo of my grandson is displayed. Press ctrl+U and the source code is revealed

<html>
<head>
<title>lewis+apple+5.JPG (image)</title>
<script type="text/javascript">

</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="http://2.bp.blogspot.com/_jizoPL28qCY/SpoRi-9CWeI/AAAAAAAADDo/NbK66dkfE2U/s1600/lewis%2Bapple%2B5.JPG" alt="[lewis+apple+5.JPG]" border=0>
</body>
</html>

and within the code is the photo URL (in red above) which you can use for inline linking.

http://2.bp.blogspot.com/_jizoPL28qCY/SpoRi-9CWeI/AAAAAAAADDo/NbK66dkfE2U/s1600/lewis%2Bapple%2B5.JPG

How to backup and restore blog with EXPORT

2009-08-29T00:31:00.010+08:00

There have been frequent incidences of bloggers accidentally deleting their blogs or having Blogger deleted their blogs, etc., so it is good practice to backup your blog so that you can restore it when such calamities happened. Previously we had to use Blog Collector to backup blog. However, Blog Collector had its limitations plus restoring the blog is tedious. Furthermore, Blog Collector only backup text, it does not backup links, embedded content like videos or music players, comments and photos. (note: uploaded photos are hosted at Picassa Web Album, so if your Picassa Web Album account is deleted, those photos will be lost)

Now that Blogger had introduced import blog and export blog, backing up and restoring your blog is very easy. Furthermore, links, embedded content, comments and photos is also easily backed up and restored with just a couple of clicks.

To backup your blog, sign into Blogger Dashboard, go to Settings > Basic and you will see 3 links: import blog, export blog, delete blog.

Update: If you are using the New Blogger UI (User Interface), the tabs are in a drop-down menu and "Export"/"Import" is at Dashboard > Settings > Other:

Click export blog and Bloger will create an xml file for you to save into your computer. You would be well advised to save the xml file with a suitable file name and/or in a folder which will enable you to not only easily locate it when needed, but also to distinguish it from a backup template xml file because both are xml files and both will have identical icon

If something drastic happened to your blog, you can similarly go to SETTINGS > BASIC, but this time click import blog, click BROWSE and browse to your exported xml file, complete the captcha (word verification), select whether to automatically publish all imported posts or not, then just click Import blog.

Now a note on the option to automatically publish all imported posts and the possibility of triggering Blogger's bot to mark the imported blog as a spam blog. If you are worried, then you should not tick the box for all imported posts to be published automatically. You will then get a list of imported posts, after which you can publish the posts in batches by ticking some posts and then clicking PUBLISH:

I have tested importing and simultaneously 400+ posts and the test blog was not marked as a spam blog. However, I do not know if you do that you will be as lucky as before I import and publish so many posts simultaneously, I added a noindex meta tag to the template.

This import export features can also be used to export your Blogger blog to other blogging platform like Wordpress, Live Journal, etc., or to import blogs from Wordpress, etc., into your Blogger blog.

Stuff for bloggers

How to change email address for Blogger login

2009-08-28T12:28:00.010+08:00

"How do I associate my blogspot blog with a new gmail address? I want to keep the content and change the gmail account." (the answer to this will also be applicable for those who have more than 1 blog but will like different PROFILE for different blogs)

If you want to use a different email address, whether gmail or other email address, to access Blogger, all you have to do is to sign into Dashboard and click SETTINGS > PERMISSION and add yourself with the new email address as an author.

Now for convenience, it is best you open another browser (see why I have so many browsers in my computer) without signing out of Blogger. Sign into your new email address and you should see a message from Blogger which should be the one containing the invitation. Accept the invitation.

Update: From a commentator: " I tried adding my yahoo email and I made it an admin but I couldn't log in. So, I created another gmail account and viola! It worked"

My response: Actually, any email address will do, not only gmail. Only thing is, that email should have associated with it a Blogger/Google account, and if it doesn't, it is easy to create one for the purpose of becoming an author/administrator

Now go back to your Blogger account in the other browser where you are still logged in and in the PERMISSION tab. You should see your other email address added as an author. Give yourself admin rights. Now if you are sure that you have added yourself with the new email address (I suggest you double check), you may remove yourself with the old email address if you wish.

Update: For those having problems, I hope this comment by Anne can help you:

. For those with multiple emails, gmails, Blogger accounts etc. and currently faces the irritation of having to continually sign in and sign out, read my recommendation on how to easily overcome that below.

I originally had the same problem as some other people. I had my blog with my ABC gmail account but wanted to switch it to my DEF gmail account. Every time I tried the instructions, it still wouldn't let me sign in with my DEF gmail account. I realized my problem: going to Dashboard, then Edit User Profile, then "Email address," I had updated that section to my DEF email. However, once I switched that section back to the ABC email and then went through your instructions, it worked perfectly and I could use the DEF gmail! Not sure if that's helpful for others with the same problem!

If you have multiple accounts and currently is irritated by having to repetitive sign in and sign out, my suggestion is to use more than one browser as different browsers have different browser cache, meaning you can be logged in Account 1 with, say, Firefox while at the same time also logged into Account 2 with, say, Google Chrome and instead of repetitively logging in and logging out, you just switch from browser to browser with no need to log out in any of your browsers.

New Blogger post editor - birthday gift?

2009-08-27T20:33:00.009+08:00

Blogger has launched a new post editor (as a 10^th birthday gift?) which they say is an improvement over the old pre-birthday post editor. You can switch to the new post editor by signing into Dashboard and go to SETTINGS > BASIC. At the bottom in Global Settings (this means your choice is not limited to a single blog but to all the blogs in your Blogger account), you will find the choice to select either the ( ) old editor or the ( ) Updated editor. You can read about the updated editor at An overview of the new post editor.

Blogger claims improved image handling with the new post editor. Now when you upload a photo, it will be placed at the insertion point (cursor) rather than always at the very top of the post editor and dragging it (in the COMPOSE mode will not kill the link to the enlarged photo as with the old editor. However, this "improvement" comes with a price. The photo upload icon is missing from the toolbar in the updated post editor in Edit HTML mode. Looks like Blogger have dropped the video upload icon for that is missing in both Edit HTML mode as well as the Compose mode

Compare the toolbars of the old and new editors below:

Toolbar in EDIT HTML mode with old post editor

Toolbar in EDIT HTML mode with new post editor

Toolbar in COMPOSE mode with old post editor

Toolbar in COMPOSE mode with new post editor

I have tested the photo upload with the new editor and I don't like it. Fortunately one can easily toggle between the old post editor and the updated post editor. Go to Dashboard, SETTINGS > BASIC and at the bottom, you will find the Global Settings (meaning whatever changes you do here will apply to all the blogs in the same Blogger account). There you can select the old editor again. May try the new post editor again sometime in the future. I understand Blogger may do some tweaking after negative feedbacks. See screen shot below:

Related posts:
Images and the Blogger updated post editor
Blogger updated post editor: Removing image border

Individual post visitor counter with Google Analytics

2009-08-26T11:09:00.004+08:00

Installing separate visitor counter for each individual blog post is a frequent blogger request. So far, we can only install visitor counter for the whole blog, not for individual post. However, with Google Analytics which store an enormous amount of data plus allow you to analyze the data in great number of ways, it is now possible to have a pseudo individual post visitor counter (or on closer inspection, it is not pseudo but real provide you choose a relevant keyword to filter).

Now if you are logged into Google Analytics Dashboard, click on CONTENT > CONTENT BY TITLE, you will see a box for FILTER PAGE TITLE (see screen shot below):

Type into the box a suitable keyword to help identify the post for which you want to check and click GO. You will see a list of blog post titles with the number of pageviews etc. For example, I want to see how many pageviews were there for posts containing the word "categories", I type in the word "categories" and filter and you can see the results in the screen shot above.

Now you may even try to filter Google Analytics data by blog title by typing in the full title into the box to filter. For example, I typed in "3 column templates by Thur" and found that there were a total of 253 pageviews for that particular post (see screen shot below):

Restore deleted Google account, gmail and blog

2009-08-25T13:27:00.010+08:00

For those who accidentally deleted their Google account or deleted Google account because they forgot their Blogger account is tied to the Google account, but now want to restore access to Blogger, do not give up hope.

If you want your Google account restored, please go to Accounts Help contact form as soon as possible.

Update 19 June 2010: Apparently, the above have helped a blogger who had her removed from blogger, and disabled from gmail for reasons unknown get her blog and email access was restored.

Recover deleted blog -(undelete, restore)

2009-08-23T13:34:00.014+08:00

Note: Testing Amazon Affiliate integration into Blogger.com's post editor with an iFrame to the left of this post (added direct from Blogger post editor):

Blogger has not too long ago introduced 3 new functions - Import blog, Export blog, Delete blog accessible via Dashboard > Settings > Basic (see screen shot below):

If you want to delete the blog, just click on Delete blog and it will be done. Now Blogger has also made it easier for you to recover (undelete) your deleted blog. If you go to the Dashboard, you will see a list of your blogs, some of which may be hidden (at the bottom of the list of blogs may be the statement for example - "displaying 4 of 5 blogs" with 1 hidden):

Click on "Show All" and the whole list of blogs, including the deleted blog, will be displayed:

Just click on "Undelete this blog" and you would have restored your accidentally deleted blog.

Related posts:
Google account deleted - what to do
Restore deleted Google or gmail account
Google account deleted - cannot access blog: what to do
Recover blog deleted as splog or TOS violation
How to recover accidentally deleted blog post
How to recover from accidentally delete
How to recover deleted comments
FAQ: How to restore deleted comment, post, blog or Google account

HTML: non-breaking space and its applications

2009-08-23T10:24:00.006+08:00

A frequent complaint of bloggers is that when they want more than 1 spacing (beyond the single space inserted by the space bar like between here and here), Blogger will display only 1 single space irrespective of how many times one press the space bar. Now how did I get the extra spaces above within the bracket above?

The answer is simple. Where I want a space, I type . If I want more space, then all I have to do is to type in more .

A frequent use of non-breaking space is when making tables. For example, we may specify <table border="1"> to create a border for a table. However, if a cell is empty, the border for that cell may not be displayed. In order to force the table to display an empty cell with a border, one can type into the cell a so that it is "empty but not empty if you know what I mean" and will a blank cell with border.

Other uses of the non-breaking space is to make indent like in the beginning of this paragraph. The non-breaking space can also be used in comments as I will demonstrate by leaving a comment after I publish this post.

Recover accidentally deleted post: How?

2009-08-23T09:03:00.019+08:00

(If you are looking for help to recover deleted blog, refer to related posts or other related posts at the bottom of this post)

Blogger has introduced Undelete this blog for you to easily recover deleted blogs. Unfortunately there isn't a "Undelete post" yet. So if you accidentally deleted a post, how can you try to recover (undelete) the deleted post? There are 3 ways, one of which depends on the cooperation of a helper plus a good memory or clever guesswork.

Method 1

This method is applicable if you are still working on the same computer where you had prepared the post (or had viewed the deleted post). Just press ctrl+H (Cmd+H on MAC OS) to open a sidebar listing the browser history. Go to the part where you were editing the post and continue to edit or publish the post (or copy-paste from the cached copy of the displayed post):

Alternative keyboard shortcut to call up the browser is shift+ctrl+H (shift+Cmd+H for MAC OS).

Method 2

This method is applicable if you had not closed the tab or window where you had been preparing the deleted post (or had viewed the deleted post). Just keep pressing the BACK button till you get back to the point where you were editing the post (or had viewed the post).

Method 3

Try to find a cached copy of the deleted post on the Web and restore the post from the cached copy. Type in

cache:URL

to try to find cached copies on the net.

Alternatively, you can just type in some relevant search terms, especially what you can remember from the post title, into the search box and search. If the search throws up a result, click the link cached (see screen shot below) to open the cached webpage and either reconstruct a fresh post with the content from that cached webpage or alternatively use the method described in Recover accidentally deleted post including original permalink and comments to restore the post to its original state.

Another possibility is to try the Way Back Machine. For demonstration, I typed in the old pre-custom domain URL of this blog, namely http://blogger-tricks.blogspot.com into the Way Back Machine and this is what I obtained: archives of blogger-tricks.blogspot.com from Way Back Machine and below are the screen shots of the results:

and here is the screen shot of the October 8 2007 archive which showed no background color for the header and the old Google AdSense custom search box which if you compare with the current search box above, is different thus verifying that is is the actual archive of a page which now is non-existent on the Internet:

Once you have located a cached copy from the search engine, you can either copy the content and create a new post using the pasted content. However, the permalink (individual post URL) will be different from the original. If you don't want to recreate the post but want back the same permalink, then refer to Method 5: recover deleted post with original permalink.

Method 4

This is applicable even if you have no access to the computer where you had edited or viewed the deleted post, but you must have the URL (permalink) of the deleted post. If you don't have the URL, then you can try to guess the URL from the post title.

For example, the title of this post is "Recover accidentally deleted post: How?". Now I haven't published the post yet, but I can guess that this post URL will be:

http://www.bloggertipsandtricks.com/recover-accidentally-deleted-post-how

If you have or can guess the deleted post URL and you want to try to undelete the deleted post, you can try posting the post URL and your problem at Blogger Help Forum and hope to catch the attention of a Blogger Employee.

Refer to Recover accidentally deleted post with permalink intact for Method 5

Method 6. Get blog Feed

The idea for this method was obtained from Mishka. Full Success or partial success or failure with this method will depend on whether you have set your blog feed to none, full or short. If you have set blog feed to full, you will even be able to recover the images you included in your deleted post.

What you do with this method is to surf over to your blog and look for that feed icon (this section is under editing)

:
Recover deleted blog (undelete blog)

How to recover accidentally deleted blog

How to recover deleted gmail or Google account.

Recover deleted post with original permalink and comments

Blogger's Tenth Birthday: Goodies galore

2009-08-19T04:02:00.003+08:00

Blogger's is going to be 10 years old late August and like any other blokes Blogger is going to celebrate by rolling out more goodies for you, plus some "pre-birthday" goodies, one of which can make you famous. How? Write a story about you and Blogger, then fill in this form including giving a link to your story. If you agree to share your story with the press, you may even get published in the newspaper and be famous!

Don't know what to write about? Go to Blogger is turning 10 and Blogger is turning 10 Part 2 and read about what others do with their blogs. Can give you some ideas.

Wondering if I should try to get famous.

Another of Blogger's "pre-birthday" goodie? Blogger has added PubSubHubbub protocol which will enable your blog feed to be practically instantaneously broadcasted to Google Reader and other feed readers.

And get ready for more to come for Blogger has announced that they had been hard at work trying to think about what they could give you to celebrate!!!

Hyperlink: Difference between target="new" and target="_blank"

2009-08-12T18:14:00.006+08:00

If you are not familiar with the HTML hyperlink tab <a>, go first read anchor text and how to make hyperlink open in new window or tab and/or making active (clickable) hyperlink in posts and comments. Please take note that the target attribute has been deprecated and will not pass W3C XHTML 1.0 Strict validation. So if W3C validation is important to you, you should not use the target attribute.

To make hyperlink open in new tab or window, one uses either the target="_blank" or target="new" or target="anything" where anything is exactly that, any word, even meaningless one like "abtjsgj". Now I have received query what is the difference between them. Before publishing this post, I have tested the hyperlinks with different attribute at testing target attributes for hyperlinks where you can try out the links yourself.

When you use the target="_blank" attribute for the hyperlink <a> tag, all links with that attribute will open in new windows or tabs. When you use the target="new" or target="anything" attribute, the first click on any link with that attribute will open in a new window called new or anything. Any subsequent click on any link with that attribute will open in the same window called new or anything.

Anchor text and how to make hyperlink open in new window or tab

2009-08-11T16:19:00.009+08:00

This post is for those very new to HTML, but want their hyperlink to open in new window or tab. I have already published a short post How to make links open in new windows but apparently there are some who still have problems understanding: "I'm not very tech savvy and I tried your solution, the code you provided, with the website taking the place of the word "Description" correct?" so let's try to make the instructions and explanation clearer.

First, an explanation about anchor text (that is what I called DESCRIPTION above). That is some text in your post that you want highlighted (normally blue). For example, I want these text: Make active (clickable) links in post and comments to link to another of my post on hyperlinks. So I highlight those text by clicking and dragging the mouse over those text (see screen shot below):

These text is know as the anchor text. After highlighting the anchor text, click on the "insert link" icon and a pop-up will appear where you are asked for the URL of the webpage you want the anchor text to be linked to:

Type or copy-paste the URL of the webpage you want to be linked to, click OK and if you are in the EDIT HTML mode, you will see the highlighted text being replaced by the hyperlink tag as follows:

<a href="http://www.bloggertipsandtricks.com/2006/09/how-to-make-links-open-in-new-windows.html">How to make links open in new windows</a>

Now if you want that hyperlink open in new window, all you have to do is to edit the hyperlink tag by adding target="_blank" as shown below:

<a href="http://www.bloggertipsandtricks.com/2006/09/how-to-make-links-open-in-new-windows.html" target="_blank">How to make links open in new windows</a>

After this, I hope you now understand fully what is meant by hyperlink, anchor text and how to make hyperlink open in new window or tab.

Update: If you don't want to do this individually but wants all links in your blog to open in new windows without you having to do anything, then refer to How to make all hyperlinks open in new windows

Divide footer into 3 column

2009-08-09T09:39:00.003+08:00

A blogger: "I want to divide footer into 3/4 columns as like in your 'goodcomputersoftware.blogspot.com'

The above demo blog uses template from Ourblogtemplates.com. If you just want to modify your existing template, Amanda of BloggerBuster has a very good instructions at How to add 3 columns to your footer which should work for any template as the new columns uses fluid width.

I tested her instructions by modifying my 4 column Minima template into 4 column Minima template with 3 column footer and you can see the result at Star Self Improvements. The 3 columns at the footer had been used to contain widgets from Amazon and may take some time to load.

Missing tool icons shorter toolbars - what to do

2009-08-04T21:06:00.009+08:00

Update: This post was written for the old post editor and not for the updated post editor. You can toggle between the updated post editor and the old post editor by going to SETTINGS > BASIC and at the bottom (Global Settings), tick your preferred post editor. The new post editor especially in the edit HTML mode has very few icons. There are no filmstrip icon (video upload) in the new post editor

It has happened a few times in the past that bloggers complained that suddenly those icons in the Blogger post editor for specifying the color, font type and size have disappeared. Now if previously the toolbar in the post editor had looked like this (see screen shot):

but has changed to this (see screen shot):

then the problem is easily solved. What has happened was that previously the post editor was in the compose WYSIWYG mode which has a longer toolbar with more tool icons but somehow the blogger probably got changed into the edit HTML mode which has a shorter toolbar with less icons. All you need to do is to change back to the Compose mode if those extra tool icons are important to you.

However, my advice to you if compose WYSIWYG mode is what you prefer is to switch over to the edit HTML mode as you can do more and have better control over your blog.

Related posts:
Missing toolbar, distorted unusable post editor
What to do when you don't see EDIT HTML/COMPOSE tabs
Cannot see toolbar in post editor - what to do

Change sidebar title background color

2009-08-03T20:38:00.004+08:00

A blogger asked: "I want to add background colour to the sidebar title / header. pls show me the way.".

Well, that is not too difficult. Sign into Blogger (Dashboard), click LAYOUT > EDIT HTML to open the template editor and search for this:

.sidebar h2 {
etc. etc.
}

etc. etc. means whatever may be in between { and } but which is not relevant to this post

Edit it (add a line) to read

.sidebar h2 {
background-color:blue;
etc. etc.
}

If you cannot find

.sidebar h2 {
etc. etc.
}

Then just add this:

.sidebar h2 {
background-color:red;
}

(or any color rather than red or any other HTML color code

to anywhere before

]]<>/b:skin<

but preferably just after:

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

so that it is together with others in the template which is related to the sidebar. That section of the template will then look like this:

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
background-color:red;
}

Note: My aim is to make this blog easy to understand, so if the above is difficult for you to follow, do make a comment and let me know what is the source of your difficulty.

Related post: How to change background color of sidebar

How to recover deleted comments

2009-07-30T20:38:00.006+08:00

Yes it is possible to recover deleted comments, but only if you moderate comments via email and you don't delete those emails which had been sent to your chosen address. I will use as an example the comment which inspired this post which you can see in the screen shot below:

This is how you recover deleted comments. First locate the relevant email with the comment. If you have not set your comments to allow anonymous comments, go to Blogger Dashboard, SETTINGS > COMMENTS and set it to allow anonymous (anyone) comments, only temporarily if you wish. Now go to the post where the deleted comment you want restored is. You can do this easily as the email for comment moderation has a link to the post (plus a link to the commentator profile which you would need later). Right click and chose open link in new tab (preferable) or open link in new window (if you don't use a browser with tabbed browsing like Firefox.

In that post, click Comment to open the comment editor, go to the email, copy the comment and paste it into the comment editor. Now your comment editor should look like the screen shot below if you had set comments to allow anonymous comments (Anyone). Tick Name/URL (see screen shot below):

Go back to the email, right click on the commentator name (highlighted with red ellipse in the screen shot above), select Copy link location to copy the URL of the profile of the commentator into clipboard. Go to the comment editor and paste the URL into the box for URL (see screen shot above).

Go back once more to the email, copy the display name of the commentator into the box for Name. Now all you have to do is to publish the comment and the recovered comment will not only have the comment itself, but also the commentator's display name which is an active clickable link to the commentator profile. The only difference from the original comment will be that the photo of the commentator will not be displayed.

Note: If the original comment is Anonymous which is not clickable, then you can only put Anonymous in Name or tick Anonymous instead of Name/URL