Introblogger

Wall Press | Blogger Template

2010-07-17T11:27:00.001+08:00

Wall Press is a minimal, 2-column, clean blogger template with three column footer.

It is cross-browser compatible. However, the CSS3 shadow effects are not visible in Internet Explorer. Instructions on editing the template can be found after the cut.

Instructions on editing the template

Navigation Bar

<div id='nav'>
<ul>
<li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a class='feed' expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a></li>
<li><a class='comment' expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comments RSS</a></li>
<li><a class='edit' href='#'>Edit</a></li>
</ul>
</div>

Leave your comments below if you have any questions regarding the template or contact me via form.

UPDATE 18/07/2010 :

The template downloaded before this update date comes with header with no IMAGE support. Thanks to Whisper for the information on that. I've updated the template downloads with HEADER IMAGE support.

For those who downloaded and using the template, you have to change a small piece of code with another. Go to Design > Edit HTML > Click on "Expand Widget Templates". Search for the following code using CTRL + F.

Just above that code, you'll see these codes.

Replace those codes with the code below and click Save.

Revive | Free premium blogger template

2010-07-14T00:15:00.001+08:00

Today, I am releasing Revive, a free premium blogger template. The template is available in five different hot colours: pink, red, green, blue and orange. This is the first time I'm releasing multi-colour versions of the same template. I've managed to compress all five different colour versions into a RAR file. So that you don't have to download them one-by-one which would really waste your time.

Revive Blogger Templates Demos

Here are the demo blogs of five versions of different colours of Revive Blogger Template.

Revive Red Blogger Template

Revive Pink Blogger Template

Revive Orange Blogger Template

Revive Blue Blogger Template

Revive Green Blogger Template

Download

Download Revive blogger template for your blog now.

Download Now

Features of Revive blogger template

1. Featured contents slider
You can display your popular/featured posts here. The slider is only visible in home page of the blog and not in archive pages, post pages or static pages.

2. Multi-level drop down navigation menu
This CSS only multi-level dropdown menu works without any javascripts.

3. Tabbed sidebars
Only the first three widgets in the sidebar will be shown in tabbed sidebar. Thanks to Abu Farhan for this great feature.

4. Three column footer
The template comes with a minimalistic three column footer.

5. Post Title with comment bubble
Post comments number is shown in a small "tab" like feature beside every post title. The "tab" above the post wrapper shows "Latest Posts" in the home page and shows "You are reading" in post/static/archives pages.

6. Unique Comments Display
Most of the blogger templates care less about the design of comments boxes. But, I've managed to design comment boxes with unique look. I've implemented the same technique used to display the comments in Intro Blogger blog in this template.

Editing instructions

1. Featured contents slider

Replace the "Sample Post 1" between <h2>...</h2> tags in the code below with the post title of your featured posts.
Replace href='#' with desired URL and src='......' with desired image source URL in <a href='#'><img alt='' height='145' src='http://3.bp.blogspot.com/_b8IA1ajBJG8/TDrdvgnIX1I/AAAAAAAABXs/mzdjCK7iZTg/slide_image.png' width='215'/> . The image height should be 145px and width is 215px. You can use slightly larger images if you want.
And write a small summary about your featured post between <p>......</p> tags.

<div id='slideshow'>
<div id='slidesContainer'>

<div class='slide'>
<h2>Sample Post 1</h2>
<p><a href='#'><img alt='' height='145' src='http://3.bp.blogspot.com/_b8IA1ajBJG8/TDrdvgnIX1I/AAAAAAAABXs/mzdjCK7iZTg/slide_image.png' width='215'/></a>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. [...]</p>
</div>

<div class='slide'>
<h2>Sample Post 2</h2>
<p><a href='#'><img alt='' height='145' src='http://4.bp.blogspot.com/_b8IA1ajBJG8/TDredUF2mGI/AAAAAAAABX0/pnnpCRa-go8/slide_image2.png' width='215'/></a>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. [...]</p>
</div>

<div class='slide'>
<h2>Sample Post 3</h2>
<p><a href='#'><img alt='' height='145' src='http://3.bp.blogspot.com/_b8IA1ajBJG8/TDrdvgnIX1I/AAAAAAAABXs/mzdjCK7iZTg/slide_image.png' width='215'/></a>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. [...]</p>
</div>

<div class='slide'>
<h2>Sample Post 4</h2>
<p><a href='#'><img alt='' height='145' src='http://4.bp.blogspot.com/_b8IA1ajBJG8/TDredUF2mGI/AAAAAAAABX0/pnnpCRa-go8/slide_image2.png' width='215'/></a>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. [...]</p>
</div>

</div>
</div>

2. Navigation menu

<div id='navigation'>
<ul id='nav'>
<li class='page_item'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li class='page_item page-item-51'><a href='#' title=''>About</a></li>
<li class='page_item'><a href='#' title='Categories'>Categories</a>
<ul>
<li class='cat-item cat-item-3'><a href='#' title=''>Category 1</a></li>
<li class='cat-item cat-item-4'><a href='#' title=''>Category 2</a>
<ul class='children'>
<li class='cat-item cat-item-8'><a href='#' title=''>Sub Category 1</a></li>
<li class='cat-item cat-item-8'><a href='#' title=''>Sub Category 2</a></li>
</ul>
</li>
<li class='cat-item cat-item-5'><a href='#' title=''>Category 3</a></li>
<li class='cat-item cat-item-1'><a href='#' title=''>Category 4</a></li>
<li class='cat-item cat-item-6'><a href='#' title=''>Category 5</a>
<ul class='children'>
<li class='cat-item cat-item-7'><a href='#' title=''>Sub Category 1</a></li>
<li class='cat-item cat-item-9'><a href='#' title=''>Sub Category 2</a></li>
</ul>
</li>
</ul>
</li>
<li class='page_item'><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe'><img class='headrss' src='http://2.bp.blogspot.com/_b8IA1ajBJG8/TBoCmcgoINI/AAAAAAAABHc/8zHrxkbrdXE/rss.png'/>Subscribe</a></li>
<li class='page_item page-item-51'><a href='#' title=''>Contact</a></li>
</ul>
</div>

Leave your comments below or contact me if you need any further help on editing the template.

HTML5 and CSS3 cheat sheets collection

2010-07-13T13:36:00.002+08:00

HTML5 and CSS3 have started conquering the web. They both combine to produce great functions and effects and really make our eyes wide opened. For example, have a look at this Windows 7 start menu designed using only CSS3! Nowadays, there are a lot of tutorials and resources on HTML 5 and CSS3 including the cheat sheets which are very essential to web developers and designers who are willing to code using these standards. I've managed to search and listed out the available cheat sheets.

CSS3 cheat sheets

1. CSS3 Help Sheets

2. CSS3 Quick reference guide

HTML 5 cheat sheets

1. HTML 5 Visual Cheat Sheet

2. HTML 5 Pocket Book

3. HTML 5 Quick reference guide

4. HTML5 Canvas Cheat Sheet

5. HTML5 id/class name Cheat Sheet

15 most popular Blogger widgets that you shouldn't miss

2010-07-09T14:18:00.001+08:00

Widgets are becoming a popular and pervasive part of the blogosphere. It can be said that "no widgets, no blogging". I've managed to search for the best and popular widgets that are being used by majority of bloggers. Finally, I came up with a compilation of 15 most popular blogger widgets.

1. Related posts widget

2. Related posts with thumbnails widget

3. Table of contents widget

4. Recent posts widget

5. Recent posts with thumbnails widget

6. Blog translation widget

7. Blog shoutbox widget

8. Top commentators widget

9. Retweet button

10. Facebook like button

11. Wibiya toolbar widget

12. Google Page Rank widget

13. Numbered page navigation widget

14. Random posts widget

15. Facebook fan page badge widget

20+ excellent Blogger blog designs for your inspiration

2010-07-08T17:46:00.002+08:00

All of us know that a blog's design plays a great role in improving its traffic and pagerank. If the content of a blog is the king, then the blog design is the queen. Here is a collection of 20 well designed Blogger powered blogs for your inspiration.

I’ve missed something? Definitely! Let me know in the comments!

1. Insight

2. Dante Araujo

3. Woork

4. Blogger Buster

5. Themerious

6. Onedesignph

7. Minimal objective

9. Design for life

10. Ramesh Studios

11. Sama-sama-blog

12. Sketch blog

13. Compartamos Ideas 2.0

14. Meta microcosmos

15. Nox-mysterium

16. Flair in the City

17. Blog Amuki

18. Detruk

19. Complotito

20. Code-code-an

21. Nitesh Kothari

Cool CSS3 button maker

2010-07-07T04:47:00.002+08:00

CSS3 button maker is a simple and great online tool created by Chris Coyier from CSS Tricks. This tool allows you to generate a image-less button fully making use of CSS3. I am sure that some of you may don't know what CSS3 is really about. CSS3 is a collection of modules that extend the previous CSS2 specification that we all know. CSS level 3 is currently under development. Read further about CSS3 here.

CSS3 Button Maker

Button above was made fully with CSS3. The effects are clearly visible in latest versions of Firefox, Konqueror, Opera or Safari/Webkit. In older browers that don’t support these properties, the fallback is solid-color background, no shadows, and square corners which is not a big deal as everybody are moving to new browsers. To create such button for your use, visit CSS3 button maker now. Here is a preview of the super duper online tool.

Once you've customized the button, click on the button "View the CSS" to get the CSS code. Copy the code and go to Blogger > Design > Edit HTML and search for ]]></b:skin>. Paste the copied code immediately before ]]></b:skin> and click Save.

To use it in posts or anywhere in your template, simply add a class='button" attribute in anchor tag. Here is a sample button and its code.

CSS3 Button Maker

<a class="button" href="http://css-tricks.com/examples/ButtonMaker/">CSS3 Button Maker</a>

You are done.

Image mouseover fade/greyscale effect with jQuery in Blogger

2010-07-06T13:56:00.004+08:00

Today, I am going to make a black and white image fade into a colour image or vice versa on mouseover with jQuery. So, follow the steps below to use the effect in your blog. In this tutorial, I'm going to use two images, a colour image and its greyscale mode image.

View the demo

You can create greyscale mode image of the original image using any image editing softwares. Or you can use free online image editors such as Online-Image-Editor, Fotoflexer, Pixlr, Picnik and more.

1. Styling – CSS

First log into Blogger > Design > Edit HTML. Search for the code ]]></b:skin> . And replace it with the codes below.

span.fadehover {
position: relative;
}

img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

img.b {
position: absolute;
left: 0;
top: 0;
}

]]></b:skin>

2. jQuery & Function

Now add the following jQuery script and function immediately before the </head> tag.

3. Wireframe – HTML

And here is the HTML code that you should place in your Blog posts. But, remember to add it in EDIT HTML mode and not in Compose mode in text editor.

View the demo

UPDATE : You can decide whether you want the effect is from GREYSCALE to COLOUR or COLOUR to GREYSCALE by changing the image source in the HTML code above. The image with class='a' appears first and changes to image with class='b' on hover.

How to change "Newer Posts" and "Older Posts" in Blogger?

2010-07-03T14:26:00.002+08:00

Here is a small tutorial about customizing the default Blogger pager link texts, "Newer Posts" and "Older Posts" at the bottom of every page. First, log into Blogger then go to Design > Edit HTML. Tick the "Expand Widgets Templates" checkbox at the top right corner of the code-containing box.

1. To change NEWER POSTS.

Search for <data:newerPageTitle/> using CTRL+F. This <data:newerPageTitle/> tag is used to name the button which links to the Newer Posts. To modify the text, just delete this tag and write what you want.

2. To change the OLDER POSTS .

Search for <data:olderPageTitle/> and replace it with the text with you want to appear.

3. To change the HOME text.

Search for <data:homeMsg/> and replace the tag with the desired text.

Update:

If you want to show images/icons instead of text, all you have to do is just replace the tags highlighted above with the images.

Thousands of these icons are available on net. Simply google for them. The final result will look like this.

Modern Clix Blogger Template

2010-06-29T00:04:00.000+08:00

Modern Clix is a minimal, grid based, elastic Wordpress blog theme inspired in the Swiss Style of Design. I've managed to convert it into Blogger after being requested to do so by a reader, Earl. Another important thing is that it is a fast-loading blogger template with no background images involved in CSS.

Instructions on editing the template

1. Blog title and description

<div id='main-nav'>
<ul>
<li class='page_item page-item-2'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li class='page_item page-item-2'><a href='#' title='About'>About</a></li>
<li class='page_item page-item-49'><a href='#' title='Sample Page'>Sample Page</a></li>
<li class='page_item page-item-51'><a href='#' title='And Another Sample Page'>And Another Sample Page</a></li>
</ul>
</div>

2. Navigation menu

<div class='col last span-12' id='header'>
<h1><a expr:href='data:blog.homepageUrl' title='Your Blog Title Here'>Modern Clix</a></h1>
<h2>Blogger template <span class='low'>by</span> Introblogger</h2>
</div>

3. Date format
- Blogger default date format is Monday, June 28, 2010. Change it to June, 28 2010.

Add "About Author" box below every blog posts in Blogger | How to

2010-06-27T15:42:00.001+08:00

This is a tutorial on adding a simple and clean About Author below every posts in Blogger that only appears on post pages. I am sure that all of us would have seen this feature mostly in Wordpress blogs. But now, Blogger users can have this feature too. You may have a look at my latest Blogger template, Charisma where I've implemented this feature. Follow easy steps below to add it.

1. Go to Edit HTML page in Blogger and tick the "Expand Widget Templates" checkbox above the top right corner of the template code box.

2. Now find for the ]]></b:skin> code using CTRL+F and replace it with the code below.

/***** Author Box ********************/

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}

.author-box p {
margin: 0;
padding: 0;
}

.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}

]]></b:skin>

3. Then, search for <div class='post-footer-line post-footer-line-1'>. Immediately after that, paste the code below.

<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='http://1.bp.blogspot.com/_b8IA1ajBJG8/TCNHNhq1KSI/AAAAAAAABME/W9v1xQsqxZc/avatar.png' width='70'/><b>About Author</b><br/>
Write anything about you here!<br/></p>
</div>
</b:if>

4. Click "Save" and done.

<b:if cond='data:blog.pageType == "item"'>....</b:if> is to make sure that the box is only visible in post pages and won't appear in Home Page. If you want to show your own image, just replace the default image source shown in green colour text in the code with your IMAGE URL.

Blogger Template | Charisma

2010-06-25T23:05:00.000+08:00

Charisma is a wordpress theme designed by Cozmoslabs. Attracted to it's elegance and simplicity, I decided to convert this theme into Blogger. Previously, I've converted another theme by Cozmoslabs, { Early Morning }.

The home page has a beautiful slider, where you can display featured blog posts. Charisma theme comes with a unique feature where only post titles are shown in the home page of the blog. This feature for sure will help to increase your blog's page views and average time on your site.

As mentioned by original author of the theme, Cristian Antohe, it is a well structure theme which highlights the content and gives the user a pleasurable reading experience.

Here are instructions on customizing/editing the Charisma blogger template.

1. Navigation menu

<div id='nav'>
<div class='wrap'>
<ul class='nav' style='margin-left:130px;'>
<li class='home current_page_item'><a expr:href='data:blog.homepageUrl' rel='nofollow' title='Home'><span>Home</span></a></li>
<li class='page_item page-item-3'><a href='#' title='Contact'><span>Contact</span></a></li>
<li class='page_item page-item-5'><a href='#' title='Services'><span>Services</span></a>
<ul class='children'>
<li class='page_item page-item-7'><a href='#' title='Subpage 1'><span>Subpage 1</span></a></li>
<li class='page_item page-item-12'><a href='#' title='Subpage 2'><span>Subpage 2</span></a></li>
</ul>
</li>
<li class='page_item page-item-16'><a href='#' title='About'><span>About</span></a></li>
<li class='page_item page-item-18'><a href='#' title='Page Templates'><span>Page Templates</span></a>
<ul class='children'>
<li class='page_item page-item-20'><a href='#' title='One Column'><span>One Column</span></a></li>
<li class='page_item page-item-21'><a href='#' title='Html Elements'><span>Html Elements</span></a>
<ul class='children'>
<li class='page_item page-item-23'><a href='#' title='Sub Menu'><span>Sub Menu</span></a></li>
<li class='page_item page-item-24'><a href='#' title='Interestingness'><span>Interestingness</span></a></li>
<li class='page_item page-item-25'><a href='#' title='Birds'><span>Birds</span></a></li>
</ul>
</li>
<li class='page_item page-item-22'><a href='#' title='Archive Template'><span>Archive Template</span></a></li>
</ul>
</li>
<li class='page_item page-item-19 current_page_parent'><a href='#' title='Notes'><span>Notes</span></a></li>
</ul>
</div>
</div>

2. Blog title and description.

<div id='title-area'>
<h1 id='title'><a expr:href='data:blog.homepageUrl' title='Your Blog Title Here'>Charisma</a></h1>
<p id='description'>Just another Test Blogs weblog</p>
</div>

3. Featured Content Slider

<div class='anythingSlider'>
<div class='wrapper'>
<ul>
<li>
<a class='alignleft' href='#' title='Hello world!'><img alt='rose' class='attachment-home-charisma-featured' height='205' src='http://1.bp.blogspot.com/_b8IA1ajBJG8/TCNOZY32LbI/AAAAAAAABNs/CjgFsk-iXms/s1600/rose.jpg' title='rose' width='165'/></a><h2><a href='#' title='Hello world!'>Hello world!</a></h2><p>Vel cu causae torquatos concludaturque, quo laudem dolorum et. No duo suats alia omnium, ne debet omnes vim. Has quodsi vituperata eu, nam no ferri nostrud mentitum? An nulla dicant nec, eum possit vivendo alienum ad! Animal scripserit ne mea, ex vel vocibus eloquentiam. Sea aperiam commune te.</p>
</li>

<li>
<a class='alignleft' href='#' title='Birds migrate in the winter'><img alt='DSC_0208' class='attachment-home-charisma-featured' height='205' src='http://4.bp.blogspot.com/_b8IA1ajBJG8/TCNOaLL2EfI/AAAAAAAABN0/k8l7AQz6pFw/s1600/DSC_02081-165x205.jpg' title='DSC_0208' width='165'/></a><h2><a href='#' title='Birds migrate in the winter'>Birds migrate in the winter</a></h2><p>Nulla vel dolor ac diam dictum rutrum. Praesent feugiat nisl et quam lacinia bibendum. Pellentesque enim augue, mollis in cursus quis, blandit ut eros. Nam metus arcu, adipiscing imperdiet facilisis eu, dictum quis augue. Suspendisse potenti. Mauris odio nulla, euismod fermentum tempus et, mattis et nisi. Nam lorem ipsum, lobortis at ultricies vel, molestie quis [...]</p>
</li>

<li>
<a class='alignleft' href='#'><img alt='image name' height='205' src='Image URL' width='165'/></a>
<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>
<p>Post Description</p>
</li>

<li>
<a class='alignleft' href='#'><img alt='image name' height='205' src='Image URL' width='165'/></a>
<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>
<p>Post Description</p>
</li>

</ul>
</div>

</div>

4. About author box below every blog posts

Go to EDIT HTML and check/tick "Expand Widget Templates". Then, search for the following bunch of codes. You may replace the default gravatar image with your own image.

<div class="author-box">
<img alt="" class="avatar avatar-70 photo" height="70" src="http://1.bp.blogspot.com/_b8IA1ajBJG8/TCNHNhq1KSI/AAAAAAAABME/W9v1xQsqxZc/avatar.png" width="70" /><b>About Author</b>

Write anything about you here!</div>

Releasing F01.01| Free Premium Girly Blogger Template

2010-06-21T16:31:00.003+08:00

F01.01 is a premium girly Wordpress theme by Woothemes specially made for ladies which I decided to convert into Blogger . Unlike any other themes, this theme comes with a full illustrated figure of a female on the left side of the blog making it a perfect theme for girls.

F01.01 comes packed with some other great features too such as twitter integration, custom widgets, multi-level drop-down menu, three-column footer and more!

Customizing the theme

1. Navigation Menu

<div id='navigation'>
<ul id='nav'>
<li class='page_item'><a expr:href='data:blog.homepageUrl' title='Home'>Home<br/><div class='small'>What do you think?</div></a></li>
<li class='page_item page-item-51'><a href='#' title=''>About<br/><div class='small'>A bio about you</div></a>
<ul>
<li class='cat-item cat-item-3'><a href='#' title=''>Page 1</a></li>
<li class='cat-item cat-item-4'><a href='#' title=''>Page 2</a>
<ul class='children'>
<li class='cat-item cat-item-8'><a href='#' title=''>Sub page 1</a></li>
<li class='cat-item cat-item-8'><a href='#' title=''>Sub Page 2</a></li>
</ul>
</li>
<li class='cat-item cat-item-5'><a href='#' title=''>Page 3</a>
<ul class='children'>
<li class='cat-item cat-item-7'><a href='#' title=''>Sub Page 4</a></li>
<li class='cat-item cat-item-9'><a href='#' title=''>Sub page 5</a></li>
</ul>
</li>
</ul>
</li>
<li class='page_item'><a href='#' title='Contact'>Contact<br/><div class='small'>Write anything here!</div></a></li>
<li class='page_item'><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe'><img class='headrss' src='http://2.bp.blogspot.com/_b8IA1ajBJG8/TBoCmcgoINI/AAAAAAAABHc/8zHrxkbrdXE/rss.png'/>Subscribe<br/><div class='small'>Write anything here!</div></a></li>
</ul>
</div>

2. Twitter status- Change the text highlighted below in the codebox with your Twitter username.

<div id='twitterbig'>

<div class='bottom'>
<ul id='twitter_update_list'>
<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>
<script src='http://twitter.com/statuses/user_timeline/rethnaraj.json?callback=twitterCallback2&count=1' type='text/javascript'/>
</ul>

</div>

<div class='profilelink'>
<a href='http://www.twitter.com/rethnaraj' title='Follow me on Twitter'>Follow me on Twitter</a>
</div>

</div>

Releasing Urban Elements | A "Wordpress to Blogger" theme

2010-06-18T05:17:00.002+08:00

Today I'm releasing another great theme, Urban Elements. It was originally designed by Press75.com for Wordpress users. I've converted it into Blogger. Blogger version of the theme comes with a customized Post Title font. It was possible to use fonts other than default Blogger fonts with the help of Google Font API. You can read further about it in my previous post, add new fonts to Blogger Blogs with Google Web Fonts.

Some other unique features of this theme are multi-level drop-down menu and four 125 X 125 ads slots.

Customizing the theme

1. Navigation bar

2. Ads slots

Add new fonts to Blogger Blogs with Google Web Fonts

2010-06-15T14:09:00.000+08:00

Adding new fonts to Blogger blogs is made possible with Google Font API. You don't have to know any programming skills to do this; just get a simple HTML code from Google Web Fonts and add it to your Blogger Template. Then refer to the font in a CSS style. Here is an example:-

I Love Blogger

There are 18 new fonts which can be embedded into any web pages. Here is a screen shot of the list of fonts available in the Google Fonts Directory. Thanks to Browsershots for the shot.

So, follow these easy steps to embed those fonts to your blog.

1. Go to Google Fonts Directory.

2. Click on the font that you are interested.

3. Click on the "Get the code" tab.

4. Tick the checkboxes for the variant of the font that you want to use. Copy the code in the box.

5. Now log into Blogger > Design > Edit HTML. And search for </head> tag.

6. Paste code in the clipboard before the </head> tag.

7. So, whenever you want to use that font in your blog, just wrap your text with these tags. If you use other fonts other than Cantarell, just replace the red colored text below with the name of your font.

If you are good at editing CSS, then you can simply use the font in your CSS font stack like any other fonts.

CSS selector {
font-family: 'Font Name', arial, serif;
}

Browser compalitibity

The Google Font API is compatible with the following browsers:

* Google Chrome: version 4.249.4+
* Mozilla Firefox: version: 3.5+
* Apple Safari: version 3.1+
* Opera: version 10.5+
* Microsoft Internet Explorer: version 6+

For further informations about this Google Font API, visit their FAQ .

How to display Feedburner Subcribers count in plain text without chicklet in Blogger?

2010-05-01T23:12:00.001+08:00

I am sure that most of us have a common opinion about the default Feedburner Subcribers count chicklet that it is ugly,out-of-trend, not flexible with theme and etc. No matter what colour you change them, they never look nice. Out there in net, there are bunch of wordpress plugins which enable Wordpress users to show the count in plain text. But, its really hard to find one for Blogger. So, here I'm going to provide you a simple javascript code which enables us to show the Feedburner Subscribers/Readers count in plain text without the chicklet.

All you have to do is just copy and paste the code shown below in a HTML/Javascript widget in Blogger. Or, if you are okay with editing blogger templates, add the code wherever you want to show the count.

But, remember to change the "your_feedburner_name" with your feed name. The script will only show the subscribers number alone.

The code below is a modified version of the code with the word "subscribers" and a link to your feed.

<a href='http://feeds.feedburner.com/your_feedburner_name' target='_blank'><script language='javascript' type='text/javascript' src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=your_feedburner_name'></script> Subscribers</a>

And this is another modified version of the code with RSS image, words "Subcribers" and "Subcribe to our feed".

<div style="float:left; margin: 2px 5px 2px 2px; padding: 0; width: 46px;height:46px;background:url(http://4.bp.blogspot.com/_b8IA1ajBJG8/S9xBUyP6abI/AAAAAAAABEQ/UsV1s1oABaQ/feed-icon.png) no-repeat scroll 0pt 0pt transparent;" ></div>
<div style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://feeds.feedburner.com/your_feedburner_name" target="_blank"><script language='javascript' type='text/javascript' src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=your_feedburner_name'></script> Subcribers</a></div>
<div><p style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"> Subscribe to our feed </p><div></div></div>

And thanks to Codigosblog for the fantastic code.

Be sure to subscribe to Introblogger to be notified of updates!

Releasing Lunax | Another free premium blogger theme by Introblogger

2010-04-20T19:00:00.006+08:00

I'm releasing another free premium blogger theme, Lunax. This blogger theme is compatible with all web browsers (eg: Firefox, IE, Google Chrome, and also IE).

Here are some features of this theme:-dark, glassy, 2 columns, rounded corners(only visible in Firefox and Google Chrome), right sidebar, 3-column footer, menu/navigation bar, tabbed sidebar.

Here’s a preview (click to enlarge):

Live Demo

Click here to view a live demo of the theme.

Download Now

Lunax.rar
Lunax.zip

Customizing the theme

1. Menu bar

<div id='catmenucontainer'>
<div class='catmenu' id='catmenu'>
<ul>
<li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"' title='Comments RSS'>Comments RSS</a></li>
<li><a href='http://introblogger.blogspot.com/' title='Free Blogging Guide'>Blogger Tutorials</a></li>
<li><a href='http://introblogger.blogspot.com/2009/12/contact.html' title='Free Blogging Guide'>Contact</a></li>
</ul>
</div>
</div>

2. Mini menu bar above header

<div id='minilink'>
<p>
<a class='home' expr:href='data:blog.homepageUrl'>Home</a>|
<a href='#'>About Us</a>|
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to RSS Feed'>RSS Feed</a>|
<a href='#' title='Free Blogging Guide'>Contact</a>|
</p>
</div>

3. Tabbed sidebar

The first three widgets in sidebar will be shown in the tabbed sidebar.

Be sure to subscribe to Introblogger to be notified of updates!

You can become a Blogger Template Designer too

2010-04-08T18:00:00.003+08:00

I know that many of the Blogger™ users out there are bored with default Blogger Templates which are pretty old and outdated. Most of the bloggers are using custom Blogger templates which look more professional and attractive. But now, we may have to change our decision and view on Blogger Templates because recently Blogger has announced the launch of Blogger Template Designer to Blogger in Draft, a big first step ever in improving Blogger template designs.

In this post I'm going to tell what Blogger Template Designer is and how it helps you to become a better Blogger designer even though you have no background knowledge about editing XML codes. Before that, may be some of you don't know what really Blogger in Draft is.

Blogger in Draft is actually an experimental playground of Blogger™ where users can try out Blogger’s latest features. Recently, Blogger™ has launched Blogger Template Designer in Blogger in Draft which brings a new level of customization and design to your blog.

Features

Here, I've listed out some of the main features of Blogger Template Designer.

1. 17 new, customizable templates which are divided into 4 major groups, Simple, Picture Window, Awesome Inc, and Watermark.

2. Amazing hundreds of backgrounds images from istockphoto.

3. Modifiable color themes which matches your background images.

4. Layout options which are categorized into Body layout and Footer layout with one, two, three columns and adjustable width.

5. Advanced options which enable you to customize fonts, font colors, sizes and more.

Start using it now

To try it, go to http://draft.blogger.com and log into it using your Blogger/Google account. Then, go to Layout > Template Designer.

You will see a page where you can edit and customize the blogger template according to your taste. And here comes another best feature of it. In normal Blogger Layout option, we have to click preview button once we've edited the code, and wait until it loads, then if it contains some errors we have to bang our head to wall and search for the wrong code. But, in Blogger Template Designer, we can simply use a preview tool which automatically refreshes every time we make changes.

All the templates in Blogger Template Designer are preset with tab designs. You can make navigation bars/ menu bars in your templates by using Blogger Pages feature.

All the gadgets which can be previewed in the Blogger Template Designer page can be only moved. To add new gadget or delete a gadget you still have to go to Layout > Page Elements as in normal Blogger.

The new blogger templates also come with Attribution gadget (added to the footer by all new templates) where copyrights are shown and credits for the background images and to designer are given.

Sadly, the Blogger Templates Designer has some of it's own disadvantages too. Blogger Template Designer is that it is not supported on IE 6. Rounded corners and drop shadows used in some of the templates may not be visible in older versions of some browsers.

Here, I've attached a Youtube video about Blogger Template Designer which was released by Blogger.

So, visit http://draft.blogger.com now and become a blogger template designer too. Happy trying.

And if you liked this post, don't forget to share it with your peers and subscribe to Introblogger Feed.

How to add comment bubble beside post title(heading) in Blogger/blogspot blog?

2010-04-06T19:09:00.005+08:00

Today, I am going to teach how to add comment bubble beside each post title in Blogger blogs. Usually in default Blogger templates or in the theme that I'm using for my blog, you can see the number of comments shown below the post title is in this form: 3 comments. But, to make it look more professional we can use comment bubble where the comment number is shown inside a "Bubble" like shown in the image below.

I've used this comment bubble in my latest template, Pro Indexer. Before start editing your template save a backup of it first. After that, follow these easy steps below.

1. Go to Layout > Edit HTML > Click on "Expand Widget Templates"

2. Search for this code in your CSS. It is usually found at the end of the CSS section.

]]></b:skin>

3. Replace that code with the code below.

/*------Commment Bubble Start------*/

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://2.bp.blogspot.com/_b8IA1ajBJG8/S5tPt3thJoI/AAAAAAAAAy4/GMCCicK-kaw/comments-1.gif) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
padding:0px 0px 0px 0px;
}

/*------Commment Bubble End Introblogger------*/

]]></b:skin>

4. Now search for

and you'll eventually see the whole bunch of the codes below.

<b:includable id='post' var='post'><div class='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<h2><a expr:href='data:post.link'><data:post.title/></a></h2>
<b:else/>
<b:if cond='data:post.url'>
<h2><a expr:href='data:post.url'><data:post.title/></a></h2>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

5. Immediately next to the <h3 class='post-title entry-title'>, paste the piece of code below.

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

And now the edited code will look like this.

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'><b:if cond='data:post.allowComments'>

</b:if>

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

And you are done. Click save template.

If you don't like the default bubble that I've provided, you can use your own. All you've to do is just replacing the source link of the image( red colour in CSS ) and adjusting the width and height (Blue colour in CSS) of the bubble accordingly. If you don't know to do it, you can leave a comment below this post or send me an email. I will reply to your question in 24 hours time.

Here, I've attached a link where you can download a collection of other bubble images, so that you don't have to waste your time search for bubble images. You can upload those images to Blogger, read about it here.

Download Comment Bubble.zip
Download Comment Bubble.rar

Best collection of Girly Style Blogger/Blogspot Templates

2010-03-20T19:37:00.001+08:00

If content is the king, then design is the queen. Normally, female bloggers are very concerned about their blog design or template. They want their blog to be attractive and eye-catching. So, I've decided to post a list of Girly-style blogger templates especially for female readers of my blog ( this doesn't mean guys cannot use those themes, use them if they fit your blog niche :). Here you can see my compilation of 28 girly-style blogger templates.

1. Bubblegum Baby Free Blogger Template | Demo | Download

2. Woman Talk Free Blogger Template | Demo | Download

3. Cosmetic Girl Free Blogger Template | Demo | Download

4. She is a Lady Free Blogger Template | Demo | Download

5. Pinky 84 Free Blogger Template | Demo | Download

6. Grunge Girl Free Blogger Template | Demo | Download

7. Meninas Free Blogger Template | Demo | Download

8. Strange Little Town Free Blogger Template | Demo | Download

9. Girl in Circles Free Blogger Template | Demo | Download

10. Vector Art Free Blogger Template | Demo | Download

11. Sweet Girl Free Blogger Template | Demo | Download

12. Pinka 3 Free Blogger Template | Demo | Download

13. Girly Diaries Free Blogger Template | Demo | Download

14. Heartland Free Blogger Template | Demo | Download

15. Simple Balance Lucky Star | Demo | Download

16. Shopping Bag Free Blogger Template | Demo | Download

17. Couple in Pink Free Blogger Template | Demo | Download

18. Pink Blue Free Blogger Template | Demo | Download

19. Starlite Diva Free Blogger Template | Demo | Download

20. Free Dream Light Free Blogger Template | Demo | Download

21. Girly Web 2.0 Free Blogger Template | Demo | Download

22. Paper Girl Free Blogger Template | Demo | Download

23. Girly Magazine Free Blogger Template | Demo | Download

24. Golden Girl Free Blogger Template | Demo | Download

25. Simple is best Free Blogger Template | Demo | Download

26. Cute Color Free Blogger Template | Demo | Download

27. Love 2 Free Blogger Template | Demo | Download

28. Blog Rocker O Free Blogger Template | Demo | Download

Collection of free shoutbox widgets for your Blogger blog

2010-03-14T10:39:00.000+08:00

Here is a collection of shoutbox widgets for Blogger powered blogs. What is shout box? A shoutbox, which is also known as a guestbook, tagboard, chatbox, saybox, or a chatterbox is a communication platform which allows your visitors to leave messages for you and you can leave message for them in your blog/website, like a forum or an instant messaging service.

1. Sbox

2. Shoutmix

3. Yellbox

4. Free-Shoutbox

5. IShoutBox

6. Free-Shoutbox.co.uk

7. Shoutjax

8.Flashboon

9.Shootbox

Releasing Pro Indexer | A Free Premium Blogger Theme

2010-03-13T19:48:00.004+08:00

Today, I am releasing Pro Indexer, a free premium blogger theme. It is actually a modified version of the Indexer theme that I released previously. This blogger theme is compatible with all web browsers (eg: Firefox, IE, Google Chrome).

Live Demo | Download Now

Features

1. Right sidebar

2. Auto-height adjusting Tabbed sidebar

3. Three column footer

4. Codebox

5. Breadcrumb

6. Comment bubble beside post title

7. Social Bookmarking Icons

8. Navigation Bar

9. 125 x 125 Ads slots

10. Blockquote

Customizing the theme

1. Navigation bar

<ul class='topnav'>

<li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"' title='Comments RSS'>Comments RSS</a></li>
<li><a href='http://introblogger.blogspot.com/' title='Free Blogging Guide'>Blogger Tutorials</a></li>
<li><a href='http://introblogger.blogspot.com/2009/12/contact.html' title='Free Blogging Guide'>Contact</a></li>
</ul>

2. Ads slot

3. Mini Link above header

4. Subcribe to Email and RSS below every post

5. Editing the tabbed sidebar

Thanks to Bloggertuts for the tabbed sidebar. You can read more about editing/ adding gadgets in it here.

Add new Google Re-Buzz/Buzrr Counter to your Blogger/Blogspot blog

2010-03-07T11:33:00.003+08:00

Previously, I wrote a tutorial on adding Google Buzz This button and Buzz it button. In this post, I am going to introduce a new "Google Re-Buzz counter" button for your blog. It works like any other Digg Vote button or Twitter Retweet button. It counts how many times your posts have been shared in Google Buzz.

How to add the Buzrr to your website or blog?

To add this counter, log into Blogger. Then go to Layout > Edit HTML and check the " Expand Widgets Template" box. Now, search for this piece of code.

<data:post.body/>

Immediately before the code above, paste the following code.

<b:if cond='data:blog.pageType == "item"'>
<div style="float: right; padding: 3px;"><script src="http://www.buzrr.com/button.js"></script></div>
</b:if>

<b:if cond='data:blog.pageType == "item"'>-----</b:if>. This piece of code will make sure that the Rebuzz button only visible in post pages and not home page. This is how it will look like in your blog post.

How to add Digg vote buttons for each post in Blogger?

2010-03-01T17:11:00.000+08:00

Social networking sites are really good resources to generate traffic to our site. And Digg which is one of the top social networking sites in the world is the best place to get a constant traffic to your site. By placing a Digg share buttons, you and your blog readers can share your blog contents in Digg. So, here is a simple and quick tutorial on adding Digg vote buttons for each post in Blogger.

Open your Blogger template > Backup > Check the "Expand Widget Templates" box > Find for this line.

<data:post.body/>

Paste the following code before the code stated above.

<div style='float:right; padding: 3px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>

This is how it will look like in every blog posts.

And this is another type of Digg vote button. The Compact version. To add it, find for this code.

And paste the code below after it.

<div style='float:right; margin-top:4px;'>
<script type='text/javascript'>
digg_url = "<data:post.url/>";
digg_skin = "compact";
digg_window = "new";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'></script>
</div>

This is how it will look like in blog post.

Automatic Table of Contents or Sitemap Generator widget for Blogger blogs

2010-02-23T16:57:00.001+08:00

Here is another great widget for Blogger powered blogs. Table of contents widget. This widget automatically generates a sitemap of your blog. With such sitemap, it is easier for your visitors to look at complete structure of your blog. This widget displays your blog posts according to their categories and "New!!" text is shown for the 10 latest posts.

Although this functions like a sitemap, it cannot be submitted to Google Webmasters Tools. Because, Google webmaster tools just accepts sitemap in XML format. You can get detailed instruction on submitting sitemap to Google here.

So, all you have to do now is just copy the code below and paste it into Blogger Static Pages or any post pages. Then, publish it. You can see a demo of this widget in my Table of Contents page.

Add Google "Buzz This" and "Buzz it" buttons to your Blogger blog

2010-02-22T16:39:00.002+08:00

Recently, Google has launched it's new social media platform, Buzz. It is an extension to Gmail which enables you to share photos, links, videos, information and more with your contacts. Or simply can be said that Buzz is a mixture of Twitter, Facebook, Google Reader, Picasa and many other services.

In this simple tutorial, I am going to teach you how to integrate a "Buzz This" buttons in your blog to share your blog posts on Google Reader. But, this is not an official button released by Google. It was created by Andrew Brett, a Software Engineer at TechCrunch.

First, log into Blogger. Then go to Layout > Edit HTML and check the " Expand Widgets Template" box. Now, search for this piece of code.

<data:post.body/>

Immediately before the code above, paste the following code.

<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title' target='_blank'><div style='float:right;padding: 3px;'><img alt='Buzz Me' src='http://1.bp.blogspot.com/_b8IA1ajBJG8/S4I4bI7Q6mI/AAAAAAAAAog/zvop1rWttFI/googlebuzz.gif'/></div></a>

Update: For Classic Blogger Templates

Go to Template > Edit HTML. Then, search for this code.

<$BlogItemBody$>

Immediately before that code, paste the following code.

<a href='http://www.google.com/reader/link?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>&srcTitle=<$BlogTitle$>' target='_blank'><div style='float:right;padding: 3px;'><img alt='Buzz Me' src='http://1.bp.blogspot.com/_b8IA1ajBJG8/S4I4bI7Q6mI/AAAAAAAAAog/zvop1rWttFI/googlebuzz.gif'/></div></a>

It will look like this in your post. This button will float at the right side of your post. If you want it to float at left side all you have to do is just changing the "right" to "left" in bolded text in code above.

And this is another version of the "Buzz This" button, a "Buzz it" button. Search for this piece of code.

Now, immediately before that code, paste the code shown below.

<a style="float: right; padding-left: 19px; background-image: url(http://4.bp.blogspot.com/_b8IA1ajBJG8/S4I4FVRmbyI/AAAAAAAAAoQ/RXsKMbkj3Yw/buzz-icon2.png); background-repeat: no-repeat;" expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title' target='_blank'> Buzz it</a>

Update: For Classic Blogger Templates

Go to Template > Edit HTML. Then, search for this code.

<$BlogItemTitle$>

Immediately after that code, paste the following code.

<a style="float: right; padding-left: 19px; background-image: url(http://4.bp.blogspot.com/_b8IA1ajBJG8/S4I4FVRmbyI/AAAAAAAAAoQ/RXsKMbkj3Yw/buzz-icon2.png); background-repeat: no-repeat;" href='http://www.google.com/reader/link?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>&srcTitle=<$BlogTitle$>' target='_blank'> Buzz it</a>

This is how this button will look like in your blog.

Early Morning Theme | A Wordpress theme converted to Blogger

2010-02-20T13:39:00.000+08:00

Today, I am releasing Early Morning Theme converted from wordpress to blogger. This is my first wordpress theme to blogger conversion. It is a simple yet elegant theme. Feel free to try it.

{ Live Demo } | { Download Here }

{ Customizing Early Morning Theme }

1. Navigation bar

<div id='nav'>
<ul>
<li><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='#' title='Edit this link'>About Me</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"' title='Comments RSS'>Comments RSS</a></li>
<li><a href='#' title='Edit this link'>Contact Me</a></li>
</ul>
</div>

2. Search Box

You have to do it manually. Click Add a gadget > HTML/Javascript > Paste the code below > Give a title > Save.

3. Date format problem

Go to Page Elements > Click on the Edit button for "Blog Posts" element > Change the time format to (Month Date, Year).

For example..... February 19, 2010

Best Collection of Grunge-style Free Blogger XML Templates

2010-02-17T13:07:00.000+08:00

This is a collection of best grunge-style XML blogger template that you shouldn't miss. Have a look at these wonderful free blogger themes and choose the best blogger theme which suits you and your blog.

1. Marino 02 Free Blogger Template | Demo | Download

2. Disorganized Free Blogger Template | Demo | Download

3. Old Albums Free Blogger Template | Demo | Download

4. Rustic potrait Free Blogger Template | Demo | Download

5. Travelling Logbook Free Blogger Template | Demo | Download

6. Bunny and Teddy Free Blogger Template | Demo | Download

7. Paper Wall Free Blogger Template | Demo | Download

8. Notebook Free Blogger Template | Demo | Download

9.Dark Flower Free Blogger Template | Demo | Download

10. Grungeera Free Blogger Template | Demo | Download

11. Scrapbook Free Blogger Template | Demo | Download

12. Craftwork Free Blogger Template | Demo | Download

13. Coffee Desk Free Blogger Template | Demo | Download

14. Grunge Paper Free Blogger Template | Demo | Download

15. Recipy Free Blogger Template | Demo | Download

16. Bold Life Free Blogger Template | Demo | Download

17. Grunged Free Blogger Template | Demo | Download

18. Grunge Floral Free Blogger Template | Demo | Download

Proven ways to get more traffic to your site and blog : Part 2

2010-02-16T13:43:00.000+08:00

This is second part of my previous post, "Proven ways to get more traffic to your site and blog Part:1".

8. Exchange links with other sites. Link exchange is one of the best strategy for link building. It should be performed in order to get higher rank in search engines. There are three major types of link exchange.

One-way links- links which are pointing to our site from others and not linked back to them from your site. The easiest way to get one-way links is by submitting your blog to blog directories, social bookmarking sites, social networking sites and etc.
Reciprocal links- two way links between two sites. A will point to B and B will point back to A. But, it is important to consider the page rank of the site that you wish to be linked from. Page Rank is the value that Google gives to a website based on the significance of a site which is determined by the number of incoming links to that site. If you have a link pointing from high page ranked website, the more quality is that link, helps your rank higher in search engine.
Three way links- Triangular link is where A point to B and C. B point to A and B . And so on. This is much better way than reciprocal links. Because, more the links to your site, higher search engine ranking.

9. Writing guest posts- I would say "Yes" to this strategy. Writing guest posts in famous blogs/websites that has same niche as yours for sure will increase visitors to your site. How? When you post an article on someone's blog, they will sure give you permission to leave a link to your site. You got a quality backlink from another website. And if the owner of that famous blog trusts you to post great articles in his/her site, he may be welcoming you to be a friend. Getting attention from great bloggers for sure will lead to a flood of traffic to your site. Imagine your blog been reviewed in his/her blog.

10. Using alt for images- This is another way to be listed in Google Images Search. Not just web search could bring traffic, but images search also can do it. Even double traffic than web search. When you upload any images to your blog, fill in the attribute alternate with best keyword to represent your post. It looks like this alt="best keyword". When googlebot crawling your site, it will certainly pickup this image to it's images search.

11. Table of contents page- When you are free, create a table of contents page. This is actually similar like showing your sitemap to visitors. And categorize you posts accordingly and create hyperlink the title of posts and link to the posts. Although this looks like Blogger Archives feature, it is certainly not same as it. This a method of increasing interlinks. When googlebot crawls your site, it will certainly go through these links. And you can encourage your visitors to read other posts also by creating a table of contents page thus increasing pageviews.

12. Contests and giveaways- Here is a great "real world" marketing technique applied here in blogging world. This is a way of maintaining and creating a strong relationship with readers who are visiting to your site without loosing them. World's Great websites/blogs like Mashable, ShoeMoney, Problogger and etc always do this. This doesn't mean that you should spend money or give "real" prizes to your visitors. You can also use different ways like giving them a permanent backlink from your site or a review about their site and more. Be creative.

13.Keyword in contents and post title- Many new bloggers do not realize about this. Even if they can post great articles in their blog or website but without any keywords in their content or post title, it is really a great loss/failure. Every keyword in your article is an asset. Keywords are the essentials to be indexed in Search Engines. Once you've created a post or article,don't publish it immediately. Visit keyword suggestion tools, try to get good keywords and try to include them in your article. Increase the frequency of repetition of the selected keywords in your article. This technique is also can used to increase CPC of google adsense ads shown in your post.

14. Blogger Templates. If you have knowledge of HTML, XHTML, CSS codes, Photoshop or any image editing services, just go on. Create blogger templates. Distribute it for free to your blog readers and submit it to famous blogger template resource sites like btemplates, allblogtools and more. When other people use your template, a permanent backlink pointing to your site will be displayed in their blog. Visitors to their site will also visit your site if they are interested with that theme. They will read your other posts too when visiting your blog. This is my personal secret technique( which I revealed today...not a secret anymore) which is giving me a lot of traffic everyday. 200% true.....

I hope this article and my the previous article helped you, even gave a little inspiration or knowledge on increasing traffic to your site. But, you should put a lot of effort , use your creativity and skills to increase traffic to your website.

Proven ways to get more traffic to your site and blog : Part 1

2010-02-15T18:09:00.000+08:00

Getting traffic to a site is more harder than creating or maintaining a site/blog. But, if we know the proper techniques and methods, getting constant traffic to your site/blog is made easy. Personally, I've tried a lot of ways before to improve traffic to my previous blog. But, not all were useful. But, later by experience I found really quick, effective and proven ways to increase Search Engine Ranking hence improving organic traffic to my blog. Here, I want to share some of them in this post.

1. Usage of Meta tags- Meta tags play a major role in improving search engine ranking. The most important meta tags are Description and keyword. If you use appropriate keywords which are really related with your blog content, I am sure that you will see a good flow of traffic to your blog. Here is an example of meta tags.

There are a lot of free meta tag generators in the web. Try googling it or visit scrubtheweb's tool.

2. Submit your site/blog to search engines. It is very important to submit your blog to popular search engines like Google, Yahoo!, and MSN. Submission to those three search engine is good enough as more than 90% of the organic traffic comes from these three major search engines. Submitting your site on hundreds of thousands search engines using free directory submission services wouldn’t help and is simply not worth. So, submit your site manually to Google, Yahoo! and MSN.

3. Google webmaster tool- When you submit your site or blog sitemap to Google webmaster tool, Google will crawl your site and automatically your posts will be indexed in Google Search.And with this great tool, you can easily identify which keyword is giving you more visitors,and how much backlink you have,etc.

4. Add your site/blog to directories. You can add your blog into Technorati, Blogcatalog, Globeofblogs, and etc. As they have have high page ranks, you will get not only visitors but also quality backlinks to your blog.

5. Interlink your posts. If you are bored or have no idea what to post, then this is the best thing to do in meantime. Analyze your previous posts, search for the terms which are related to other posts and hyperlink them. You can see, I used this technique in this post. By doing this, you can encourage your visitors to read other posts hence increasing your page views. Other than that, you can also increase Google Page Rank because internal links are also count apart from the backlinks from other blogs to your blog.

6. Social Networking sites like Facebook, Twitter, Orkut, and etc are popular nowadays. So, they are the best platforms to promote your website and blog for free. You can create a Facebook Page or twitter account for your blog like mine and update your readers/fans/followers about your latest posts.

7. Register at top social bookmarking sites like Stumble Upon, Digg, Reddit, Delicious, Newsvine, Yahoo Buzz, etc. Submit bookmarks of your best posts and latest posts to these sites. And you should choose the best category when submitting your posts so that people can find your post easily otherwise it will be "buried". In my experience, Stumble Upon brings a lot of traffic to my blog other than organic traffic every time I submit bookmarks of my posts at there.

I hope that these tips will be helpful to you to increase traffic to your site and blog. But, remember....always post original and unique content. Search engines and readers hate stolen content.

I will post second part of this article later. If you have any questions you can send an email via contact form or drop your comment down here. Happy trying....^_^ !!!

5 Cool Translation Widgets for your blog

2010-02-13T17:24:00.002+08:00

If your blog gets visitors from all over the world, then it is better to place a translation widget. So that, they will stay longer in your page and they may visit your blog again. Here is a collection 5 cool translation widgets for your blog.

1. Google Translation Widget

<div id="google_translate_element"></div><script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element'); } </script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

2. Yahoo Babelfish Widget

3. Microsoft Translator Widget

You can customize this widget as below at Microsoft Translator Page.

4. "Translate This" Button

on mouseover.......

<div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script> <script type="text/javascript"> TranslateThis(); </script>

5. Widget by AllBlogTools

Redirect Blogger/Blogspot blog to another blog or website

2010-02-13T10:40:00.000+08:00

Let say you are moving from an old blog to another blog/website. And you want to redirect the visitors from your old blog to the new one. Here it is a simple way to do it. Just add a meta tag and that's all.

Go to Edit HTML page and search for <head> tag and paste this code below right after the <head> tag.

"content" = number of seconds to wait before redirect and default setting is 0.

Save the template!

A great collection of Twitter Retweet Buttons for websites

2010-02-12T17:38:00.000+08:00

Usage of Retweet button in blogs/website by bloggers is quite famous nowadays. This is to encourage their blog readers to retweet their content/posts on Twitter. As Twitter is being world's second most famous social networking site after Facebook , no wonder if Bloggers all over the world are implementing Twitter based apps into their sites. Here is a collection of amazing Retweet buttons for your use.

	<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>
	&<script type="text/javascript"><br /> size = 'small';<br /> </script><br /> <script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>
	<script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
	<script type="text/javascript"><br /> var topsy_theme = "blue";<br /> var topsy_style = "big";<br /> </script><br /> <script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
	<script type="text/javascript"><br /> var topsy_theme = "monochrome";<br /> var topsy_style = "big";<br /> </script><br /> <script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
	<script type="text/javascript"><br /> var topsy_theme = "brick-red";<br /> var topsy_style = "big";<br /> </script><br /> <script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
	<script type="text/javascript"><br /> var topsy_theme = "brown";<br /> var topsy_style = "big";<br /> </script><br /> <script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
	<script type="text/javascript"><br /> var topsy_theme = "jade";<br /> var topsy_style = "big";<br /> </script><br /> <script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
	<script type="text/javascript"><br /> var topsy_theme = "light-green";<br /> var topsy_style = "big";<br /> </script><br /> <script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
	<script type="text/javascript"><br /> var topsy_theme = "sea-foam";<br /> var topsy_style = "big";<br /> </script><br /> <script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
	<script type="text/javascript"><br /> var topsy_theme = "hot-pink";<br /> var topsy_style = "big";<br /> </script><br /> <script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
	<script type="text/javascript"><br /> var topsy_theme = "mustard";<br /> var topsy_style = "big";<br /> </script><br /> <script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
	<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
	<script type="text/javascript"><br /> tweetmeme_style = 'compact';<br /> </script><br /> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
	<script type="text/javascript"><br /> tweetmeme_style = 'compact';<br /> </script><br /> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
	<script src='http://twittley.com/button/button.js'/></script>
	<script src="http://www.twittlink.com/tools/button_s.js" type="text/javascript"/></script>
	<script src="http://www.twittlink.com/tools/button_b.js" type="text/javascript"/></script>

12+ Top blog directories you should submit your blog to

2010-02-08T19:06:00.000+08:00

Submitting your blog to directories is very important for SEO. When you are adding your blog/URL to a directory, it means you are creating backlinks to your blog. There are other ways too to increase backlinks such as making reciprocal links with other blogs or websites and commenting on other blogs.

But the most easiest and effective way of getting free quality backlinks from websites with higher Google page rank is by submitting your blog to Blog Directories. I am sure that you will get more visitors and traffic to your site by doing this.

So, here is a list of top blog directories that you should submit your blog to.( with their Google PageRank ).

1. Technorati (PR 8)

2. Globeofblogs( PR 7)

3. Blogcatalog (PR 7)

4. Bloggernity ( PG 7)

5. Eatonweb( PG 6)

6. Blogged.com ( PG 6)

7. Bloggingfusion ( PG 6)

8. Blogsearchengine ( PG 6)

9. Best of the Weblog Search (PG 6)

10. Bloghub ( PG 6)

11.Bloggapedia ( PG 6)

12. Blogexplosion ( PG 5)

13. Ontoplist ( PG 5)

So, if you haven't submitted your blog or website to directories, start doing it now! :-)

Finally, static pages feature is now available for Blogger

2010-02-07T18:43:00.000+08:00

Finally, the feature that all the Bloggers were waiting for, "stand-alone pages" is now available in Blogger. This Blogger Pages enables us to publish static information on stand-alone pages linked from our blog. For example, we can use this "Pages" feature to create "About Me", "Contact Us", "Privacy Policy" and more and link it to our blog.

You can create it similar to when you write a post. Go to Posting > Edit Pages and click on "New page".

It will open a new window which looks similar like the New post page. You can create up to 10 pages. Once you've published it you can link to it using new Pages Widget.

Using this widget, you can decide which pages will be shown, where it will be shown( whether under header or in sidebar). This is an example how it will look like in your blog.

Happy trying!!!!

20 Beautiful Google Page Rank display buttons for your blog

2010-02-07T14:37:00.000+08:00

Now you can share Google Page Rank of your blog/site with your blog readers using these beautiful display buttons. Its very easy to install this simple widget. All you have to do is just choose one of the PageRank designs from the list below, grab the HTML code and paste it into your blog.

	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html" target="_blank"><img src="http://www.pagerankbar.com/pr.png" alt="Google Page Rank Checker" border="0" /></a>
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html" target="_blank"><img src="http://www.pagerankbar.com/prdisplay.png" alt="Display Google Page Rank" border="0" /></a>
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html" target="_blank"><img src="http://www.pagerankbar.com/prbutton.png" alt="Page Rank Checker Button" border="0" /></a>
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html" title="Free PageRank checking tool" target="_blank"><img src="http://www.free-pagerank-checker.com/pr.php?url=www.yoursite.com" border="0" alt="PageRank" /></a>
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html" target="_blank" title="Get your Google PageRank"><img src="http://www.urltrends.com/pagerankimg.php" border="0" height="25" width="100" alt="Get your Google PageRank"></a>
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html" target="_blank"><img src = "http://www.pagerank-button.com/pagerank5.php" alt="PR Checker" border="0" /></a>
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html" target="_blank"><img src = "http://www.pagerank-button.com/pagerank3.php" alt="PR Checker" border="0" /></a><br />
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html" target="_blank"><img src = "http://www.pagerank-button.com/pagerank6.php" alt="PR Checker" border="0" /></a><br />
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html"><img src="http://www.prbuttons.com/pagerank-display.php?a=getCode&s=vgsun" title="Free PageRank Display Code" border="0px" alt="PageRank" /></a>
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html"><img src="http://www.prbuttons.com/pagerank-display.php?a=getCode&s=Technical" title="Free PageRank Display Code" border="0px" alt="PageRank" /></a>
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html"><img src="http://www.prbuttons.com/pagerank-display.php?a=getCode&s=csblue" title="Free PageRank Display Code" border="0px" alt="PageRank" /></a>
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html"><img src="http://www.prbuttons.com/pagerank-display.php?a=getCode&s=Google" title="Free PageRank Display Code" border="0px" alt="PageRank" /></a>
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html"><img src="http://www.prbuttons.com/pagerank-display.php?a=getCode&s=wpblue" title="Free PageRank Display Code" border="0px" alt="PageRank" /></a>
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html"><img src="http://www.prbuttons.com/pagerank-display.php?a=getCode&s=gsblack" title="Free PageRank Display Code" border="0px" alt="PageRank" /></a>
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html" target="_blank"><img src="http://www.selfseo.com/pagerank.php?type=small" alt="Do it yourself SEO" border="0">
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html" target="_blank"><img src="http://www.selfseo.com/pagerank.php?type=pink" alt="Webmaster Tools" border="0">
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html" target="_blank"><img src="http://www.selfseo.com/pagerank.php?type=apple" alt="Search Engine Optimization Articles" border="0">
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html" target="_blank"><img src="http://www.selfseo.com/pagerank.php?type=large" alt="Search Engine Optimization Articles" border="0">
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html" target="_blank"><img src="http://pr.proxin.cn/pr.php?u=http://YourSite.Com&s=44" alt="Google PageRank Checker" border="0" /></a><br />
	<a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html" target="_blank"><img src="http://pr.proxin.cn/pr.php?u=http://YourSite.Com&s=42" alt="Google PageRank Checker" border="0" /></a>

Or visit GoingUp's website for more cool buttons....

Download Vector Art Blogger Theme now

2010-02-06T16:41:00.000+08:00

Vector Art is another great Blogger Theme that I created. It is a useful template for your personal blog.

This Vector Art blogger theme is best viewed using Mozilla Firefox and Google Chrome.

Features

2 columns
Right sidebar
Ads ready
Pink and yellow
Search box
Menu links

Screenshot

Live Demo | Download

Customization

1. Editing the navigation bar links

<ul class='topnav'>

<li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"' title='Comments RSS'>Comments RSS</a></li>
<li><a href='http://introblogger.blogspot.com/' title='Free Blogging Guide'>Blogger Tutorials</a></li>
<li><a href='http://introblogger.blogspot.com/' title='Free Blogging Guide'>Blogger Templates</a></li>

</ul>

2. Editing 125X125 ads slots

3. Editing the Adsense link unit ads.

Find for this code and paste you Adsense code there. But, before pasting it you have to convert the code into XHTML format using the Blogger Ad Code Converter.

Increase Google Adsense revenue by placing ads below post titles in Blogger

2010-02-02T18:43:00.000+08:00

Here is a simple trick to place Google Ads below your Blogger post titles. In fact, many bloggers (including me) are using this trick as this is the easiest way to increase Google Adsense revenue. Believe it or not, this does really works. Follow the steps below to implement this trick in your blog/website.

Note: These ads are only visible in post pages and not in home page.

1. Log into Blogger > Dashboard > Layout > Edit HTML

2. Check the box of "Expand Widget Templates"

3. You have to convert the Google Adsense code into XHTML format. Read my previous post if you don't know how to convert the code. And don't worry, this doesn't violate Google Adsense TOS.

4. Then, search for <data:post.body/> using CTRL+F.

5. Now, copy and paste the code shown below, before the <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'>
PASTE YOUR GOOGLE ADSENSE CONVERTED CODE HERE
</b:if>

Click Save Template and you're done.

Blogger Ad Code/Javascript code converter

2010-02-02T17:26:00.000+08:00

Have you ever tried to implement Adsense/Adbrite/Chitika or any Javascript codes in your Blogger templates? And sure it won't work. Usually you will come across some Blogger error messages if you tried to do so. So, there is a handy tool which enables you to convert Javascript codes and embed the those codes anywhere in your blogger template.

This simple online tool at eBlogTemplates will convert some characters such as > < and " to HTML entities. For example:

This is a piece of Google Adsense code.

<script type="text/javascript"><!--
google_ad_client = "pub-1234567890123456";
/* 468x60, created 3/12/09 */
google_ad_slot = "1234567890";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

into this code

&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
 google_ad_client = &quot;pub-1234567890123456&quot;;
 /* 468x60, created 3/12/09 */
 google_ad_slot = &quot;1234567890&quot;;
  google_ad_width = 468;
google_ad_height = 60;
 //--&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;

So, all you have to do is go to Blogger Ad Converter and put in the Javascript snippet code and click convert

Then copy the converted code and paste it in your blog template.

A better way to show off images using Lightbox V2 in Blogger

2010-01-31T13:26:00.005+08:00

Lightbox is a simple but great script used to show images in your website in such a brilliant way. First of all, I would like to give the credit to creator of this brilliant script, Lokesh Dhakar. You can create an image gallery/album to be shown to your blog readers using this great script. If you don't know what actually Lightbox is, look at the demo at the bottom of the page.

Setup

To install this script to your blog, go to Layout > Edit HTML and find this</head> tag. And now replace that tag with the codes below.

And click Save.

Okey, now we are going to add our images. First upload your photos in Blogger. Read this post on hosting your images in Blogger for free.

Single Image

To activate the Lightbox, add a rel="lightbox" attribute to any link tag. For example:

<a href="your_image_url_here" rel="lightbox"><img src="your_image _thumbnail_url_here">image #1</a>

Optional: Use the title attribute if you want to show a caption.
Demo:

Gallery/Album

If you want to show your images as an album/gallery, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

<a href="your_image_url_here_1" rel="lightbox[albumname]"><img src="your_image _thumbnail_url_here">image #1</a>
<a href="your_image_url_here_2" rel="lightbox[albumname]"><img src="your_image _thumbnail_url_here">image #2</a>
<a href="your_image_url_here_3" rel="lightbox[albumname]"><img src="your_image _thumbnail_url_here">image #3</a>

Demo:

There are no limits to the number of image sets per page or how many images are allowed in each set.

Lightbox | Another free blogger theme that I've created

2010-01-30T17:09:00.000+08:00

Hi guys, previously I've released Indexer blogger theme. And today I'm releasing another simple Blogger theme called Lightbox. Instructions on customizing the theme can be found at the bottom of this post.

Read also : How to install blogger templates? if you don't know to change the template.

Features

2 column
Fixed width
Right sidebar
White template
125 x 125 ads slots ready
Search Engine Optimized Title tags

Screenshot

Live Demo - Download this Template

Instructions

Editing the Navigation Bar

<ul class='topnav'>

<li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"' title='Comments RSS'>Comments RSS</a></li>
<li><a href='http://introblogger.blogspot.com/' title='Free Blogging Guide'>Blogger Tutorials</a></li>
<li><a href='http://introblogger.blogspot.com/' title='Free Blogging Guide'>Blogger Templates</a></li>

</ul>

Editing the Ads Slots

If you have any questions or problems feel free to ask me by dropping a comment below this post or contact me via Facebook page or my email ( thegreatrat [at] gmail [dot] com).

Indexer | Free Blogger Template

2010-01-26T18:50:00.000+08:00

Indexer is the first free blogger template that I have created. I hope you all like this template very much. Instructions on customizing this Indexer Blogger Theme can be found inside Readme.txt in the download file. If you have any questions or problems feel free to ask me by dropping a comment below this post or contact me via Facebook page or my email ( thegreatrat [at] gmail [dot] com).

Features

2 column
Fixed width
Right sidebar
Red and Black
125 x 125 ads slots ready
Search Engine Optimized Title tags

Screenshot

Live Demo - Download this Template

How to submit your Blogger Sitemap to Google Webmaster Tools?

2010-01-24T10:55:00.000+08:00

Submitting your blog's sitemap to Google Webmaster Tools helps to improve your site's visibility in Google Search and increase traffic to your site. To get started, all you should have is a Google account. Here, I'll explain how to add/submit your blogger sitemap to Google Webmaster Tools.

Follow these steps below:-

1. Sign into Google Webmasters using Blogger/Google Account.

2.Click on Add site and enter the URL of your blog that you would like to manage.

3. Once you've added your blog to Webmaster tools, you have to verify your site. To verify, copy the META tag provided by Google Webmasters.

4. Then, sign into Blogger > Layout > Edit HTML. Paste the Meta tag provided by Google Webmasters just after the <head> tag and save template.

5. Now, click on Verify button and your site will be verified if you've followed the steps above properly.

6. Once your site has been verified, go to Dashboard > Site Configuration > Sitemaps.

7. You can add either of these sitemaps to Google Webmaster Tools by clicking Submit a Sitemap button.

http://yourblogname.blogspot.com/atom.xml?redirect=false

http://yourblogname.blogspot.com//feeds/posts/default?=rss

8. And you've successfully submitted your blog's sitemap to be indexed in Google search. :-)

Easiest way to improve Google ranking of your blog

2010-01-20T06:01:00.000+08:00

Do you know that title tags are the most vital elements which are playing a major role to rank high in Google? Higher page rank= more organic traffic= get more money. I started to realize about this when I saw my blog's Google Page Rank reached two although for now it is just one and half months years old.

When web robots of the world's famous search engines such as Google crawl in your site, they will always read every word in your post title from left to right. For that reason, it is important to show your post title first and then followed by your blog/site name to make sure that your blog post get easily spotted during web searches. Here is a perfect example on how it should look like.

Usually default Blogger templates do not come with a Search Engine Optimized title tags. Normally, the blog title is shown first and then followed by the post title. So, here is a simple trick to turn it around (post title | blog title).

Make sure that you've saved a copy of your template before doing this trick. Go to Layout, then Edit HTML page. Now search for this code. You can find it below <head> tag.

Then replace that code with the code below.

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Save your template. Now, go to your blog and click any of the posts. You will see a difference in the page title.

So, you've successfully optimized your blog posts. Your page rank will not change in one or two days. Wait until your page re-indexed by Google. It will take some time. Meanwhile, keep posting original and unique content, and I am sure that organic traffic to your website will increase. Good luck.

Add Yahoo smileys/emoticons above Blogger comments form

2010-01-18T17:00:00.000+08:00

With this simple hack, your blog readers are now able to use Yahoo smileys/emoticons when they comment on any of your blog posts. I am sure that your readers will really get excited and enjoy using these Yahoo! smileys. This hack will only work if you've enabled embedded comment form feature for your blog.

This is how it will look above comments form.

Follow these steps below to install this feature to your blog's template. Always remember to save a copy of your template before start editing your template. At Layout > Edit HTML page, click on the "Expand Widgets Template" and find for thses codes below using CTRL+F.

And you will now see a set of codes as shown below.

Replace them with the codes shown in the box below.

Now move on with the next step. Find the tag </body>

and paste this script below before that tag.

And click save.

Although, the link in blue colour will work, due to the bandwidth problem I recommend you to upload the Javascript file to your own server. You can download the Smiley.js file here. Once you've uploaded the file, change the above url with your own link.

Please leave a comment if you have any problems/questions regarding the installation.

UPDATE: It won't work for author comments but only for visitor comments. However, you can log out and post your comment as a visitor if you want smileys in your comments.

6 Major blogging mistakes that new bloggers should avoid

2010-01-16T20:35:00.000+08:00

In this post, I'm going to list out some major mistakes that many new bloggers should stay away from. It is important to refrain from making these mistakes for you to build a better blog. I admit openly that I made some of these when I was new to "blogging". It's always good for you to learn from other people mistake as to save all the pain and trouble for not having to go through it.

1. Giving up too early- Patience is the most important thing that every blogger should have. Do you believe it or not, about 80% of bloggers quit blogging because of their impatience. Give some time for your blog to take off.

2. Too many widgets- It is true that your page looks more attractive with widgets. But, too many widgets will slow down your page loading. Your readers who are browsing web with slower connection will get irritated because it will take a longer time to load your page. It is better to remove unimportant widgets.

3. Running many ads- Yes, I know many bloggers want to make money with their blog (me too). It is true that placing the ads is the best method to make money. However, if your blog has too many advertisements, it will look untidy thus not so professional. The first thing that your readers will think is that you are trying to make money rather than providing them something informative. And that may be their final visit to your blog.

4. Not consistent- This is the most serious matter of all. Many bloggers do not blog on regular basis. If you are a new blogger and just blog once a week, then don't hope that you'll get visitors/readers to your blog. Readers usually don't like to read old posts. So, how often should you blog? If you want to build a better blog, then you should at least 3 or 4 posts per week.

5. It's a drug- Blogging is addictive. This is true in many bloggers life. We will start to ignore our health, family, friends and even (homeworks/assignments) if you're a student :-).You are practically glued to with your blogs and hard to live a normal life. You should remember, blogging is something we can do for a long time. It is nothing wrong to have such a great passion towards blogging. However, make sure that your daily routines are not affected because of blogging.

6. Stop arguing with your readers. Every blogger hopes that will get constructing-comments from readers. But, it is normal for some readers to leave "extraordinary" comments after reading our blog posts. I hope that you understand what does "extraordinary" really means in this context. Remember, don't get into the trouble by replying those comments harshly and creating a bad reputation about yourself to other readers.

Easiest way to create a horizontal navigation bar for your blog

2010-01-16T12:37:00.000+08:00

Here is a simple way to make a navigation bar for you blog without any blogger hacks. No codes need to be added to your blogger template. You can create a simple navigation bar just by clicking "Add a gadget" function.

Sign into Blogger > Layout > Page Element. Below header, click on "Add a gadget" option and add "HTML/Javascript".

Now paste the copy and paste code below into the "HTML/Javascript" box.

<a href= "http://yourname.blogspot.com/pagename">label | </a>

And replace the http://yourname.blogspot.com/pagename with the URL of the webpage/post that you want to be linked and replace the word label with your desired name/label. You can paste more codes as shown in image below and edit the codes.

Save the gadget box. This is how the navigation bar will look like below your blog's header.

Cool image opacity/transparency effect on mouseover

2010-01-15T22:23:00.000+08:00

In this post, I will show how to create an opacity/transparency effect for an image on mouseover. Rather than using an image without any effects, this would be a better option to show your images in your site especially if you use images as hyperlinks.

This is how the normal HTML code for image below will look like:

This is how it will look like if you use opacity/transparency effect for the image.

and here is the code for the image above.

This is an example of image which is hyperlinked.

Conclusion:-

Code for image without hyperlink

Code for image with hyperlink

How to add most popular/commented posts widget in Blogger?

2010-01-14T19:32:00.000+08:00

Do you want to show the most popular blog posts to your readers? Here is a widget which can be placed anywhere in your blog. This "Most popular posts" widgets is also known as "Most Commented Post" widget.

Log into Blogger > Layout > Page Elements. Then click "Add a gadget" and select "HTML/Javascript". Now, all you have to do is to copy and paste these codes below.

How to customize it?

Replace the text highlighted with orange colour with your blog's URL without http://.

The default number of posts to be shown is 10. You can set the number of posts that you want to show by replacing the number highlighted with green colour.

The default widget will show title of the post and without number of comments. If you want show number of comments, replace the code highlighted with blue colour with codes below.

1a1c6e4e6d4f148e3650fda46910e15f will display it with no count.
a7d3195528df5e96181a3d2712266226 will display with a count (23)
1cf38ae68efbe859c4ba1ee239cec099 will display like this (23 comments)

And click "Save".

How to add Social Bookmarking buttons/icons below every blogger post?

2010-01-12T18:55:00.000+08:00

By adding a list of social bookmarking icons to your blog posts, you can encourage your readers to promote your blog posts to the Social bookmarking sites such as Technorati, Stumble Upon. Delicious, Digg, and more. Adding your posts to these sites definitely will bring more traffic to your site.

To add the list of social bookmarking icons, log into Blogger > Layout > Edit HTML. Before starting this hack, please remember to Save a copy of your current template. Then, check the "Expand Widget Templates" box.

Now, search for this small piece of code using CTRL+F.

<data:post.body/>

Now, paste the code below immediately after the code stated above.

<b:if cond='data:blog.pageType == "item"'>
<div align='left'>
<script class='share-it' src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
<span class='post-icons'>
<a expr:href='"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Stumble This'><img alt='Stumble This' border='0' src='http://2.bp.blogspot.com/_vLeiVavkV_M/SnleiulEMVI/AAAAAAAABeU/kO09nNTlQeo/s200/stumbleupon.png'/></a>
<a expr:href='"http://www.technorati.com/faves?add=" + data:post.url' target='_blank' title='Fav This With Technorati'><img alt='Fav This With Technorati' border='0' src='http://1.bp.blogspot.com/_vLeiVavkV_M/SnlenauwzjI/AAAAAAAABec/btszO5xBOgg/s200/technorati.png'/></a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add To Del.icio.us'><img alt='Add To Del.icio.us' border='0' src='http://2.bp.blogspot.com/_vLeiVavkV_M/Snld35mPSDI/AAAAAAAABds/ccrOpOmP9Zk/s200/delicious.png'/></a>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Digg This'><img alt='Digg This' border='0' src='http://3.bp.blogspot.com/_vLeiVavkV_M/Snld_x-wXoI/AAAAAAAABd0/cTsGU_Y-zQ8/s200/digg.png'/></a>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add To Reddit'><img alt='Add To Reddit' border='0' src='http://3.bp.blogspot.com/_vLeiVavkV_M/SnleX1tMMtI/AAAAAAAABeM/gQSYdrmSc3k/s200/reddit.png'/></a>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add To Facebook'><img alt='Add To Facebook' border='0' src='http://3.bp.blogspot.com/_vLeiVavkV_M/SnleIlLdGwI/AAAAAAAABd8/RfHnWIGGMEY/s200/facebook.png'/></a>
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add To Yahoo'><img alt='Add To Yahoo' border='0' src='http://1.bp.blogspot.com/_vLeiVavkV_M/SnlexsGX2QI/AAAAAAAABes/ai6zvzZKCgw/s200/yahoo.png'/></a>
</span>
</div>
</b:if>

These icons are just visible below every posts and not in home page. The icons will look like the list of social bookmarking icons that I'm currently using for this blog below every posts.

Show your blog's RSS Feed in Facebook profile/ fans page

2010-01-09T13:19:00.000+08:00

Yesterday, I was chatting with a friend of mine in Facebook. A question arose from him "Is there any way to connect RSS feed to our Facebook profile?". Yes, sure we can. By using a Facebook app called "Social RSS", it is possible to show your blog's feed in your Facebook Profile/ Fans page.

First, log into Facebook. Go to "Social RSS" application page. There, click on the "Go to application" button below the application picture. Click on Allow button, if a page asking for you permission to allow the application appears.

Under the "Feed Settings" tab, enter blog's title, feed URL as shown in image below. After done click on the "Update" button.

Feed URL: http://yourblogname.blogspot.com/feeds/posts/default

Now click on the "Display Options" tab and set how your feed look like. For example, my settings look like this.

Items: 5
Description: No
Date : No
Share : No

But, you can adjust the settings as you wish. But, don't forget to click "Update" button. Now, go to "Application Settings" option under "Settings" menu. Scroll down until you see Social RSS application. Click on "Edit Settings" option near Social RSS application. An "Edit Social RSS Settings" pop-up window will appear. Select "Add" option for Box and Tab.

Now go to your Profile page. Click on "Boxes" tab. Click on the pencil icon on the Social RSS box and select "Move to Wall Tab" option.

And now it will open your Profile page with your blog's RSS Feed in sidebar.

And now you're done. Don't hesistate to ask your questions regarding this via comments.

Update 09/01/2010: To add this application in you fan's page, go to your page and click on the "Edit Page" option below the profile picture. When "Edit Page" opens, scroll down until you see "More applications" option and click "browse more".

It will open application page. Type "Social RSS" in search box and search.

Clicking on "Social RSS" will open application page. Select "Add to my page" option.

Now, select the page you want to add it. Enter the feed URL, title and edit display options. Go back to your page.There, click "Edit Page" again. Search for Social RSS in applications list and click on "Application Settings" below the Social RSS application. Click "Add" option next to Tab and Box. And now follow the previous steps stated above to show the box in your sidebar.

Blogger embedded comments box CAPTCHA verification not visible: Solution

2010-01-08T20:16:00.000+08:00

"I can't post the comment on your blog post. The comment verification code(CAPTCHA) form is not displayed fully and looks like bottom of the box has been cut off". Did you ever received such messages from your blog readers? So, here is a quick trick to solve the problem.

First of all, don't forget to backup your template. Next, go to Layouts> Edit HTML and select "Expand Widgets Templates". Now, search for the following code using CTRL+F.

id='comment-form'

And you will see codes stated below.

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize
blogger-comment-from-post' frameborder='0' height='275' id='comment-editor'
name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>',
'<data:post.communityId/>');
</script>
</div>
</b:includable>

All you have to do is just change the height='275' to height='410'. And this is how it will looks like after editing the code.

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize
blogger-comment-from-post' frameborder='0' height='410' id='comment-editor'
name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>',
'<data:post.communityId/>');
</script>
</div>
</b:includable>

Save the template when you are done. There is also an alternative way to solve this problem without having to change the height of box. It's by enabling scroll in comment box.

All you have to do is just adding this this small code below beside height='275' .

scrolling="auto"

This is how it will look like after adding the code stated above.

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize
blogger-comment-from-post' frameborder='0' height="275" scrolling="auto"
id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>',
'<data:post.communityId/>');
</script>
</div>
</b:includable>

Best of luck.

Socialize your feed with Twitter

2010-01-03T13:45:00.000+08:00

Twitter is one of the well known social networking and micro-blogging site of the world. According to Alexa's Top 500 Global Sites rankings, Twitter is now at rank #14. If you are using Feedburner to syndicate your feed, you can easily connect your feed to Twitter. FeedBurner will automatically post updates from your feed to your Twitter account.

If you want to connect your feed to your Twitter account, follow these simple steps below.

First, log into Feedburner and select your blog's feed. Then, click on the "Publicize" tab and select "Socialize" option on the sidebar.

Once the "Socialize" page loaded, click on "Add Twitter Account" button and follow the further instructions to connect Feedburner with your Twitter account.

After your Twitter account added, configure how the updates should look like in your Twitter page and number of items should be shown in every updates under "Formatting Options" and "Item Selection".

Finally, don't forget to click "Activate" button on the Socialize page. This is how my feed update looks like in my Twitter Page.

Follow me on Twitter :-)

Show your recents posts in marquee(scrolling text)

2010-01-03T10:32:00.004+08:00

Now you can display your recent posts in marquee. I am sure that it is actually a better way to attract your readers to read your other posts. Here is a simple tutorial on how to show your recent posts in marquee.

Log into Blogger. On the Dashboard, click on the "Layout" option. This will bring you to "Page Elements" page. Now, click on "Add a Gadget" option, then add a "HTML/Javascript". Paste this code below in the content box of the HTML/Javascript.

Replace YOURNAME in the code above with your blog's name and Save. You can view a sample marquee in my test blog.

Protect your posts with MyFreeCopyright

2009-12-30T15:40:00.000+08:00

The biggest problem among the bloggers nowadays is Content Theft. Content theft occurs all the time in web.Who knows? At the moment you are reading this post, there maybe somebody trying to steal your contents from you page. So, how to protect your creations from these content thieves?

MyFreeCopyright.com may be the best solution as it provides a free and professional service for the bloggers to protect their contents.

This image below shows how Myfreecopyright protects your contents.

MyFreeCopyright.com captures your original post's or content's fingerprint, then it stores the digital fingerprint in it's database and sends a copy of the Digital fingerprint of your content to you in an email. The email contains the verified date; this verifies the digital creation, and your email address verifies it belongs to you.-Source

They provide us a registration badge which can be placed in our blog or websites. This badge will prove public that your page is protected by MyFreeCopyright and give the content thieves an earlier warning. I'm having it too in footer section of my blog .The badge will look like this:

So, visit Myfreecopyrights.com now to start protecting your creations.

How to hide blogs in blogger profile?

2009-12-29T11:12:00.000+08:00

It is common for us to have more than one blog in Blogger. All those blogs you've created will be shown in your Blogger profile. So, how to "hide" the blogs that you don't want people to see? How to reduce the blogs shown in your profile without deleting them?

Here it is the way which helps you to "hide" unwanted blogs from your profile.

1. Log into Blogger. Now, click on the "Edit Profile" option on the left side of the "Dashboard" page. This will bring you to "Edit User Profile" page.

2. Under the 'Privacy" section, click on the "Select blogs to display" option. It will open a " Set Displayed Blogs" page. There, you uncheck the blogs that you want to "hide". And click "Save Settings".

Although you can hide those blogs in your profile, they are still accessible by other people who are referring from Search Engines although the chances of it is very low. Follow the next method if you want those blogs not accessible by other people.

Make "hidden" blogs not accessible by people

1. Log into Blogger. In the "Dashboard" page, click on the "Settings" option and this will bring you to a "Settings" page. Then click on "Permissions" option on the tab.

2. Under "Blog Readers" Section, select "Only Blog Authors" option. Then, a new window pops up. Click "Allow Authors Only" to confirm it.

Add Recent Posts widget in your blog

2009-12-28T12:47:00.000+08:00

One of the way to encourage your visitors/readers to read your posts is by showing off a recent posts widget in your blog. Archives widgets is actually available in Blogger to show your recent and previous posts. But, many bloggers are getting bored with it. In this post, I'll outline some alternative methods to display your recent posts much better way.

1. Use Blogger Feed Widget

Log into Blogger. Click on "Layouts" option on the Dashboard and then to "Page Elements" page. There, click on the "Add a Gadget" option. Once a new window prompting you to add the element that you want appear, scroll down and click on "Feed" option.

Now, there will be a window "Configure Feed" asking you to enter the feed URL. Replace the "yourblogname" text below with your blog's name and type it in the box. Then, click continue.

http://yourblogname.blogspot.com/feeds/posts/default

Give a title for your feed as "Recent Posts" and click on "Save" button. Your Recent Post widget is now ready. Drag the widget to the position you want in "Page Elements" page. But, the number of posts that will be visible is limited to 5. If you want to show more than 5 posts, I recommend you to use the next widget.

2. Use Feedburner's Buzzboost

Here is another brilliant way to display your recent posts. In fact, I'm using it for my Recent Posts in my sidebar. All you have to at first is burning your feed in Feedburner. You can log into it by using your Google Account. Then enter URL of your blog's feed in the space shown exactly like what you entered in the widget above.Replace the "yourname" with your blog's name.

http://yourname.blogspot.com/feeds/posts/default

Clicking the "Next" button will bring you to a new page. Now, it's the time for you to give your feed its title and a Feedburner address. Follow the rest of instructions given by Feedburner before activating your feed.

Now, click on the "Publicize" tab on the navigation bar, then find the Buzzboost link in the sidebar of the page.

On the Buzzboost page, you can configure how the feed should looks like in "Recent Posts" widget. Those options are guided and quite self-explanatory, so you wouldn't feel confused to setup the Buzzboost. After, configuring BuzzBoost, click on the "Activate" button at the bottom of the page. BuzzBoost will provide you a snippet of JavaScript that you can paste into your page template.

Copy the code and go back to your Blogger>Layout>Page Elements. Click on "Add A Gadget" button>Select "HTML/Javascript". Give a title to your widget, paste the code inside the contents box, click Save. And done.

3. Recent Post widget by Widgetsforfree

This widget is totally differs from the two widgets above because it has special features such as

Thumbnails
Post summaries
Displays number of comments
"read more" link
Displays post date

You can visit Widgetsforfree for the further information and installation.

Free image hosting with unlimited bandwidth in Blogger

2009-12-26T18:38:00.000+08:00

Many bloggers are struggling to find a reliable and free image hosting with unlimited bandwidth. Now, there is a trick which enables you to host images in Blogger itself. Here is the trick.

Step 1: Log into Blogger

Step 2: Click on New Post button on dashboard

Step 3: Upload a picture from your computer/URL.

Step 4: Then, right-click on the uploaded image and select Copy Link Location option. This is an example URL of the image above.

http://1.bp.blogspot.com/_b8IA1ajBJG8/SzXnHnuTzsI/AAAAAAAAAUU/49u4fRjyrhM/s1600-h/free+image+hosting.png

Step 5: All you have to do is just remove the "-h" from the URL. And here it is the Real Image URL of your uploaded image.

http://1.bp.blogspot.com/_b8IA1ajBJG8/SzXnHnuTzsI/AAAAAAAAAUU/49u4fRjyrhM/s1600/free+image+hosting.png

You can try the URL in new window to test whether it works or not. But, it really works and we can do whatever we want. Remember, don't push the publish button.You can either delete the post or just leave it as a draft.

I hope that this trick will be useful to many webmasters/bloggers who are searching for an unlimited bandwidth image hosting service.

How to remove or hide Blogger navbar?

2009-12-26T11:04:00.000+08:00

If you are using Default Blogger Templates, then you may be seen Blogger Navigation Bar on the top of your page. But, nowadays new blogger templates usually come without the navigation bar. So, this tutorial is just for those who are using default blogger templates. Actually, many bloggers( including me) worried whether it is legal to remove navbar or not because it may be violating any Google policies or Blogger's Terms of Service.

But, it is said to be OK to remove the navbar. Read about it here at Labnol's Blog. So, here are the steps to hide the Blogger navigation bar.

Step 1: Log into Blogger

Step 2: Select Layout option on your dashboard. It will bring you to Page Elements page.

Step 3: Now click on Edit HTML option and you will see your blog's template code there.

Step 4: Press CTRL+F keys to find the code

]]></b:skin>

Step 5: Now replace that code with

#navbar-iframe { display: none !important; }
]]></b:skin>

Select Save Template. Now, the blogger navbar will not appear again in your blog. Remember, you are just hiding the navbar by putting that CSS code. If you want it to be visible again, all you have to do is just replacing the code that you've added just now with the previous code.

How to add a widget?

2009-12-25T19:55:00.000+08:00

Blogger platform enables us to add widgets into our blog, thus making our site more attractive, interactive and reader-friendly. Here, I've prepared a list of useful resources where you can get those widgets. Actually, Blogger has it's own list of gadgets but limited and sometimes we will not get widget that we are searching for. So most of the time, we have to depend on third party widgets to make our blog, a better blog.

Widgetsforfree ( is a blog that I usually visit )
Bloggerplugins
Bloggerbuster
Mashable
Bloggerstop

Following is a step-by-step guide on adding a third party widget in our blog.

Step 1: Log into your Blogger account and select the blog that you want to add the widget.

Step 2: Click on Layouts option and it will automatically open Page Elements page. There you will see "Add a Gadget" option

Step 3: Select "Add a Gadget" option and then HTML/Javascript option

Step 4: It will open a Configure HTML/Javascript window, prompting you to give a title for your widget and it's code.

Step 5: Paste the code of your widget into the content space. Click on "Save" button. And that's all. Your blog is installed with a widget.

You can change the position of the widget you added in Page Elements page by dragging it to the place that you want such as below or above header, in sidebar or in footer. Good luck.

What is the difference between widgets and gadgets?

2009-12-25T15:25:00.000+08:00

When I starting blogging, I was totally confused with Gadgets and Widgets. I was wondering what is the difference between gadgets and widgets? I started "Google-ing" it to find out the truth. Several sites that I visited were using the word "widgets" and some other sites used "gadgets". Making my confusion worse.

Finally, I found the best answer for my question and here it is.

A widget is a piece of reusable code that you can plug into virtually any website. A gadget acts just like a widget, often fulfilling the same purpose, but it is proprietary. It only works on a certain website or a specific set of websites.
~~For example, Google Gadgets can look and act like widgets. But they only work on Google pages.~~
A widget, on the other hand, works on any page that lets you add an HTML block. You can put them on your blog, or your personalized start page, or your personal website.-Source

You can see my sidebar contains Recent Posts, Recent Comments, Followers and Tags Cloud. Those are examples of widgets we are talking about. I am using code from FeedBurner for the recent posts, and recent comments widgets.

So, here comes my definition for "widgets". Widgets are third party elements or codes that are reusable, easily-organizable and make a page more interesting.

Update: Google gadgets can work not only in Google pages but everywhere. Read about it here!

45 (most) elegant and beautiful blogger templates

2009-12-23T16:22:00.000+08:00

There are millions of blogger templates out there, but it is really hard to search for the best and beautiful blogger templates. So, I have managed to make a collection of best blogger templates to save the time for those who want to change their blog's templates and looking for outrageous blogger templates.

Read also : How to install blogger templates? if you don't know to change the template.

1. Blue Vector
Demo | Download

2. Burnt out bright

Demo | Download

3.Earthling Two
Demo | Download

4. Republic
Demo | Download

5. Prodreams
Demo | Download

6. Masunurin
Demo | Download

7. Techie Blogger
Demo | Download

8. Dreamy
Demo | Download

9. Fresh Brown
Demo | Download

10. The Latest
Demo | Download

11. Community
Demo | Download

12. Girls Fantasy Land
Demo | Download

13. Bcute
Demo | Download

14. My Press
Demo | Download

15. Happy Shopping
Demo | Download

16. Pork and Beans
Demo | Download

17. Imprezz
Demo | Download

18. Exploitable
Demo | Download

19. Cupcake Cookie
Demo | Download

20. Cypher
Demo | Download

21.Girly Nature
Demo | Download

22. I can Watch Movies
Demo | Download

23. Paper Wall
Demo | Download

24. Typography
Demo | Download

25. Dark Flower
Demo | Download

26. Vector Flower
Demo | Download

27. Ormeggiare
Demo | Download

29. Delicious food
Demo | Download

30. Facebook 2.0
Demo | Download

31. Chucky
Demo | Download

32. Mainam
Demo | Download

33. Creative by Nature
Demo | Download

34. Desk Space
Demo | Download

35. 2Plus
Demo | Download

36. iNove
Demo | Download

37. Funky Chicks
Demo | Download

38. Ink Stain
Demo | Download

39. Kids Style
Demo | Download

40. News Magazine Wordpress
Demo | Download

41. Studiopress Magazine
Demo | Download

42. Color-o-Ring
Demo | Download

43. Alpha
Demo | Download

44. Hello Wiki
Demo | Download

45. Seabreeze
Demo | Download

How to install XML blogger templates?

2009-12-20T17:16:00.000+08:00

Here is a simple tutorial on how to install XML blogger templates in your blog without losing your widgets.

1. Sign in to Blogger dashboard and click on the layout.

2. Here is the most important step. After uploading any new Blogger template, all of the previous widgets like your google adsense ads, text, profile, polls, and etc will disappear. To avoid this, you have to go to Page Elements and then click on Edit on all the widgets and copy the codes into notepad,etc and save it.

3. Next, click on the Edit HTML option.

4. Click on the Download Full Template to download the current template. As a backup.

5. Now, click on the Upload button to upload your template. Remember, Blogger only supports XML format templates.

6. Now, a message appear saying that your widgets are about to be deleted.Click on the Confirm & Save (no problem doing this because we already copied the widget codes in Step 3).

Now you successfully installed the template. So, click on the 'Page elements' page now and add the codes that you copied in step 2 using the 'Add a Page Element' option.

2009-12-16T17:10:00.001+08:00

21 essential blogging tools

2009-12-16T11:12:00.000+08:00

So, you have created a blog for you on Blogger. Blogger is simple to use and has many features in it that take care many things for you. This is my suggestion of 21 must have essential tools for your blog.

1. Feedburner- custom RSS feeds and management tools

2. Google analytics- generates detailed statistics about the visitors to a website

3. Sitemeter- free tracker which gives you realtime site traffic statistics

4. Google webmasters- no-charge web service by Google for webmasters to track

5. Feedblitz- allows your blog visitors to subscribe by email to your new posts.

6. Windows Live Writer- add photos and videos, format everything just so, and publish to most blogging services

7. Flickr- best online photo management and sharing application

8. Paint.NET – free image and photo editing software for computers

9. GIMP-GNU Image Manipulation Program. It’s totally free.

10. My Blog Log- Tracks outgoing links to let you know where your traffic is going.

11. Ping-o-matic- updates blogging services that you’ve updated your blog

12. Creative Commons- it provides a flexible range of protections and freedoms for authors and artists

13. Pingoat- it lets blogging services to know that you’ve updated your blog and increases traffic to your blog

14. Blip.tv – free video hosting for videobloggers, podcasters

15. Vimeo- upload your videos in Vimeo and embed those videos in your blog posts.

16. Favicon.cc- a free online tool to create or download favicon.ico icons

17. Disqus- better commenting system for your blog.

18. Imageshack.us- best choice for free image hosting.

19. Technorati- it allows you to claim your blog in this huge blogosphere and increases traffic to your blog.

20. Del.icio.us- famous social bookmarking site

21. Haloscan- A free commenting and trackback system for web logs and websites.

*Note: Please let me know if you think I missed other useful blogging tools! I will include those in the next post.