Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Sep 29, 2007

Digg This Story

Author Comments - Different Styles

Bloggers generally welcome constructive comments and feedback on their posts. Among the ways to encourage comments are to remove the “nofollow” tag and to add a Recent Comments widget into the template. Comments highlight issues that readers might have faced, and the author's reply to these comments may be useful to other readers as well. If you have many comments posted in your blog, it would be nice to add different styles to the author's comments to make them stand out from the rest. Readers with questions on commonly asked issues may easily find their answers in previous posted comments. This tutorial shall explain how the author comment styles can be added to the template.

After 7 months of blogging, we have today hit the 300,000 visitors mark. It is not a big deal to many bloggers but it means a lot to us, knowing that whatever leisure time we had given up to write these articles was worth the while. Thanks to all! While we were reviewing our articles earlier, we realized that there were so many comments in several of them that we had a hard time finding our own comments. We have therefore decided to highlight our comments to make it easy for our readers to sieve through and check if their issues have been addressed. An important point to note is that some of the answers we posted may have been superseded by events and you are still free to post the questions again.

Modify Template

Since this article is about setting a style for the comments that appear after a post, we assume that you have configured your Blog to display the comments. Check Settings -> Comments and select “Show” Comments.

Before you begin to do anything, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.

Author Comments - Different Styles

Click the check-box next to “Expand Widget Templates”.

Press Ctrl+F and search for the word “comments-block”. You should come to these lines. Insert the code (shown in red):-

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" +'>
<a expr:name='"comment-" +'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><></a>

<b:if cond=' =='>
<dd class='blog-author-comment'>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>


<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" +' title='comment permalink'>
<b:include data='comment' name='commentDeleteIcon'/>

Comment Styles

After you have inserted the above code, scroll upwards in the template and Ctrl+F to search for the word “comment-body”. In the Minima template, you should have this code:-

#comments-block .comment-body {
margin:.25em 0 0;
#comments-block .comment-body p {
margin:0 0 .75em;

According to our Poll, the second most commonly used template is the Rounders template. In Rounders, this is what you will find:-

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
.comment-body p {
margin:0 0 .5em;

In other templates, you should see “comment-body” classes similar to the above. This is the current style for the display of all comments after the posts. To have a different comment style for the author, copy what you have in your template, paste and rename the class. For example, in the Minima template, we shall add the code (shown in red):-

#comments-block .comment-body {
margin:.25em 0 0;
#comments-block .comment-body p {
margin:0 0 .75em;
.blog-author-comment {
margin:.25em 0 0;
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;

You can name the new class anything you want by changing the “.blog-author-comment” to something else. (Don't omit the full-stop in front.) Just remember to rename that bit of code discussed in our earlier section. In our example, we have used the same margin settings but added a padding (space around the text) of 5px at the top and bottom, and 10px on the left and right. We introduced a thin border surrounding the text and added a background color. For more color codes you can refer to our Color Code Chart. The author's comments block will look like this:-

Author Comments - Different Styles

If you are using the Rounders template, follow the same steps as above, copy the “comment-body” styles and add the new classes. For example, the code can look like this:-

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
.comment-body p {
margin:0 0 .5em;
.blog-author-comment {
margin:0 0 1.25em;
padding:0 0 0 20px;
.blog-author-comment p {
margin:0 0 .5em;
padding:0 0 0 20px;
font-style: italic;

Did you notice that we have not changed the margins and padding? The author's comments will be different though as there is now a text color and the font-style is in italics. This is what you will see:-

Author Comments - Different Styles

If you are using other templates, do the same by copying the current “comment-body” styles and inserting the new classes and new styles. Experiment with the different style options and colors. If you need more ideas, you can refer to the list of properties in our article Links - Hover and Rollover Effects.

You can even insert a background image to the author's comments and change the font to a larger font or a different font typeface. The code will look like this:-

.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
background: url("URL OF IMAGE");

Try out different blog author comment styles and settle on the one that best suits you. Refresh the blog every time you make the change. You will notice that there is a “Post a Comment” link at the Comment footer. Should you want to rename it and change the words, read our short guide on Change the Post a Comment Link.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Sep 27, 2007

Digg This Story

Flash Music Player and Music Playlists

In our earlier article, Add Music to Blogspot Blog, we talked about how music can be played in the background of the blog or through a hyperlink or music console player. Readers had requested for an option to play more than one song via a playlist. We have been looking at cross-browser music players that allow us to display a music playlist of selected musical pieces for Blog readers to listen to. Here, we shall discuss what we believe is a good music player that can be played in both Firefox and Internet Explorer. The following are the instructions on how to embed the music player into the Blogger blog.


On the internet, there are several sites that offer music player widgets and gadgets (including Google Gadgets) that can be added to your blogs. Most of them have easy-to-navigate user interface, and sites like Sonific even offer free licensed music tracks that can be inserted into the widget. These are commercial sites and needless to say, in order to sustain their operations, there will be advertisements and sales promotions. Furthermore, the available songs that they have may not be the latest hits or to your liking.

If you would like more control over the choice of songs for your blog, follow the steps in this tutorial to upload the songs that you like and add a music player code into the Blogger blog. The music player plays MP3 songs which have smaller file size than .wav files.

XML Shareable Playlist Format

You may have come across file extensions .m3u and .asx. These are playlist files and clicking them will play the music or video files stored in the playlists. The new XML Shareable Playlist Format (XSPF) (pronounced 'spiff') is another playlist format for digital media. Although it is still in the early stages of being recognized as an Internet standard, many browsers are able to execute such file formats.

XSPF MP3 Music Player

The site that explains quite fully how a music player application using this XSPF playlist format works is In that article by Fabricio Zuardi, you can find different player styles i.e., a Slim version that displays the basic controls and current music track; an Extended version that shows the controls, list of songs, album cover and music track; and a Button version that is simply a start and stop button. There is also an option for inclusion of the player into the Mozilla Firefox sidebar. What this does is to give readers an option to go to their Firefox Bookmarks and click “My Music Player” link to open the music player in their browser sidebar and listen to the songs while surfing other sites.

Extended Music Player

Flash Music Player and Music Playlists

We shall focus on this extended music player version (demo at the bottom of this blog) which essentially displays a scrollable list of songs, have album pictures, and enable user control over the volume and play mode. First, click this link to download the music player files. Unzip the folder and save it. The files are free from virus and spam ware but you can of course scan them before downloading.

Next, upload all the player application files contained within the unzipped folder onto a web server. For our illustration, we have uploaded our files onto the free server at Google Page Creator. You can also refer to our article on Manage Blogger Image Storage Space for a list of other free file hosting services. Choose one that allows uploading of all types of files as well as hotlinking to those files. To test whether they allow hotlinking, upload a music file and if you type that music file url into an internet browser, you should be listening to that music instead of being brought to a page with other contents. If you have uploaded the application onto Google Pages, the player file will be located at [Do note that Google Pages has a limit of 100MB in storage space.]

Upload Music Files

The aim is to allow readers to listen to your music pieces. Of course, we have to assume you already have the music files either in a music CD or computer. Convert them to MP3 formats. If you need a free music converter, look for one at Upload these MP3 files onto the free server.

Create XSPF Music Playlist

After you have uploaded the songs, it is time to create the Playlist file. Open the application Microsoft Notepad. For most Windows users, the link should be at the Start Programs -> Accessories folder. Copy and paste the following into the Notepad.

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="0" xmlns = "">
<!-- Insert the information into the colored portions. If there is none, just leave the field blank. Refer to for updates to the code. -->

<title>Title to be displayed at top of player</title>

<annotation>Song1 display text</annotation>

<annotation>Song2 display text</annotation>

<annotation>Song3 display text</annotation>

<annotation>Song4 display text</annotation>

<annotation>Song5 display text</annotation>


Insert into the colored portions the music URLs and the corresponding titles or text that you want to display. If there are no album covers or images that you want to upload, leave the fields blank. You can add more songs to the list. Copy and repeat the block of code (in italics).

After you have inserted all the information in Microsoft Notepad, click “Save As”. Under the drop down option “Save as type”, choose “All Files”. Assign a file name and end it with .xspf extension. For instance, if you decide to call it myplaylist, then enter the “File name” as “myplaylist.xspf”. Save the file and similarly, upload this file onto the free server. The playlist file will have a URL like this:-

Insert Music Player into Blog

The final step is to embed the music player onto the Blogger blog. Decide where you want to place the music player console. Then go to Template -> Page Elements -> Add a Page Element and select “HTML/JavaScript”. If you want the music console in your post, when you are at the Post Editor, change to the “HTML” mode rather than “Compose” mode.

Copy and paste the following code:-

<!-- Change the colored values. Refer to for updates to the code. -->
<object codebase="" type="application/x-shockwave-flash" height="160" standby="Player is loading ..." width="400" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param name="_cx" value="10583">
<param name="_cy" value="4445">
<param name="FlashVars" value="">
<param name="Movie" value="">
<param name="Src" value="">
<param name="WMode" value="Window">
<param name="Play" value="0">
<param name="Loop" value="-1">
<param name="Quality" value="High">
<param name="SAlign" value="LT">
<param name="Menu" value="-1">
<param name="Base" value="">
<param name="AllowScriptAccess" value="sameDomain">
<param name="Scale" value="NoScale">
<param name="DeviceFont" value="0">
<param name="EmbedMovie" value="0">
<param name="BGColor" value="E2E2E2">
<param name="SWRemote" value="">
<param name="MovieData" value="">
<param name="SeamlessTabbing" value="1">
<param name="Profile" value="0">
<param name="ProfileAddress" value="">
<param name="ProfilePort" value="0">
<param name="AllowNetworking" value="all">
<param name="AllowFullScreen" value="false">
<embed src="" quality="high" bgcolor="#E2E2E2" name="xspf_player" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="" align="center" height="160" width="400">

The variables that you should remember to change are:-

1. The domain or location where the player application was uploaded (shown in purple).

2. The location of the music playlist file (shown in red).

3. The background color code of the music player (shown in blue). You have limited choices here because the gray panel colors are fixed. For a list of color codes, refer to our Hexadecimal Color Code Chart.

4. The width and height of the music player interface (shown in green).

Once you are done, save the widget and refresh the Blog. You should now see a MP3 Music Player that has a music playlist of your favorite songs for readers to view, select and listen to.

Have fun toying with the new music player widget!

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Sep 25, 2007

Digg This Story

Submit Blogger Sitemap to MSN and

We had explained how to submit Blogger sitemaps to Google and Yahoo!. When the sitemap industry standard was first announced in 2006, Microsoft's MSN was one of the three major search providers which supported the protocol. Submitting your Blog's sitemap to these search engines will enable them to index the pages and contents of the site. Needless to say, having all the pages indexed will essentially avail your contents to more internet users and improve your site's page rank.

Blogger Sitemap

If you own an external domain site, you can search the net for sitemap generators which help you create a sitemap file. Upload the file onto the root directory and call it sitemap.xml. The full URL of the sitemap will then be something like this:- “”

However, we cannot upload files onto the root directory of Blogger blogs. Hence, when asked to insert a Blogger blog sitemap, it will have to be either:-


Replace YOURBLOGNAME with the name of your blog. For Blogger blogs, do not add "www." to YOURBLOGNAME. As an example, our blog's sitemap will be

Submit Blog Sitemap to MSN

Unlike Google and Yahoo!, MSN does not have a set of procedures or an address where you can submit sitemaps to. In the latest post in their Microsoft Live Search Weblog, they had invited webmasters and developers to help build a New Webmaster Portal that would include sitemap creation, submission and ping tools, very much what Google and Yahoo! already had. Once MSN has that user interface, we shall update this article.

The MSN team had suggested that webmasters add this to their robots.txt file to have the MSN spiders crawl the sitemap file:-

User-agent: *

Again, we do not have root access to the Blogger server and this will not avail to us.

The alternative solution in the meantime is to submit the Blog sitemap to It seemed that there was a standing arrangement for Moreover to provide the submitted feeds to MSN for crawling and indexing.

Whether or not the arrangement still holds true, there is really no harm in submitting your sitemap to Moreover.

Copy and paste this line into your internet browser, replacing the portion in red with the name of your Blog:-

If you have submitted it correctly, you should see this message:-

Thank you for your ping. The moreover database will be updated with the new data from your url - as soon as possible.

Submit Blog Sitemap to, previously known as Ask Jeeves, is the next major internet search engine. The sites that it owns include Excite, Bloglines, MyWay and iWon. It is also a participant of the Sitemaps protocol program.

Submitting the sitemap to Ask is easy too. Copy and paste this line into your internet browser, replacing the portion in red with the name of your Blog:-

If you are successful, you should see this screen:-

Submit Blogger Sitemap to MSN and

Submit Sitemaps to other search engines

Progressively, there should be more search engines that will join this Sitemaps program. More likely than not, they will use the recommended ping submission format:-


If you are unable to find a submission link in that search engine site, try the above and keep your fingers crossed that it is the correct ping address.

Finally, submit your Blog to Blog Directories and Feed Directories to let more people know about your Blog. As well, submit your Blog to the various Search Engines for maximum exposure.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Sep 24, 2007

Digg This Story

Recent Comments Feed Widget

We wrote earlier about creating Recent Comments and Recent Posts Widgets using Blogger's “Feed” page element. It was a simple method that even non-techie Bloggers can understand and use. In the middle of last month, Blogger did a major change to the GData API and many bloggers suddenly saw broken entries in their feed widgets. Although Blogger has tweaked the Feed widget to make this work again, the widget looks odd as we shall explain below. For those who can't wait to have the Recent Comments widget up and running, we shall explain here how you can have a Recent Comments widget using JavaScript instead.

Change in Blogger Feeds

All along, for posts and comments without titles, Blogger used the first line of the post or comment as titles in the feeds. In a typical “Feed” page element, the titles are important as these are displayed as links in an unordered list format.

Blogger did a supposed bug fix and the “title” element was no longer a post snippet for posts with no title. This affected the comments feed, since comments never had a separate title field but were appended to the posts. According to Google's Pete Hopkins, the rationale was “to balance making the Atom feed a correct representation of the post - for Atom Publishing Protocol clients - and making the feed work the best in various feed readers.”

There was a lot of unhappiness among users and developers. Other than broken comment feed widgets, it affected Firefox live bookmarks as well.

Enable Comments Feed

First, we have to ensure that Comment Feeds are enabled. Once you are logged in, go to Settings -> Site Feed and switch to “Advanced Mode”. You should set the “Blog Comment Feed” and “Per-Post Comment Feeds” to either “Short” or “Full”. Do not choose “None”. Save the Settings.

Recent Comments and Recent Posts Widgets

Feed Page Element method

If you had followed our earlier article to insert the Comment Feed URL into the “Feed” page element, this is what you will see:-

Recent Comments Feed Widget

Do you notice the gaps in between? These are the hard returns in the comments and they are not removed in the widget, unlike previously. It doesn't look as sleek now. Compare this to what we have below.

Recent Comments Widget JavaScript

The way to work around this would be to go back to using JavaScripts. We have been slow to recommend JavaScripts because there are simply too many malicious scripts out there. Most will upload their scripts onto their external sites and provide you a code for insertion into your template. The code can look like this:-

<script src="">

When the page loads, the browser will visit that external site to read the script contained in the .js file. Because of the security risks in running unknown scripts, many users have configured their browsers to disable scripts and the scripts will not be read. Your readers may hence not be able to view the contents in the widget. Before inserting any of these scripts into your blog, ensure that they are from trustworthy sites. Even then, as we had pointed out in our article on Internet Security and Blogger Virus, there is nothing preventing the site owners from altering the script after sufficient people have linked to it.

We went through several of the Recent Comments scripts and they are mostly workable. Some allow you to fully customize the widget styles and provide user-friendly interface for easy selection of the options. It is difficult to know who wrote the first set of original script as almost all of them claimed to be the authors, even though some scripts looked rather identical.

What we did was to take a couple of them, and change and modify that to our unique script. Our simple Recent Comments widget will look like this.

Recent Comments Feed Widget

We are not going to upload the script onto our site and have you link to it. Instead, we shall let you have the full JavaScript code that we have used so that you know what goes into it. Login and go to Template -> Page Elements -> Add a Page Element in the sidebar and select “HTML/JavaScript”. Copy and paste the code below.

Update: <noscript> tag added. Readers like us who have disabled JavaScript in our browsers will see a statement instead of a blank space.

<ul><script style="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < 5; i++) {
var entry = json.feed.entry[i];
var ctlink;

if (i == json.feed.entry.length) break;
for (var k = 0; k <; k++) {
if ([k].rel == 'alternate') {
ctlink =[k].href;
ctlink = ctlink.replace("#", "#comment-");
var ptlink = ctlink.split("#");
ptlink = ptlink[0];
var txtlink = ptlink.split("/");
txtlink = txtlink[5];
txtlink = txtlink.split(".html");
txtlink = txtlink[0];
var pttitle = txtlink.replace(/-/g," ");
pttitle =;
if ("content" in entry) {
var comment = entry.content.$t;}
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");

document.write('<a href="' + ctlink + '">' +[0].name.$t + '</a>');
document.write(' on ' + pttitle);
if (comment.length < 100) {
comment = comment.substring(0, 100);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + ctlink + '">(more)</a>');
document.write('<div style="font-size:75%;text-align:center"><a href="">Widgets by Tips for New Bloggers</a></div>');
<script src="">
<noscript>You need to enable JavaScript to read this.</noscript>

Change these options:

1. If you want more than 5 recent comments to appear in the widget, change the value in blue.

2. The comment length is capped at 100 characters. Adjust the value in green if you want to change that.

3. You must change the part in red to your own Blog URL.

After changing the values, save the page element and refresh your Blog. You should have a Recent Comments widget showing the latest comments posted on the Blog.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Sep 18, 2007

Digg This Story

Technorati Tags in Blogger Posts

Technorati, which indexes some 94 million weblogs, allows blog owners to assign tags to their posts. These tags are essentially words which describe the category that the posts, photos and videos fall under. Visitors can then search these tags to find the relevant blog posts. How can the Technorati tags be inserted into Blogger posts so that they can be indexed by Technorati? Is there a need to include Technorati tags in the first place?

Tags for Blogs

There is a Blog Finder function in Technorati which searches for blogs within general topics of interest. When you first register with Technorati, you can assign twenty tags which best describe your blog. To edit them, login to Technorati and go to Account -> Blogs. Click “Edit Settings” to change the tags and when finished, click “Save Blog Info” at the bottom of the page. Try to fill up all the 20 tag slots and choose keywords that are relevant to the blog contents.

To check if your blog is properly tagged, copy this URL into the internet browser and insert one of the 20 tags into the portion in red. Your blog should appear in the blog listing.

Tags for Blog Posts

If you search the net, you can find several online tag generators which help you to easily create Technorati tags. What they do is to identify the keywords and insert a code to these words so that Technorati spiders can index them. Those using Firefox browsers download the Greasemonkey add-on and install user scripts to automatically append Technorati tags to their posts. From our reading and testing, it seems that these extra third party scripts and tools are no longer necessary in the Blogger Beta or the new Blogger platform.

When creating a Post, you will see at the bottom of the text editor a box for “Labels for this post”. Enter the labels or keywords that describe the Post. A label can comprise more than one word and each label should be separated by a comma. For example, our labels for this post may read “Technorati tags, Blogger Tips, Labels”.

The limit for this box is 200 characters. What can you do if your labels exceed 200 characters? A tip that you can bear in mind is to remove the spaces after the commas. A spacing is deemed as 1 character. We will therefore have something like “Technorati tags,Blogger Tips,Labels” with no spacing after each comma.

Technorati Tags in Blogger Posts

When the Post is published, the Labels will appear in the footer. What if you do not see the Labels? Follow this guide to Customize the Blog Posts Elements. Make sure there is a tick against the “Labels: photos, vacation” option. In fact, you can change the word “Labels” to “Tags” or “Categories” or even “Technorati Tags”.

If you refresh the Blog page and view the source code, you will notice that the Labels automatically contain an additional code:-

<a href='' rel='tag'>Blogger Tips</a>

The first part in blue is just a hyperlink, a URL that directs the users to the search results of posts bearing this label. The second portion in red is what we are most interested in because the rel='tag' is what Technorati reads.

According to the Technorati guide, their search spiders will look out for these tag links that bear the rel='tag' code. These will then be indexed and will appear in the Technorati tag pages. To ascertain whether your Blog Post label or tag has been indexed by Technorati, copy the following address into the internet browser. Replace the TAG (marked in red) and your BLOG URL (shown in blue). URL

Using our above example, if we want to confirm that the label “Blogger Tips” has been tagged in Technorati, we would enter this URL into our browser. We should see the posts that are tagged with this label:-

Although it appears that essentially all you need to do is to key in the Labels to have them tagged by Technorati, there are still several things to bear in mind:-

1. After posting, submit your blog to a Ping Service which notifies several major feed aggregators, syndicates or directories that your blog has been updated. Ensure that Technorati is one of the sites that you ping.

2. Technorati reads the blog feed to pick up the tags. Check that blog feed has been enabled by going to Settings -> Site Feed -> Allow Blog Feed and choose either “Short” or “Full”.

3. There appears to be a slight problem if you have selected the “Short” feed, syndicating only the first paragraph, or the first 255 characters, whichever is shorter. What happens is that when Technorati spiders visit your site feed, it sees only this short paragraph. As you are aware, the Labels that you have inserted appear at the footer of the article and quite naturally, the spiders may miss out these tags. Fortunately, it seems that Technorati is aware of this and besides the blog feed, they will index the tags that appear in the new posts that are on your main Blog page. So long as you have a habit of pinging Technorati after each new post, and the full article is displayed on the main page, their search spiders will visit your main Blog page to index the labels/tags. Once indexed, it does not matter whether or not your feed shows only a summarised content.

4. For a week, we have not posted any article because our recent posts were not shown in Technorati. We did not realize it until we clicked our Technorati Blog page. To digress a little, the first thing we noticed was that we were somehow ranked within the “Top 5K” blogs. Quite a surprise to us since we were not even in the top 10K the last time we visited the page. Of course, it is all thanks to you, our readers, for the continued support and encouragement. Back to our issue, we saw at the same time that our latest 3 posts were not updated in the index. We submitted a ticket to the Technorati team. Because of what we mentioned earlier, we had to change our blog settings to show 3 posts on the main page so that the spiders can pick up the tags in the posts. As at today, the problem has yet to be rectified. Probably they are too busy. We can't delay our posts and have therefore decided to keep changing our blog settings to show more posts in the main page until Technorati indexes them.

Template Tweaks for Technorati Tags

If you are still concerned that the labels at the footer may not be seen by Technorati spiders, one of the things you can do is to shift the Labels to the top of the article. Go to Template -> Edit HTML and back up the existing template. Next, check the box against “Expand Widget Templates”. Scroll to these lines:-

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><></a><b:if cond='data:label.isLast != "true"'>,</b:if>

Cut the entire piece of code and Ctrl+F to search for the following code (marked in green) and paste what you have cut just below it like this:-

<div class='post-header-line-1'/>
<div class='post-footer'>
<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><></a><b:if cond='data:label.isLast != "true"'>,</b:if>

We have added the code (shown in blue) so that the style of the Labels will follow the Footer styles. Preview the Template. The labels should appear after the Post Title but before the Post contents. If you are happy with it, Save the Template.

Selective words for Technorati Tags

Let's say you have a post and as you write, you want a word in the post to be tagged in Technorati. Switch from “Compose” mode to “Edit HTML” mode. Type in this code before and after the word to be tagged.

<a href="" rel="tag">WORD</a>

If the keyword comprises two or more words, use this:-

<a href="" rel="tag">TWO WORDS</a>

You can change the URL to anything else, as long as you keep the rel="tag" in the code.

About Tags

Tags are not case-sensitive. However, you may want to consider using variations of the keyword now and then. A word in British English may be spelled differently in American English. Some people may even misspell the word altogether. This is very likely since tags are inserted by individuals who write the blog posts and these individuals may not be English-educated. Having different spellings of a keyword may increase the chance of your blog being found. Nonetheless, do not go overboard. Having too many keywords that mean about the same thing may be deemed as keyword spamming and is frowned upon by search engines and users alike.

The tags should reflect the post contents. If they are wholly irrelevant, users who are 'tricked' to visit your blog would be annoyed. If Technorati or other tag search engines heed such calls, you may one day find your blog blackmarked or de-listed.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Sep 10, 2007

Digg This Story

Blogger FAQ and Help Guide

In case you are not already aware, we have been addressing some of our readers' queries through our Tricks for New Bloggers blog. It all started with readers asking questions which are unique to their situations. While we tried to modify our articles to include those situations as well, it was a tall order trying to cover every possible permutation. So as not to disappoint our readers, we set up a new blog to deal with the specific questions.

As it turned out, we had also included ad-hoc template customization and design tips and the answers to commonly asked questions. Over time, we intend to cover as comprehensively as we can the Blogger FAQ relating to the new Blogger templates. Currently, the guides you get in the official Blogger Help are mainly premised on the old classic Blogger templates. We hope to complement that and provide answers to users of the new Blogger templates.

We shall continue to cover general issues of interest for most Bloggers in our this Tips for New Bloggers blog. If you are unable to find answers here, do take a look at the Blogger FAQ and Help guide to see if the issue has been addressed. If it hasn't, let us know through our chatbox or feedback form, and we shall try to look into it. Thanks once again for your continued support.

Blogger FAQ and Help

  • Insert an image to the left of Blog Title and Description [read]

  • Add a Horizontal Navigation Bar in Header Image [read]

  • Unable to remove Header Image [read]

Blog Posts
  • Arrange, customize and shift the Blog Posts and Footer elements [read]

  • Insert a picture or image beside the Blog Post Title [read]

  • How to have standard or pre-formatted text in Blog Posts [read]

  • Add Highlighting to Text and Background Color in Text Box [read]

  • Change Blogger Post URL - SEO Tip [read]

  • Change the Post a Comment Link [read]

  • Add scrollbars to text within Blog Posts [read]

  • Add Background color and image to Sidebar Titles [read]

  • Have different Background colors for each widget [read]

  • Style and Position Sidebar Images [read]

  • How to align Blog Post Footer elements to the left [read]

  • Move Comments Label to below Post Title [read]

Links and Labels
  • How to add Hover, Mouseover and Rollover effects for links [read]

  • Remove automatic number count in Labels widget [read]

  • Remove link underlines in Blog Posts and/or sidebar [read]

  • Be notified by Blogger when there is a Backlink [read]

  • Change and Edit Labels in Multiple Posts [read]

  • How to change Background Colour of TicTac Template [read]

  • How to remove the Pencil or Screwdriver and Wrench icons [read]

  • How to add animated graphics in Blogger Post and Sidebar [read]

  • Add Text Box or HTML textarea code in Blogs [read]

  • Know the limits on our Blogger account [read]

  • How to take Screenshots or Screen captures [read]

  • How to change and transfer Blog ownership [read]

  • Change font size and font styles in template [read]

  • How to center align Page Elements [read]

  • How to insert a separator line between each comment [read]

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Sep 6, 2007

Digg This Story

Submit Blog to Search Engines

Search Engine Optimization (SEO) aims at increasing the volume and improving the quality of traffic to a website from search engine results. Search engines work on different algorithms to analyze the contents and keywords, and present the search results. Google, for instance, assigns page ranks to the sites and sites that rank highly will appear early in the results. Of course, many other factors are considered by search engines, such as relevance, unique content, coding and quality of links. The major search engines know that revealing these factors will only encourage manipulation of the ranking system and have thus been secretive about how the ranking algorithms work.

While no SEO consultant can be absolutely certain about how each search engine views your site, the common agreement is that the more visible your site is on the internet, the higher your ranking will eventually be. Having your site linked to by many other sites and indexed by different search engines increase its exposure and visibility. We have given readers a list of Blog Directories and Feed Directories. In this article, we shall provide a list of search engines where you can submit your website or Blog URLs for Free and have your site or Blog indexed by the search engines.

Website Indexing

Unless you have created a private blog, it is a matter of time that your blog is indexed by the major search engines like Google, Yahoo and MSN. One of the fastest ways to have your site indexed is to get another site that is already in the search engine listings to link to you. When the search engine crawlers visit that site, they will find your site and index it. We tried this out by linking to our new Blog and it appeared in Google search listings within three hours. Hence, try this method if you do not want to wait for search engines to approve your site submission.

Before we proceed to the list of search engine sites, there are a few points to note:-

1. To check if your site has been indexed by a search engine, enter the full URL into their search query. For some search engines like Microsoft Live Search, enter site: followed by the full URL. If you see your site appearing in the search results, it has been indexed and there is no need to resubmit the site.

2. If your Blog has been linked to by Blog Directories, websites or Blogs, you may see these other sites that mention your Blog appearing first in the search results. More likely than not, they have a higher page rank. Scroll through the remaining search result pages and you will probably find a listing that is solely about your Blog.

3. When submitting your site, you do not need to submit the URL of each individual webpage. Submit only the top-level webpage and for Blogger Blogs, it will be an address like this without the www. before the blogname.

4. You can submit your sitemap to Google and login to Google Webmaster site to know the status of the indexing and view traffic statistics. Also, submit your sitemap to Yahoo! to find out more about the index and links to your site. Submit Blogger Sitemap to MSN and too.

5. If you add your URL in Yahoo!, it will appear in their other search sites like AlltheWeb and AltaVista as well. Similarly, AOL Search uses the data by Google.

6. Some of the sites send advertisements and newsletters to you in exchange for free submission. If you don't want that, remember to opt out of it. Avoid having your regular email account filled with these mail by creating another free web-based email account just for website submissions.

7. Since search engines have different standards of content, design and technical specifications, submission of your site does not guarantee that it will be included in their database.

List of Search Engines

You may submit your site URL to these search engines for Free. If you lack the time, submit your site to the top few leading search engines.

Website Submission Services

There are many sites on the internet offering free website submission services to search engines. The list of search engines are by and large the same. For a fee, some of them offer to send your URL to more than a hundred search engines. Is it necessary to have your webpage listed in all the smaller search engines? We think that Google, Yahoo! and MSN have cornered such a large share of the market that it is sufficient just to have your website listed there. However, the decision is yours to make. For a start, you may want to use their free services and monitor the traffic.

We shall update this list every now and then and you may want to bookmark this page. Click the Bookmark button below and revisit this page.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Sep 5, 2007

Digg This Story

Add or Remove Borders in CSS Templates

We have received a number of queries from people wanting to remove the image borders or add sidebar borders in the CSS layouts. In this article, we cover briefly what the border styles in CSS templates are and where you can find them. With this guide, you will be able to remove the borders around the images, sidebar or main posts, or change the style and color of the borders to match the Blog design.

The point to note is that some templates such as Scribe, TicTac and Thisaway use background images to create the look of the main post and sidebar sections. The 'borders' you see in these templates are the result of the background images. To change or remove the 'borders' around the main post and sidebar, the images will have to be altered and replaced. The sections in this article on CSS borders around Blog Posts or Sidebar will not apply to these templates.

Border Property

When you are logged into Blogger, go to Template -> Edit HTML and do a search (Ctrl+F) for the word “border”. You will see it appearing in a number of places in the template. In most of the stylesheets, the border settings are defined in one shorthand declaration like this:-

border:1px solid $bordercolor;

1. border

This is a shorthand setting for all the four borders. Instead of “border”, we may sometimes see “border-top”, “border-bottom”, “border-left” or “border-right” which sets a style specifically for that element's top, bottom, left or right border respectively.

2. border-width

There are three properties in the declaration. The first setting is the border width. It can be stated as a value in pixels like the example given or in general terms. The possible values are:-

1px (or any other length)

3. border-style

The second setting in the shorthand declaration is the border style. Here, the possible styles are:-


You can see some of these styles in our following examples.

4. border-color

The final setting is the border color. If you see $bordercolor, it is a variable (“Border Color”) that you can change via Template -> Fonts and Colors. If you want a specific color for the border of an element, you can also change $bordercolor to a color code. Possible values are:-


For a list of color codes, you may refer to our Color Code Chart.

Now that we understand what these styles are, we can proceed to customize our template. Go to Template -> Edit HTML and locate the border settings.

Border around Profile Image

Look for this line and if you do not want the border, change it to “0px”:-

.profile-img {
border: 0px solid $bordercolor;

or “none”:-

.profile-img {
border: none;

If you want a different style or color, amend the settings to one of the other possible values outlined above. For example, if we change the code to this:-

.profile-img {
border: 2px dashed #ff00ff;

This is what you will see:-

Add or Remove Borders in CSS Templates

Border around Images in Blog Posts

The border styles for the images in Blog Posts are found here:-

.post img {
border:1px solid $bordercolor;

Set it to “0px” or “none” to remove the image borders in the Blog Posts or customize the border style to something you like. Without a border, an image looks like this:-

Add or Remove Borders in CSS Templates

With a border style such as this:-

.post img {
border:3px outset #ff00ff;

The image is contained within a box:-

Add or Remove Borders in CSS Templates

If you post a lot of pictures and graphics on your Blog, you may like to spend some time configuring this and choosing an appropriate border setting.

Border around Image Links

In many of the templates, there is a style defined for image links. These are the clickable images which bring you to another webpage or URL when clicked. If you are interested in creating image links or want to understand what the codes are, you may view our Hyperlinks article.

You can customize the border settings of image links at:-

a img {

Border around Images in Sidebar

In our Minima template, there is no unique style definition for images in the Sidebar. We can still set a special border style just for the images in the Sidebar, without affecting the border styles in our Blog Posts. Add into the stylesheet this code:-

.sidebar img {
border:6px ridge #ff00ff;

In the above example, the images in the Sidebar will have a “ridge” effect that looks like this:-

Add or Remove Borders in CSS Templates

Border around Header

Many people upload images into the Blog Header and a border around the Header will stick out like a sore thumb. To remove the Header border, look for the border settings under any of these.


Border around Blog Posts

To demarcate each post, instead of a line at the bottom, you can have a border around the entire Blog Post.

Add or Remove Borders in CSS Templates

Scroll to where you see this and change or insert the code (shown in red):-

.post {
border:1px dotted #ff00ff;

We have included a padding to give some space between the contents and the border. Without this padding, the text will be too close to the border.

Border around Sidebar

Similarly, to add a distinctive border around the Sidebar, change or insert this code (shown in red):-

#sidebar-wrapper {
border:1px dotted #ff00ff;

In some templates, you may insert the code under any of these:-


The padding adds a space between the Sidebar content and the border. Preview the template. If you find that the layout is affected because of the padding, reduce the margin between the Blog Posts and the Sidebar.

Add or Remove Borders in CSS Templates

Border around Footer

If your template has a Footer element, the border style can be found under:-

#footer {
border:1px solid $bordercolor;

Border around Entire Blog

If you wish to have a border surrounding the entire Blog, you may add a border style to this part of the template:-

body {
border:1px solid #ff00ff;

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Sep 1, 2007

Digg This Story

Internet Security and Blogger Virus

The internet was abuzz with talk that site got hacked and was compromised. Blog owners suddenly found fake spam Posts in their Blogs which contained links to virus downloads and data mining sites. Some were faced with inexplicable web page load times and yet others noticed odd codes appearing in their templates. The natural reaction is to blame all these on the people responsible for the viral attacks, even though that might not be the case. In this article, we shall share with you some tips that we have learned on internet security and protection. This include the actions we can take to prevent or minimize the possibility of having Blogger blogs hacked or hijacked.

Is safe?

The article in BBC, Bloggers battered by viral storm, reported that the latest incidents were the work of a group of hackers who had been mounting attacks since January. They used spam messages posted on bogus sites or sent through email to trick users to download malicious programs. The links can sometimes be couched as Youtube links or digital greeting card links. Also, the email subjects contained informal internet jargon which led recipients to think that the mail came from their friends.

In an official response yesterday, Eric of the Blogger team had confirmed that “Blogger was not compromised. Instead, the blog posts are from bloggers whose machines were compromised by a Trojan horse. These bloggers had their mail2blogger email addresses in their computers' address books ... so when the malicious software spammed every address in their address book with its content, a copy of that email was posted to their blog.”

In short, the Blogger platform is safe and if any, the Blog owners should ensure that their own computers are checked and protected against malware. Where then does this leave us?

How the virus got into Blogs

Before we look at the preventive actions to take, we may want to know how these fake posts made their way into our Blogs. When you are logged into Blogger, you can see under Settings -> Email a “Mail-to-Blogger Address” feature. This enables you to post to your Blog by emailing the Post content to a mail-to-blogger address.

Internet Security and Blogger Virus

For those who have not used this feature, you can set up the address by entering a word or characters into the part in red. This will be the address to which posts can be sent.

If you have checked the “Publish” box, any message that is sent to this address will automatically get published in the Blog. If the “Publish” box is unchecked, the message will be saved and you have to log in to your Blogger account to publish it. The email subject heading will appear as the Title of the Blog Post.

Although this is a useful feature for people on the go, it is also one that can be exploited. All it takes is for anyone to post an email to this address and whatever is in that email will appear in your Blog. It is therefore imperative that this address remain secret and confidential and anybody who is not authorized to post on your Blog should not know about it.

The moment a virus takes root in your computer, it can send malicious posts to the email addresses saved in your system's address book. If the above email address is one of them, you will see the post in your Blog. Since your Blog is legitimate, your readers and friends may read the post and click some of the links thinking that you would not put harmful material on your Blog. Once they do that, their computers may inadvertently be infected with the malware and they in turn have malicious links appear in their own blogs, and the cycle continues.

Preventive Steps to ensure Blog Security

1. Scan Computer and Protect against Threats

This sounds obvious and yet there are many who do not see the need to protect their systems against viral threats. Some may find the scanning time long (stretches to an hour for a full scan) or do not have a habit of scanning their systems. Others may find it costly to pay for an anti-virus software license. Always consider the alternative – the risk of losing all your data or having to reformat your hard drive – and you would probably agree that a little effort goes a long way to ensure a peace of mind.

If you don't have an updated antivirus software installed in your computer, make it a point to scan your computer using one of the free online virus scanners, such as:-

a. Trend Micro Housecall
b. BitDefender Online Virus Scanner
c. Kaspersky Online Scanner
d. F-Secure Online Virus Scanner
e. Symantec Security Check

If you Google “online scanners”, you may see many sites which claim to provide free online virus scans. While many are authentic, there could well be a few which are not. Check them out if you'd like and stick to the tried-and-tested sites for future scans.

You can also download and install the free Google Pack and include the Norton Security Scan which eliminates viruses and the Spyware Doctor which removes spywares, adwares, trojans and keyloggers.

Another free software that we highly recommend is AVG Anti-Virus software. Go for the Free Edition. For a complete protection, install as well ZoneAlarm Firewall if you are not using your MS Windows Defender. These softwares update their programs and definitions regularly and the reviews on them have been very positive.

2. Configure Mail-to-Blogger Address

If you see a need to post to your blog via email, or think that others know your mail-to-blogger address, go back to Settings -> Email and pick/change the address into something that nobody can easily guess. Since the intent of this function is to have posts published without having to log in to Blogger, ticking the “Publish” option makes sense. After saving the Settings, go back to your email software e.g., Outlook Express, Eudora. Remove that mail-to-blogger address from the address book. By making no mention of it anywhere, even if the virus sends out mail to all the addresses in the address book, nothing will be sent to your Blog.

3. Create different email and login addresses

Out of convenience, many people stick to one name for all their logins, emails and signatures. For example, they may have these:-

blog name:
login name:
email address given to readers:
user: myname

If people are bent on hacking your Blog, it is easy for them to figure out what your login name is and use programs to crack your password. When you create your next blog, consider assigning different names or not using your actual name:-

blog name:
login name:
email address given to readers:
user: screenname

4. Set browser security

In Internet Explorer -> Tools -> Internet Options, set the Security level for Internet zone to Medium-High or High. Also, in the later versions, you can turn on the Automatic Website Checking feature in the Phishing Filter settings.

If you are using Firefox, go to Tools -> Add-ons and click the “Get Extensions” link. Look for a popular extension called “NoScript”. What it does is to block JavaScripts and executable files and only allows those that you trust. It makes surfing the net a lot safer, and lessens the chance of unintentionally running malicious scripts.

5. Use third party scripts with care

JavaScripts make our websites dynamic and vibrant, but malicious scripts can cause a great deal of harm. In our eagerness to place nice-looking widgets and interactivity into our sites, we sometimes overlook the fact that third party service providers are not always trustworthy. Some domains last a few days, just enough for the hijacker to place downloadable widget scripts on the sites and to back out of the domain purchase after the cooling-off period. Blogs can also list harmful scripts, some of them blindly copied from other sites while others intentionally created to trick readers.

For instance, you may come across an application that you like and are given a code to place into your template. This code typically contains a link to a file ending with .js extension. When your Blog page is loaded, this script is retrieved from the site where the file is stored and it runs in the background. Some prudent Blog owners do take the trouble to go through the script language and ascertain that there is nothing wrong with it. However, because the file is hosted in that provider's server, if they should decide to change it later and throw in something extra, you would have unknowingly introduced that into your Blog.

For the same reason, we have cautioned readers against downloading ready-made and customized templates from unknown or untested sources. Since not all of us are technical experts, we may not notice an undesirable script hidden somewhere in the template. Hence, for our guides such as the three columns template guides, we prefer to show you how to DIY and customize your own template. In this way, you know what goes into it and can easily reverse the change in future.

6. Watch what we say or write

We thought we should add this. Many of these people either do it for the challenge or out of spite. Just as wearing skimpy clothes invites unnecessary attention and opening our door invites thieves, words and actions can give hackers the excuse to compromise your site. Observe basic courtesy and net etiquette. Be modest about your site. Every site can be the target of hijacks, including ours; no site is invulnerable.

What to do if Blog is hacked?

Despite all the security and preventive steps, if the day should come when the Blog contents disappear, the first thing to do is to scan the computer for viruses and malware. Do not login to your email or other accounts since this might open up more doors for the virus. Once the system is completely scanned and rendered safe, you may login to your Dashboard and view the Settings. Take note of the information that has been altered.

It is also possible that you are unable to login because the password has been changed, or that the Blog and Blog Posts are deleted. Write to the Blogger Support Team using another email account. Give them as much details as possible and allow them time to investigate the cause. Since Google servers would have backed up our data, it should be possible for them to reinstate your Blog upon proof of ownership.

Where the contents cannot be entirely retrieved, you may have to re-create the Blog. In moments like this, you would appreciate the importance of keeping backups of the template source codes and saving copies of the articles you have written.

Further reading:-

As mentioned, if the Blog page load takes longer than usual, it is not necessarily caused by a virus. could be experiencing a downtime, or the external sites where information is retrieved from may be causing the delay. This usually happens when we put a number of third party applications and widgets into our site, such as advertising services, gadgets and scripts. Our article on Faster Web Page Load Time explains how you can check the page load time and improve the speed.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button