Tips and Tricks for new Bloggers - New Hacks for blogger

Jump In Google Pages | 10 Seo Tips For Newbies

noreply@blogger.com (John) — Tue, 15 Jun 2010 07:32:00 +0000

1. New Domain? Old Domain?
Do not purchase a brand new domain unless you absolutely have to. Google now has an “aging delay for all domains” check. New domains will be considered unreliable and need to “age” before it gains importance in the google index. If you had to use a brand new domain, expect to see 9-12 month delay before you are able to achieve top 20 position in any keyword. The trick is buy an old or expired domain.
2. Don’t go for the popular keywords.
Do not try to tackle the popular keywords such as “travel” “computer”, instead add a word before or after the keyword such as “travel tips” or “computer news”. Many top 20 positions in less popular keywords is a thousand times better than a top 200 position in a extremely popular keyword.
3. Design your site to be “spider-friendly”.
Remember spiders can not fill out forms or click on flash menus. Always have an alternative HTML link that spiders can travel through to crawl your entire site. The best way to go about this is have a sitemap that contains links to every page of your site. Google has a special place for web masters to submit their sitemaps. Use it! https://www.google.com/webmasters/tools/sitemaps

4. Only link out to non-spammer, non-linkfarm and quality sites.

The truth is, it doesn’t matter who links to you, you can have a thousand spammer and link farms that have links to your site, and it won’t affect your rank with google. But if your site contains links to spammer and link farm sites, your site will also be marked as spammer or link farm. So the trick is, watch who you link to.

5. Put your most important keyword in your url and title tag.
Search engines such as google see your url as one of the most important factor for determining relevancy. For example, the top 20 positions for the keyword “wallpaper” are occupied by sites that contain the word “wallpaper” in their url. So if you want to achieve top 20 position in any keyword, the fastest way would be having that keyword in your url. Title tags are also very important for search engines, especially the first few words, put your most important keyword in the front of your site title.
6. Use keywords for folder names and file names.
This trick has became very well known recently. Use your relevant keywords for your sub-folder names and file names. For example if you have a web page called “contact_us.html” and your website is about selling “teddy bears”. Then use “contact_us_for_teddy_bears.html” as your file name. Do the same thing for your folders and you will have a keyword rich url.

7. Make sure your site loads fast and rarely go down.
This may sound silly, but whenever a google bot or any other search engine spider visit your site. They will test your page load speed. If your site loads very slowly, your page rank will suffer as your site is now considered unfit for browsing. Also if your site is frequently down, your page rank will go down real fast.

8. Never rename your webpage unless your site is new
For established and popular websites, renaming your webpages will kill your rank in the search engines, you are essentially starting from scratch in terms of SEO. So if you are redesigning your site, remember keep the old file names.

9. Never implement ANY cloaking methods on your site
Site cloaking was popular a couple years ago. It means show one version of content to your visitors and show a different version of content to the search engine spiders. There are of course legitimate reasons for doing this. But due to popular usage by spammer sites, it is now considered instant ban if you cloak your site this way. Do not think the search engines will not find out. Google now frequently send out unknown bots from unknown ips for the sole purpose of detecting cloaked sites.

10. Do not over-optimize
Remember the most important asset for your site is not your search engine ranking, but your users. Never SEO your site to the extent of hurting user experience. Over-optimization for search engines may help you in the short-terms but you will wake up one day and find out that your site only have “visitors” but not “users”.

Post Footer – Customize Template | Blogger Tips and Tricks

noreply@blogger.com (John) — Sun, 31 Jan 2010 18:05:00 +0000

In this tutorial, we discuss the various ways you can customize the Post Footer and change the Blogger template. The steps will cover how to change the “Posted by author”, “Comments”, “Labels” links in the Post Footer, replacing them with other names or pictures.

This is how a typical Post Footer looks like. It includes the author's name, time of the post, number of comments, number of backlinks, icon for readers to email the post, icon for you to edit your post, as well as Labels.

Update:

If you are looking to change the text, alter some settings or re-arrange the positions of the Post Footer elements,you can go to Template -> Page Elements and click the “Edit” link on the Blog Posts widget. You will see a screen like this:-

You can read our Arrange and Customize Blog Posts Elements article to learn a little about these options. Even though this is a simple way to make minor adjustments, you will not be able to insert pictures, signatures, change the author's name, etc. To do these other things to the Post Footer, you may want to read the rest of our guides here and customize your Footer.

Before we proceed to alter the template, remember to backup the existing template. Go to Template -> Edit HTML. Check the “Expand Widget Templates” box. Backup your template by copying the template and saving it in an MS Notepad text file. You can also click the “Download Full Template” link that appears right after the words “Before editing your template, you may want to save a copy of it.”

Posted by author

1. Change author's name

The name of the author is the name shown in your Blogger Profile. Should you want to keep this name, but assign a pen name or nickname to your postings, go to Template -> Edit HTML and click the “Expand Widget Templates” box.

Scroll to where you see these lines. For most browsers, you can press Control-F to search for this phrase “data:post.author”

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/&gt; <data:post.author/&gt;
</b:if>
</span>

Replace the part of the code (shown in red) with whatever name you want to call yourself. This is what you will see in your Post Footer:-

2. Remove “Posted by”

What if you do not even want the words “Posted by”? Well, you will have to delete both the codes (shown in blue and in red). Replace them with the words you want to display. The result is this:-

3. “Posted by” below Post title

Some blogs have the “Posted by author” just beneath the Post Title. If you want to do that, cut the entire code in the template and paste it below this line:-

<div class='post-header-line-1'/>

<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

This is what you will get:-

You can also place an image instead of having a name. However, this image should be small. Crop or resize the image using photo editing tools. There are free ones like Google's Picasa which you can use. Upload the image onto free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the Image URL.

In the above codes, instead of replacing the blue and/or red parts with a name, insert this code instead:-

<a href="URL of your Blog"><img src="Image URL" /></a>

Remember to key in the URL of your Blog as well as the Image URL. This gives you an image link so that when people click the picture, they will be brought to your Blog's main page. If you do not want a link, you only need to insert this code:-

<img src="Image URL" />

The final code will look like this:-

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<a href="URL of your Blog"><img src="Image URL" /></a>
</b:if>
</span>

5. Image AND Name

Let us now combine the above to have BOTH your image and name in the Footer. For example, you may want to have something like this:-

The code will be changed to this. Change the text. The image code can be either before or after the text.

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
Author<img src="Image URL"/>
</b:if>
</span>

Timestamp

If you do not want the time stamp at all, scroll down the template and delete these lines:

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>

Now we continue with customization of the “Comments”, “Labels” and other icons shown in the Blogger Post Footer.

Comments

1. Settings

If you simply want to enable or disable Comments, login into your Dashboard and under Settings -> Comments, you will see the options for “Comments”. You can either “Show” or “Hide”. You can choose “Hide” so as not to show the Comment link, without deleting existing comments.

2. Change the word “Comments”

Should you want to retain the Comment link but change the word “Comments” to something else, scroll to this part of the template:-

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/&gt; <b:else/><data:post.numComments/> <data:top.commentLabelPlural/&gt; </b:if></a>
</b:if>
</b:if>
</span>

In my spiderman example, I wanted to use the phrase “Friendly Neighbors”. Where the blue code is, I replaced it with the phrase “Friendly Neighbor”, the singular form when there is only 1 comment. At the red part of the code, I replaced it with the plural form “Friendly Neighbors” when there are 2 comments or more. The resulting code is:-

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 Friendly Neighbor<b:else/><data:post.numComments/> Friendly Neighbors</b:if></a>
</b:if>
</b:if>
</span>

And this is what you will see:-

Links to Post

If you do not want this in your Post Footer, go to Dashboard, under Settings -> Comments, you can choose to “Show” or “Hide” the “Backlinks”. If you select “Hide”, the backlinks to your Post and the words “Links to this Post” will not be displayed.

Email Post icon

In your Dashboard, under Settings -> Basic, you can see a query “Show Email Post links?” If you choose “Yes”, you will see the little envelope image for viewers to click to email the Post to other people. Should you choose “No”, that image will not be displayed.

Labels

1. Change “Labels” name

To suit the theme of your Blog, you may want to change the word “Labels” to something else, like “Subjects”, “Topics”, “Categories”, “Genre”, etc. Scroll to this part of the template:-

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

Substitute the part of the code (shown in red) with the word that you want to use. The result is this:-

2. Image instead of name

In Part I of this article, we went into details on how you can use an image to replace the author's name. If you want to have a picture to replace the word “Labels”, the procedure is the same. Instead of the name to replace the part of the above code (shown in red), insert the image code. The resulting code would appear like this:-

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

Digg!!! A Social Bookmarking Website and my Experiences | Blogger tips and tricks

noreply@blogger.com (John) — Thu, 28 Jan 2010 18:55:00 +0000

Digg!!! A Social Bookmarking Website And my Experience :

How to Use Digg :

Like All other Social bookmarking websites , Digg also promotes your website. Or you can say it gives backlinks to your websites.

Using Digg is a little bit tricky but easy to handle. According to my experience the most important thing is unique content. Because the more unique is the content, more your Posts are Digg by readers. Though I never get a chance that my posts are get Digg for more than 50 times…That’s why I am writing this post my own so you Digg it :-) and I hope u ll like it .

As there is no option of Tags, like in Delicious .So use your keywords with the Title of your post while submitting in Digg. (e.g) keyword = best blogger templates

Digg!!! A Social Bookmarking Website | Best Blogger templates

Or

Digg!!! A Social Bookmarking Website | Best-Blogger-Templates

You can use your keywords in short summary of the post while Digging.

Most important step is category where you are going to post your summary. Select the right category.(e.g) Software ,business etc.

Using these steps u can easily get 200 visitors per day.

How Digg Promotes your website:

When posts are Digg more than 100 times Digg gives it a very good rank in google listing.. Try to get more clicks on “Digg it” Button.

I experienced one more thing with Digg.. Google only shows 2 to 3 links of your website associated with Digg.

If you have posted more than 100 posts in Digg , Digg may show the backlinks in google in just 4 hours. :-)

These results might stay in google on the same position till 2 to 3 days and when you don’t work again results are removed from google’s lists.

But don’t worry when you work a little but more after 3 days and post some more posts in Digg with the same keyword, your results are back in google :-)

Sometimes Google doesn’t show your Digg results in google..it is because your Direct site link is coming somewhere on the same page. So its better if google gives a preference to your website link that is not associated with any other website.

Use my Tips and Digg this Post if you like it:-)

Please keep it in mind I don’t know what’s behind Google and Digg. I don’t know the algorithms its just my personal experiences.

Up and Down Button Widget For Blogger | Tips and Tricks for Blogger

noreply@blogger.com (John) — Fri, 22 Jan 2010 17:23:00 +0000

If you check my blog, on the Right Side you will see two arrows pointing in the opposite direction. Try clicking on both of them. The one pointing up will take you to the Top of the Page, while the one pointing down will take you to the Bottom of the Page. You must have seen the Back To Top of Page link in many blogs, but I felt that there is a need of a Go Down button. Yup, that's what I am calling it, a "Go Down" link because that's the work it does. You can also call them Scroll To Top and Scroll To Bottom links.

Now adding this Widget/Gadget/Plugin to your Blogger Blog is very easy and requires simple HTML code. Adding the Back To Top Page Icon is very easy, but for the Go Down Icon you will have to add a single line of HTML code in your blog template. But its very easy to do.

Step 1:
Login to your Blogger account. Visit the Layout of the blog for which you want to add these buttons. Now click on Add A Gadget option and select the HTML/Javascript option and paste the following code in it

<a style="display:scroll;position:fixed;bottom:260px;right:5px;" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src="http://i31.tinypic.com/2vtqqt3.png"/></a>

<br/>

<a style="display:scroll;position:fixed;bottom:225px;right:5px;" href="#GoDown"><img style="border:0;" src="http://i32.tinypic.com/16lle91.png"/></a>

Click on Save and refresh your blog.

Step 2:
Now you will be able to see both the icons on your blog. However you have one more step remaining. Now click on Edit HTML option and select the Expand Widget Templates option.

Now search in the blog template and paste the following code just above it .

<a name='GoDown'/>

Now click on Save Template and refresh your blog. The Back To Top and the Go Down will be working properly.

Now there will be some people who would like to customize this Widget for their blog. So for them I have highlighted some of the code in Red colour. Here are the following modifications that you can make.

1. Widget appears on Left Side
2. Increase/Decrease the distance of the Icons from bottom
3. Add different icons

1. If you want the widget to appear on the Left hand side instead of Right side, then replace right:5px; with left:5px; at both the places in the code.

2. If you want to Increase/Decrease the distance between the icons or from the bottom, then change the value of bottom:260px; and bottom:225px;

3. If you want different icons then just replace the url in red with the url of your icon. Important: It would be better if you copy the image and upload it yourself. Both the image url's are highlighted in Red colour. Just replace it with your own image url

Author Comments - Different Styles | blogger tips and tricks

noreply@blogger.com (John) — Thu, 14 Jan 2010 17:25:00 +0000

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.

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-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>

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

</b:if>

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

Comment Styles

After you have inserted the above code, scroll upwards in the template and Ctrl+F to search for the word “comment-body”. 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;
background:#C3FDB8;
}

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:-

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;
color:#F6358A;
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:-

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;
font-size:120%
font-family:courier;
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.

Best Blogger templates

Adsense Products Referals in Blogger

noreply@blogger.com (John) — Wed, 06 Jan 2010 16:13:00 +0000

If you have an AdSense account, this latest launch of Google AdSense Referrals 2.0 is something you must look at. In addition to the traditional Google products, there is now a very long and varied list of products that you can include in your Blogs and offer your readers. In contextual ad targeting, the AdSense ads that appear in your Blog may not always be relevant, especially if you do not have a consistent theme in your posts. With AdSense Referrals, you are now able to pick the specific products that you like, and are paid the referral fees. In Blogger.com, it is easy to insert an AdSense for content widget but not a Referral unit. This article will explain how you can fill the “shopping cart”, customize the ad colors, insert the code and have the Referral ads appear just before or after your Blogs posts.

Before we begin, we assume that you already have an AdSense account. If you don't, you can always sign up for a Google AdSense account. AdSense is by far one of the preferred ways of monetizing your Blogs and they have various features which can earn you that extra income and revenue through blogging.

Setting up the Referral ads

1. Country and Language

Login to your AdSense account, click the “AdSense Setup” tab and choose “Referrals”. Somewhere near the top, you will see the default country and language that your Referral ads will be based in. If your readers are mainly from another country or are using another language, change the preferences and click “Show”. Since this is a new feature, some of the languages may see fewer advertisers.

2. Ad Format

Although you can begin to view the products and add them to the Shopping Cart, it may be wise to set the ad format at this stage. Some advertisers have predetermined ad formats which may not fit into your desired size. Choose the “Ad format” size that you like.

3. Choice of products

It is time to go shopping for the relevant ads. There are three ways you can do that:-

a. Keyword

Enter a keyword that is in line with your theme. You will be shown a list of products that match the keyword (maximum of ten keywords). You can click “Add this keyword to cart.” When you use this option, Google AdSense will rotate the ads to match this keyword and new products will be added automatically without further action at your end.

b. Category

You can browse by category. View the products. If you find a suitable category for your Blog, you can add the entire category to the Shopping Cart. New products in the category will be automatically rotated to show the highest-paying product ads in your Blog. You can have up to ten categories added into the Shopping Cart.

c. Products

You can also choose the specific products (a maximum of fifteen) to be added to your ad unit. View the products and click the link. You will be shown the referral fees and the terms. There may be different text ad formats and image ad formats that you can choose from. Where the ad size does not fit into the ad unit format that you have earlier determined, you will see a message “This size not compatible with currently chosen ad format.” Choose the one that fits and the product will appear in your Shopping Cart.

4. Best performing ads

You can tick the “Pick best performing ads” option to have Google AdSense display ads that they believe will bring you more revenue. Since it is based on Google's contextual targeting and analysis, the ads you chose may not be shown.

5. Advanced Options

Click “Advanced Options” and you will be asked to choose a color combination and a channel. Most of us would like the colors to blend with our Blogs. If that were the case, do not use the “Default Google palette” but choose instead any of the “AdSense palettes.” We shall talk about changing the colors later.

You can specify a custom channel to track the performance of these ads. This is particularly useful if you have several blogs and you want to know how well the ads in each blog have performed. Some may want to try out different ad positioning and assign a tracking channel to each of the ad units to monitor the clicks.
6. Colors customization

Once you are done, click “Continue” and you will be shown the Referrals code that you can add to your web site. The code looks something like this:-

<script type="text/javascript"><!--
google_ad_client = "pub-0000000000000000";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_cpa_choice = "xxx";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

The parts in red
are the color codes. You can change the color values and assign
different colors to the Referral ad border, background (bg), link, text
or url.

7. Placement of code

To insert the code into the Blog, go to Template -> Page Elements -> Add a Page Element either in your sidebar or post body area, and select HTML/JavaScript. Copy and paste the entire JavaScript code and save.

If you would like to have AdSense Referrals appear in every individual post, between your post title and post body, or between your post body and post footer, you may follow this guide AdSense Code in Blogger Post Body, parse the code and place it into the appropriate part of your template.

Under the current rules, you can place up to three AdSense Referral units and three standard AdSense for content units on a single webpage. Therefore, if you have placed the AdSense Referral code into your template, and there are five posts in your page, the ads will only be shown in the first three posts.

Best blogger templates

Adsense Code in Blogger Body

noreply@blogger.com (John) — Wed, 06 Jan 2010 13:11:00 +0000

One of the known tips for improving the performance of your Google AdSense ads is knowing where to place the ads. In this guide, we shall discuss the modification you can make to your Blog template to have your Google AdSense ads appear between your post title and post body, or between your post body and post footer. Also, we shall have the AdSense ads appear on every individual post.

Choosing a best placement for your AdSense ads will attract more attention; attention leads to clicks; and clicks bring you AdSense revenue. Easier said. While people may have theories on where the ideal AdSense spot ought to be, there is really no standard answer because it depends very much on your Blog's layout, contents, theme, etc. If you have been following the changes made to our Blog, you would agree that we are no guru at this. We had merely placed the ads where they fit aesthetically and not where they will get the most attention. Nevertheless, if you would accept our two cents' worth of opinion, try to put yourself in the minds of your readers. Ask questions like why readers visit your Blog, which section of the Blog are they most interested in, and whether placing an ad at a particular area will distract, annoy or please them.

Many people believe that having AdSense ads just before or after the Blog posts will best optimize their performance. For the purposes of this article and to give you an idea how it would look, we have inserted the AdSense code into our template to have the ads appear immediately below the article and before the post footer. If you think you would like to do the same for your Blog, the following are the steps you should take.

Update: A section on Using Blogger Feature to insert the AdSense Ads after every post.

Using Blogger Feature

If you merely want an Ad to appear after every post or every few posts, use this Google feature instead. Go to Template -> Page Elements and you see in your layout the heading “Blog Posts”. Click the “Edit” link at the bottom right corner. You will see this screen.

We assume you have a Google AdSense account. If you don't, you can create one using the same login through your Google account. You will be assigned a Publisher identity number which shall appear in all your AdSense codes.

Tick the “Show Ads Between Posts.” You can select whether to show ads after every post or after several posts. In accordance with AdSense TOC, a maximum of 3 Ads will be displayed. Choose the ad format and color scheme. Save the changes and refresh your Blog to see the Ads.

While using this Blogger feature is simple and easy, you may want more control over the position of the Ads. For example, you may want it between the title and posts rather than after the posts. The following guide will show you how you can do that.

More Ad locations

Log in to your Google AdSense account.

Go to AdSense Setup -> Products and choose “AdSense for Content”.

Next, select “Ad unit” and follow their instructions on picking the size of ad, color combination, and so on, right till the end when they automatically generate a HTML code for you. Copy this code and paste it into Microsoft Notepad. (If you are a WinXP user, click the Start button at the bottom left corner of your screen. Under All Programs -> Accessories, you should see the MS Notepad icon.)

Parse the AdSense code

You will have to parse the google adsense code .click here
Your final parsed code will be like this.

&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;pub-0000000000000000&quot;;
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = &quot;336x280_as&amp;amp;quot;;
google_ad_type = &quot;text&quot;;
google_ad_channel = &quot;&quot;;
google_color_border = &quot;FFFFFF&quot;;
google_color_bg = &quot;FFFFFF&quot;;
google_color_link = &quot;000000&quot;;
google_color_text = &quot;000000&quot;;
google_color_url = &quot;000000&quot;;
//--&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
&lt;/script&gt;

Insert code into template

Login to your Dashboard. Go to Template -> Edit HTML and click the box next to “Expand Widget Templates”.
Block copy the entire HTML code for your site that you presently have and save it in a separate text file in MS Notepad. You can also click the "Download Template" link to backup the template. This is one of the two necessary steps whenever you want to change the template. The second step is to “Preview” the new changes, and save the changes only when you are satisfied. The backup you have saved in a text file will come in handy when you accidentally click to save the changes without previewing them. With a backup, you can easily restore the template to the prior state if need be.

Now search for post.body through your browser's search function (Ctrl+F for Firefox and IE). You should see these lines:-

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

If you want the AdSense ads to appear between the post title and post body, add the following code above the orange lines. If you want the AdSense ads to appear immediately after every individual post, add the following code below the orange lines. The code to add is:-

<div style='float:left;'>
AdSense Code
</div>

The AdSense Code is the one you have amended above in MS Notepad. Do NOT save the template, but click the Preview button to see if you like the placement of the AdSense ads.

Do you want to have the AdSense code on the left of your text as shown in this screenshot?

Choose the smallest AdSense format like 125x125. Insert the AdSense code here:-

<div class='post-header-line-1'/>
<div style='float:left;'>
AdSense Code
</div>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

If you want the Ads on the right of the text, like this:-

Insert the code as follows:-

<div class='post-header-line-1'/>
<div style='float:right;'>
AdSense Code
</div>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Set the AdSense ad margins

If your AdSense ads are too close to the edge, you may set a margin in the style tag.

<div style='float:left; margin-left:30px'>
AdSense Code
</div>

Should you want to align the AdSense ad to your text, you can specify a margin or padding around the entire AdSense code. The code you can use is:-

<div style='float:left; margin:5px 10px 15px 20px'>
AdSense Code
</div>

The first number 5px is for the top margin, 10px is for the right margin, 15px for the bottom margin, and 20px for the left margin. You should of course change these values to suit your template.

Preview the template and if you are satisfied, save the template and refresh your Blog to see the new positions of your AdSense ads.

Best blogger templates

Recents Comments and Recent Post Widgets | Blogger Tricks and Tips

noreply@blogger.com (John) — Mon, 28 Dec 2009 18:44:00 +0000

Language Translation Flag & Script | Blogger Tips and Tricks

noreply@blogger.com (John) — Mon, 28 Dec 2009 18:16:00 +0000

This tutorial explains how you can add a script to allow readers to view your English site in other foreign languages. As you can see on the right of this page, a reader needs only to click the relevant country flag to read this site contents in his preferred language.

English is not the most popular language in the world. In fact, according to many reports, the Chinese language (Mandarin) is certainly the most widely spoken language. In the internet community, the other popular language platforms are arguably Spanish, Russian, Arabic, Portuguese, Malay, Italian, French, Japanese, and Korean.

Translation from English to other languages

If you have a blog written in English, it therefore makes much sense to be able to reach out to the non-English speaking population as well. There are several online translation tools, the popular free tools being AltaVista's Babel Fish translation and Google's Language Translator. WorldLingo is no longer a recommended tool, as the website translator has a translation limit of 500 words, beyond which you have to pay a monthly fee for their service.

For this site, I have used the Google Language Translator. Google is able to translate English website contents into Arabic, Chinese, French, German, Italian, Japanese, Korean, Portuguese, Russian, and Spanish. The JavaScript used here can be applied to most of the blogging sites like Blogspot, Typepad and Wordpress. Copy the following script and paste it at the part of the template where you want your language translator to appear.

<form action="http://www.google.com/translate" >

<script language="javascript" type="text/javascript">

<!--

document.write ("<input name=u value="+location.href+" type=hidden>")

// -->

</script>


<noscript><input name="u" value="http://bloggerquery.blogspot.com/" type="hidden" /></noscript>


<input name="hl" value="en" type="hidden">


<input name="ie" value="UTF8" type="hidden">


<input name="langpair" value="" type="hidden">


<input name="langpair" value="en|ar" title="Arabic" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/358406/gse_multipart12399.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">


<input name="langpair" value="en|zh-CN" title="&#20013;&#25991;&#65288;&#31616;&#20307;&#65289;/Chinese (Simplified)" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/546049/gse_multipart12397.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">


<input name="langpair" value="en|zh-TW" title="&#20013;&#25991;&#65288;&#32321;&#20307;&#65289;/Chinese (Traditional)" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/208681/gse_multipart12398.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">


<input name="langpair" value="en|fr" title="Fran&#231;ais/French" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/327620/gse_multipart12413.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">


<input name="langpair" value="en|de" title="Deutsch/German" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/734899/gse_multipart12400.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">


<input name="langpair" value="en|it" title="Italiano/Italian" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/306145/gse_multipart12401.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">


<input name="langpair" value="en|ja" title="&#26085;&#26412;&#35486;/Japanese" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/443122/gse_multipart12402.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">


<input name="langpair" value="en|ko" title="&#54620;&#44397;&#50612;/Korean" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/581031/gse_multipart12403.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">


<input name="langpair" value="en|pt" title="Portugu&#234;s/Portuguese" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/670301/gse_multipart12404.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">


<input name="langpair" value="en|ru" title="&#1056;&#1091;&#1089;&#1089;&#1082;&#1080;&#1081;/Russian" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/111692/gse_multipart12405.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">


<input name="langpair" value="en|es" title="Espa&#241;ol/Spanish" src= "http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/998398/gse_multipart12407.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">


</form>

Points to note:-

1. For those using Blogspot, once you have logged into your Dashboard, go to Template-> Page Elements. Add a “Page Element” and select “HTML/JavaScript”.

2. Copy the above JavaScript. Under the “value” (in red), you will see the URL of this website. Please change that to the URL of your own website. Save and refresh the page.

3. If you want a slightly bigger flag, you can increase the width of the images, for example, from “30” to “36” and the height from “20” to “24”.

4. Should you come across a translation that doesn't look right, you can always suggest to Google a better translation to help them improve their translation quality.

Translation from other languages to English
If you have a site written in another language, you can also have a translation tool on your Blog to translate it into English. At the moment, Google is able to translate Arabic, Chinese, French, German, Italian, Japanese, Korean, Portuguese, Russian, and Spanish sites into English.

Go to the official Google Language Tools site. Key in your Blog URL at the place circled in the picture below. Choose the languages e.g., “Italian to English”.

Once you click “Translate”, you will be taken to the translated page. Copy the translated page URL in the browser. We have to insert this URL into the HTML code.

Next, login to your Dashboard, under Template -> Page Elements -> Add a Page Element, choose HTML/JavaScript at the place where you want to put your translation flag.

If you want a United Kingdom flag, copy and paste this code into the page element.

<a href="translated page URL" title="English"><img border="0" alt="Google Translation" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/212122/gse_multipart16503.png"/></a>

If you want a United States of America flag, use this code instead.

<a href="translated page URL" title="English"><img border="0" alt="Google Translation" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/724501/gse_multipart16505.png"/></a>

Please remember to insert the translated page URL into the code. If you wish to resize the picture by specifying the width and height, or if you want to have readers go to a new window when they click the link, you may read the article on Hyperlinks and Image Links (II) to see how you can do that.

Save and refresh your Blog to see the translation flag.

Best blogger templates

JavaScript for Quote of the Day | Blogger Tips and trick

noreply@blogger.com (Shebby) — Sun, 27 Dec 2009 14:22:00 +0000

If you are wondering whether I manually add a Quote of the Day, the answer is no. I have used a simple JavaScript to display a new Quote everyday. There are a few JavaScript codes written by several people - some make you pay to buy their program, while others allow you to tap on to their Quotes database. I was looking for something simple, and unfortunately a number of those I found online do not work.

In the end, I looked up books and came up with a simple JavaScript which stores quotes and authors in a format called “arrays”. I keyed in 31 quotes and the script will display a new quote every day of the month.

If you would like to add one, go to Template ->Page Elements and click “Add a Page Element” to the place you want your Quote of the Day to appear. Add a "HTML/JavaScript".

The JavaScript I have used for the Quote of the Day you see in this site is as follows:-

Update:

<!-- http://bloggerquery.blogspot.com/ -->

<table border="1" cellpadding="20" bordercolor="#ADD8E6">
<tr>
<td bgcolor="#E0FFFF">
<a href= "http://quotes-motivational-inspirational.blogspot.com/"> Quote of the Day</a>
<p></p>

<script language="javascript" type="text/javascript">

var d=new Date();

var quotes=new Array(31);

var authors=new Array(31);

quotes[0]="If a man watches three football games in a row, he should be declared legally dead.";

quotes[1]="Friendship is far more tragic than love. It lasts longer.";

quotes[2]="Advice is like castor oil, easy enough to give but dreadful uneasy to take.";

quotes[3]="";

quotes[4]="";

quotes[5]="";

quotes[6]="";

quotes[7]="";

quotes[8]="";

quotes[9]="";

quotes[10]="";

quotes[11]="";

quotes[12]="";

quotes[13]="";

quotes[14]="";

quotes[15]="";

quotes[16]="";

quotes[17]="";

quotes[18]="";

quotes[19]="";

quotes[20]="";

quotes[21]="";

quotes[22]="";

quotes[23]="";

quotes[24]="";

quotes[25]="";

quotes[26]="";

quotes[27]="";

quotes[28]="";

quotes[29]="";

quotes[30]="";

authors[0]="Erma Bombeck";

authors[1]="Oscar Wilde";

authors[2]="Josh Billings";

authors[3]="";

authors[4]="";

authors[5]="";

authors[6]="";

authors[7]="";

authors[8]="";

authors[9]="";

authors[10]="";

authors[11]="";

authors[12]="";

authors[13]="";

authors[14]="";

authors[15]="";

authors[16]="";

authors[17]="";

authors[18]="";

authors[19]="";

authors[20]="";

authors[21]="";

authors[22]="";

authors[23]="";

authors[24]="";

authors[25]="";

authors[26]="";

authors[27]="";

authors[28]="";

authors[29]="";

authors[30]="";

document.write(quotes[d.getDate()-1] + '<p style="text-align: right"><i>' + authors[d.getDate()-1] + '</i></p>');

</script>
<noscript>You need to enable JavaScript to read this.</noscript>
</td>
</tr>
</table>

Allow me to elaborate what the script does.

1. I have defined a table for the Quote of the Day to be displayed in. You can of course change the “bordercolor” and “bgcolor” (background color) to whatever suits you. For a complete list of color values, you may refer to the Color Chart.

2. If you do not want a table but just a line of the Quote, simply remove these elements from the above script:-

<table border="1" bordercolor="#ADD8E6" cellpadding="20" bgcolor="#E0FFFF">
<tr>
<td>

</td>
</tr>
</table>

3. The first element of the arrays are [0]. I have for the purpose of this example entered the first 3 Quotes together with the corresponding authors' names. You can enter your favorite Quotes to fill up the remaining arrays. I have used Quotes from this Famous Motivational and Inspirational Quotes site.

4. Towards the bottom you will see this script:-


document.write(quotes[d.getDate()-1] + '<p style="text-align: right"><i>' + authors[d.getDate()-1] + '</i></p>');

What it does is to call for the numerical date. For example, the date of this posting is 10th February. The script “quotes[d.getDate()-1]” will call for the number “10” and minus 1 from this number. The result is that the Quote displayed will be the one keyed in under “quotes[9]”. The reason for having to deduct 1 is because, as mentioned above, arrays must begin with [0]. Hence, if the date were the 1st February, deducting 1 will give you a value “0”, and the displayed quote will be the one that appears under “quotes[0]”.

Once you have saved the JavaScript, refresh your Blog page, and you should now have a Quote of the Day automatically displayed on your Web Page.

Important Note: When you key in the quotations or names, do not use characters like " or ; and do not press “Enter” within the quotation marks. These are special characters which are used by JavaScript.

Change Font type, size and color

Should you want to change the font face, size and color of the quotes, you can insert the tags. For those who are unfamiliar with these tags, what you can do is to create a new post under “Compose” mode. Enter a word, e.g., TEXT. Block the word and change the font size through the toolbar. All you want is the code, and you can therefore delete this draft post. Next, go to “Edit HTML” mode and you can see the span tags like this:-
Should you want to change the font face, size and color of the quotes, you can insert the tags. For those who are unfamiliar with these tags, what you can do is to create a new post under “Compose” mode. Enter a word, e.g., TEXT. Block the word and change the font size through the toolbar. All you want is the code, and you can therefore delete this draft post. Next, go to “Edit HTML” mode and you can see the span tags like this:-

<span style="color: rgb(255, 0, 0);">TEXT</span>

Insert these tags (highlighted in red) into the above JavaScript for Quote of the Day at these places:-

<span style="color: rgb(255, 0, 0);">
<script language="javascript" type="text/javascript">
|
|
|
</script>
</span>

If you want to change the font type or color, you can do the same. Type any word in the “Compose” mode, highlight it and change the type or color through the toolbar. Go to “Edit HTML”, copy the code and insert that into the place shown above.

Best blogger templates

Customize and Modify Poll Widget | Blogger Tips and trick

noreply@blogger.com (Shebby) — Sun, 27 Dec 2009 12:52:00 +0000

In this article, we shall suggest some modifications to the CSS template to change the appearance of the Poll widget to something eye-catching and attention-grabbing. For example, we can add background colors or images to the Polls widget and change the font and border colors. These should draw the attention of your readers to the Poll and put some buzz into the Blog.

In case you are not aware, Blogger recently introduced a Polls Page Element allowing you to add a Poll to your sidebar. You determine the question and answers, and readers cast their votes within the Poll period set by you. It sounds like a nice feature, except that the look of this Poll widget is plain and unexciting as it blends into the background of your sidebar. With a bit of effort, we can change all that.

Set up a Poll:

To set up a Poll, go to Template -> Page Elements and Add a Page Element in your sidebar. Select “Poll”. Enter the Question and insert all the possible answers. Tick if you allow multiple answers and set a date for the Poll to end. When you refresh your Blog, this is the Poll widget you see.

It follows the sidebar styles and blends with the sidebar background color. It is plain and many readers may not even notice it there.

Add Border and Colors:

Let us now add a border and background color to it. Go to Template -> Edit HTML, scroll to any early part of the CSS template and insert the following code (shown in red). For easy reference, let's put the code under /* Sidebar Content */


/* Sidebar Content */
#Poll1{
background:#FFFF00;
border:3px solid #736AFF;
width:150px;
padding:0 10px;
}

Note:

1. When a Poll is created, Blogger will assign an ID to the widget. If this is the only poll, it will be named Poll1. If there is another poll in the Blog, that second poll will be named Poll2 and you should change the reference accordingly.

2. We have given it a yellow background color (#FFFF00). Change it to any other color by inserting the relevant color code from our Color Code Chart.

3. By default, there is no frame border to the widget. To make it stand out, we added a border of 3px. You can reduce it to 1px if you want a narrow border. Also, the color of the border is blue (#736AFF) in this example.

4. If the Poll widget is placed in the sidebar, it takes up 100% of the sidebar width. To narrow it, we can insert a width setting.

5. The padding is to give a space of 10px to the left and right of the contents, so that the border does not come too close to the wordings.

After saving the above modification to the template, this is the new look of our Poll widget. Doesn't it catch your attention right away?

Change Title Font:

If this is not enough, let us change the font of the Title to make it different from the other widgets in the sidebar. Where we inserted the earlier code, we add this other definition (shown in red) into the template:-


/* Sidebar Content */
#Poll1{
background:#FFFF00;
border:3px solid #736AFF;
width:150px;
padding:0 10px;
}

#Poll1 h2{
text-align:center;
font-size:140%;
color:#F87431;
font-family:arial;
font-weight:bold;
}

Note:

1. The text-align property shifts the Title to the center. If you are happy having the Title aligned to the left, remove this line.

2. You don't need a font-size that large. This is to show you how you can adjust the font-size if you want to.

3. Again, you can assign a different color code to the color of the text.

4. Under font-family, you can change the font face of the Poll Title. Usual font families in Blogger include – arial, courier new, georgia, lucida grande, times new roman, trebuchet ms, verdana.

5. We made the Title bold by adding a font-weight. If you want it in italic, you can add another line of code - font-style: italic; - before the sign }

With the above code, readers should clearly see the new Poll widget:-

Add Background Image:

Instead of a background color, we can use an image as a backdrop to our Poll widget. First create an image and upload it onto a free server like Google Page Creator and Google Groups. You may also refer to our rather comprehensive list of free Image Hosts and File Hosting Services in the article on Manage Blogger Image Storage Space. Take note of the IMAGE URL.

Next, go to Template -> Edit HTML and insert the background image as follows:-


/* Sidebar Content */
#Poll1{
background:url(IMAGE URL);
border:3px solid #736AFF;
width:150px;
padding:0 10px;
}

#Poll1 h2{
text-align:center;
font-size:140%;
color:#F87431;
font-family:arial;
font-weight:bold;
}

The IMAGE URL is the address of the image uploaded onto the web server. There are more attributes you can add to adjust the image position or repeat it. If you need to know more, you can refer to our guide at Background Image for Blogger Template.

With a background image, the Poll widget can look truly outstanding and inviting like this:-

Finally, together with this article, we have created a new Poll to ask you what Blogger template you are using. Although we are using the Minima template, we have received many queries by users pertaining to their other templates. To reply to their queries, we have also created test blogs in other Blogger template formats. Some of our articles, such as the ones on Blog Title alignment and Three Columns Templates, are catered to different template users. If you could let us know what Blogger template you have, we could bear that in mind in our future articles and discuss the changes to be made in relation to these other templates. Have fun creating and designing your own Poll widget!

Best blogger templates

Chat Box, Shout Box and Google Talk | Blogger Tips and Trick

noreply@blogger.com (Shebby) — Sun, 27 Dec 2009 11:01:00 +0000

The chat box you see on the left sidebar is one of the many FREE interactive tools you can get for your blogs. Call them what you like – tagboard, message board, chat box, chatter box, message box, shout box – they have one thing in common i.e., promoting interaction by allowing your visitors to leave messages or chat with one another. While it is true that your visitors can leave comments on the individual posts, there may be occasions when they have something to say that does not relate to the posts. A chat box will come in handy.

There are quite a number of service providers but we shall comment on the few that we think you can consider trying out. You can search the web for more. The key factors that we looked out for are simple configuration, nice colors and design, guard against comment spam, and ease of use. You may see advertisements in the free plans, but they are usually not that obtrusive and you can probably live with that. These providers may offer paid services as well, with extra features or bigger storage space for your messages. Our advice is to start off with their free service and monitor the usage of your chat box before upgrading your basic plan.

Cbox:

We used their chat box for this site primarily because they have the essential features we wanted and the design looks sleek. Sign up with them, and begin configuring your chat box. Under the “Cbox Options” tab, configure the Display, Date and Post Options. Note that under “Post Options”, there is an “Anti-spam” feature. Tick that. Click “Colors & Fonts” and select the colors that will blend well with your blog. Use the “Color Picker” option at the top right corner if you are not familiar with the HTML color code. When you are done, click the “Quick Setup” tab to get your HTML code.

Login to your Blogger Dashboard, go to Template-> Page Elements. Where your sidebar is, click “Add a Page Element” and select “HTML/JavaScript”. Copy the above HTML code, paste it, and save the widget.

If you should receive any spam post, go to “Messages”, ban the user and delete the message. Under “Blocked Users” you can change the duration of the ban.

Shoutmix:

Here, your chat box is called a shoutbox. Once you have entered your bare particulars, choose one of their standard shoutbox styles, and your account is created. Go to the “Style” category. Shoutmix is interesting in that you can tweak the “Labels” in addition to the “Appearance”. Configure the settings under “General”. When you are ready, click the “Use Shoutbox” tab. You can now alter the width and height of your shoutbox and “Generate” the HTML code.

If you have a family-oriented blog, you may turn on the “Profanity Filter” by specifying a list of words that will not be shown in the shoutbox. You can also ban specific users or sites through their “Ban Control” option.

Oggix:

A number of blogs have this shoutbox. Other than unlimited messages, you can find a wide range of custom tools and features. For a period of time, their code could not work on the new Blogger platform. That should have been fixed by now. Feel free to use their demo shoutbox and enter test messages before registering with them.

Tag-World

Some features like profanity filter are not available on their free plans. Otherwise, they have the usual customizable layouts, IP blocking, and anti-spam controls that you can find in the earlier sites. A simple tagboard that you can use for your blog.

Google Talk

If the visitors to your blog are family members and friends, get them to register free accounts with Google. You may then add a Google Talk gadget to your blog. Click “Add to your webpage” to configure the size of your widget and generate the HTML code. Your visitors can now chat away on your blog.

Plugoo:

There is this rather different and interesting service which you can check out. Imagine that you are in office, or do not want to be glued to your blog all the time. Should your blog visitor post a message on your chat box, you may not know about it until you have a chance to look at your blog. Plugoo has therefore created a new communication method enabling you to chat with your visitor through your Instant Messenger.

Even in office, most of us use Instant Messenger service to communicate with one another. As long as you have an account (GoogleTalk, Windows Live Messenger, Yahoo! Messenger, AIM, Jabber or ICQ), it can be linked to Plugoo. When visitors to your blog post messages on your Plugoo chat box, you will see the messages in real-time and are able to reply instantly. Your visitors do not need an Instant Messenger to chat with you, and will not know your Instant Messaging account address. The limitation however is that you can only chat with one person at a time.

For more ideas on what to put into your sidebar, check out Blog Widgets, Gadgets and Add-ons (I) and (II).

Best blogger templates

Blog Widgets, Gadgets and Add-ons (II) | Blogger Tips and Trick

noreply@blogger.com (Shebby) — Sun, 27 Dec 2009 10:19:00 +0000

This is a continued list of Blog Widgets, Gadgets and Add-ons which you can include into your Blog. If you have not read the first part, please check out Blog Widgets, Gadgets and Add-ons (I). You may also consider having a chatbox, shoutbox or message board on your Blog. We ended with AuctionAds which can earn you some extra revenue. We begin this second part with a fun widget that you can have.

Punkymoods:

“The heart has its reasons which reason knows nothing of.” ... Blaise Pascal

If you are writing an online diary about personal events, you may want to let your readers know at a glance your mood at the current moment. Punkymoods does just that. Get a free account and add their code to your Blog. Whenever your mood changes, login to their site and set the mood. The image or emoticon displayed on your Blog will be automatically changed to show your current mood.

ChipIn:

Organizing a fund-raising event and want readers to contribute to the funds? ChipIn provides a widget which gives an up-to-date status and a secure means of collecting the funds.

Clustrmaps:

Most of us would have used statcounters to keep track of the number of visitors to our sites. Numbers alone may be a little stale, and if you like something more graphic which shows the locations of your visitors, open a free account with Clustrmaps.

Go to Admin page and copy the HTML code into your Blog. Their service is free if you have not more than 2,500 visitors per day.

Answers.com:

Do you always have to explain terms and jargons used on your site? Incorporate some free Answer tools like AnswerTips and AnswerBoxes from Answers.com for your visitors to obtain instant answers to key words and queries.

Bluf:

Also powered by Answers.com is the widget by Blufr where viewers are posed a question which could either be true or a bluff. [Update: Service is no longer available and link is therefore removed.]

TheFreeDictionary:
This site TheFreeDictionary has more free tools for you to choose from. You could have a simple dictionary lookup box.

You could also consider other useful resources like Word of the Day, Article of the Day, This day in history, Today's birthday, In the News, Quote of the Day and games like Spelling Bee, Match Up and Hangman.

LibraryThing:

If you have a collection of books, you might find the service at LibraryThing useful. Here, you can create an online catalog of your books and be connected to people around the world who share similar collections. You can place a widget on your Blog to let people know what you are reading.

Vizu:

Creating a blog poll to collect opinions from your readers has never been easier. With Vizu you can create a poll using customized templates and insert the polling widget into your Blog. If you'd like extra income, they will pay you to host selected webpolls through their Vizu Answers scheme.

WeLoveWidgets:

Teaming up with Astrologer.com, WeLoveWidgets provides a horoscope widget that updates itself and lets you see who you are compatible with.

Technorati:

This site was discussed in our article on Submit Blog to Blog Directories (I). Check out the blog widgets offered by Technorati too. You can have widgets displaying the top tags of your Blog and number of Links, or try their new Authority widget to show your status as an authoritative blogger. Again, this is based on the number of blogs linking to you.

Best blogger templates

Blog Widgets, Gadgets and Add-ons (1) | Blogger Tips and Trick

noreply@blogger.com (John) — Sun, 27 Dec 2009 07:47:00 +0000

In this series, we shall list the free, popular, and interesting web widgets and gadgets that you can consider adding to your Blog. Widgets are elements that extract the services or content from other sites. Some of these widgets are useful, providing your readers with news, information, and reference tips. Others may be just fun and games which make your Blog a little more interesting and promote interaction among your readers. Because there are so many applications, developers and sites, this article will be split into parts and we shall update them now and then.

Many of the sites offer easy to install HTML or JavaScript codes. All you need to do is to copy the code and place them into your layout. For instance, if you want a widget to appear in your sidebar, login to your Dashboard, go to Template -> Page Elements and click “Add a Page Element” at the sidebar. Select “HTML/JavaScript”. Paste the code generated by the service provider and save. Every time you create a new page element, it appears at the top of all the other elements. If you want it somewhere near the bottom of the sidebar, just left-click that “Page Element”, drag and drop to the place you want. Click “Save” at the top right hand corner of the page to save the new layout.

A note of caution when adding widgets. While you may be tempted to have as many widgets as you can lay your hands on, having too many may clutter the Blog and cause slower page downloads. Also, since many of them work on JavaScripts, readers who configure their Firefox or IE browsers to block scripts may not see these features. For these reasons, we have added only a couple of widgets to let you have an idea, but have not included all the widgets listed in this article. Take your time to pick those that truly complement your Blog contents.

Google Gadgets

Many of the applications are created by different developers and users. There is no registration required at your end. When you have chosen one, click “Add to your webpage” and you will be asked to customize the title, width, height and border of the gadget. If the width of your sidebar is e.g., 150 px, you may want to set the gadget width to something less than that. It is alright to have a larger width, but readers will have to scroll to view the gadget in its entirety. When you are satisfied, click “Get the Code”. Copy the code and paste it into your “Page Element” described above.

Widgetbox
If you think Google Gadgets are great, you would love the directory of web widgets at Widgetbox. They provide ready installation codes for TypePad, WordPress, Blogger, MySpace and most other blogs, sidebars or websites.

AddThis:
This is a useful service. The widget allows readers to easily bookmark your Blog, or subscribe to your feeds. It supports many feed reader as well as social bookmarking services. The design looks neat and saves up a lot of space.

Register at their AddThis site. You can either have a Bookmarking widget

If you are prompted to enter your Feed URL, you could use your Blog URL with “/atom.xml” or “/rss.xml” after it. In this Blog, you will see that the Bookmarking widget has been inserted into the template such that it automatically appears after every post. To do this, go to Template -> Edit HTML and click the “Expand Widget Templates” checkbox.

Next, look for this line: -


class="post-footer"

Paste the generated Bookmarking widget code either just before or just after that. You can preview the Blog to see the difference in the position of the widget. Should you want the widget to appear on the left or right, you can align it by adding the following alignment tags to the widget code:-

align="right">WIDGET CODE

Lilypie:
If you have a baby, child, or are expecting one, the tickers you find at Lilypie will be nice inclusions in your Blog.

You don't need to register to use the service. Simply choose the background, select marker and input personalized text to create a ticker code. Paste the HTML code into your Page Element.

TickerFactory
This is another tracker that you can add to your Blog. Visit their TickerFactory site and choose something that you would like to track. The popular ones are weight loss progress, baby's age and anniversary countdowns. No registration is required.

Customize the ruler and ticker slider designs, copy the HTML code and paste it into your Page Element.

AuctionAds

Sign up for an account at AuctionAds to display an eBay auction widget. The displays are related to the key words you assigned. According to their FAQ, their ads are compatible with AdSense and other ad systems. In short, you can have both AuctionAds and AdSense ads in your Blog. You get a commission when someone buys an item from eBay and it is an additional way to earn some revenue through your Blog.

This article continues at Blog Widgets, Gadgets and Add-ons (II). You may also consider having a chatbox, shoutbox or message board on your Blog.

Best blogger templates

Add Images or Icons to Sidebar Links | Blogger tips and tricks

noreply@blogger.com (John) — Sat, 26 Dec 2009 17:23:00 +0000

Sidebars are sometimes crowded with lots of text. There are many ways to make some of the items stand out. In my case, I decided that I will add icons next to the links, to differentiate links from normal text. I will also draw a thin line after each link. To be consistent, the color of these lines shall be the border color.

Note: This is the style we used for our Minima template. Since each type of template has its unique margin, padding and style settings, this guide may not apply to these other templates. You can try to adapt this to your template. Preview the change, and adjust the margins and paddings. Often, a bit of experiment with these values will do the trick. If they still don't look satisfactory, do not save the template.

First, scout around for a picture that you would like to use. In this site, I have used an arrow image. You can use any photo editing software to reduce the image size to about 9px x 9px; I used Google's Photo Editing Software Picasa.

After having an image, upload it onto a free server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the URL of the Image file.

Go back to “Template” tab and click “Edit HTML”. Scroll to look for the following lines:-


.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}

Replace them with this:-


.sidebar ul {
list-style:none;
margin:0 0 1.25em;
padding:0 0px;
}

.sidebar ul li {
background:url("URL OF IMAGE FILE") no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:3px;
border-bottom:1px dotted $bordercolor;
line-height:1.4em;
}

Remember to insert the URL OF IMAGE FILE into the code.

Best blogger templates