Advertisement

Blogger widgets play really a very important role in giving a crispy professional look to your blog; such widgets are also helpful in increasing site’s visits and readers.

There are thousands of useful blogger-widgets/scripts available which can increase the attraction of your blog.
Some are just for fun, some are handy little gadgets, sometimes to show statistics of your blog, to show readers of your site, some are just for chat and communication, News widgets, Picture slideshow widgets… and many more like that. There are thousand types of widgets to choose from.

But here I’m to tell you some Most Basic and Must-have widgets for your blogspot blog, which you are supposed to install as soon as you create your blog.

Here I’m sharing some of the most popular and commonly used widgets used by almost all professional bloggers.

Note: Topics were getting messy as I have to put them all in one post. So I’ve made each topic expandable. So, you can expand/collapse the topics by clicking on the headings.

---

Must Have Widgets

1. Recent Posts

This widget, no doubt is the most important of all, as it shows all your recent posts of your blog.

If you usually write long articles to your blog and you like to show fewer of them on the home page. In that case your past posts hide away. Then this widget helps you there, as the reader can see your previous posts through this widget. Thus “Recent Post” widget plays an important role in increasing the interest of the readers.

To Install this widget you must first install RSS feeds to your blog.(What is RSS feed?)
Setting up an RSS feed on your blog makes it easy for your readers to not just read your blog through there favorite RSS reader but also know when you publish new content.

I prefer Feed Burner for RSS feeds.
——-Click here to learn how to add RSS Feeds to your blog———–

After installing RSS feed

[+/-] Click to see the Installation instructions:

1. Go to ‘Layout” of your blog.

If you have installed a third-party theme to your blog, then your layout may be divided into proper sections, and it is possible that you may find “Recent Post” widget already installed.

If it is there already then you just have to click “edit” link on the gadget. Then ignore next two steps & jump to step #4.

2. Choose the section where you want to show “Recent Post” widget and then click “Add a Gadget” link.

3. From the pop up window that opens, scroll down in the middle and click “Feeds”.

Another window will pop-up.

4. In the “Feed URL” text box, copy/paste this link:

http://www.YOUR-BLOG-NAME.blogspot.com/feeds/posts/default

….replacing “YOUR-BLOG-NAME” with your actual blog’s address. If you own a domain then remove ” .blogspot” too and replace it with your domain’s extension.

5. Give any “Title” you want to this widget, like “Recent Posts”.

6. Choose Number of Posts to show from the drop-down box. (You can select max. 5 posts to show).

7. “Item date” & “Item sources” are optional. You can select them to show Date of the post with author’s name.

8. Click Save.

After few moments, it’ll show you the list of recent posts of your blog on the same pop-up screen. If it doesn’t then re-check the Feed URL you inserted for errors.
If your blog is newly created and you haven’t posted anything yet, then this can be the second reason to not showing any post.

If you are using “Expandable Post Summaries” in your site, and your home page shows minimum 5 posts, then I recommend not to use this “Recent Post” widget, there will be no use of this widget as it’ll be waste of space on your home page.

---

2. Popular Posts

Unlike the Recent Post widget, this widget shows your most popular posts in terms of:
I. Number of Comments

If you install this widget, then the posts (max. 5) with the most number of comments by readers will be shown by this widget.


[+/-] Click to see the Installation Instructions:

1. Go to ‘Layout” of your blog.
2. Choose the section where you want to show “Popular Post” widget and then Click “Add a Gadget” link.
3. From the pop up window that opens, scroll down in the middle and click “HTML/JavaScript”.

Another window will pop-up.

4. Give any title, like “Popular Post” or “Most Commented Posts”.

5. In the content Area, Copy/Paste this code below:


<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i )
{
var href = "'" obj.value.items[i].link "'";
var item = "<li>" "<a href=" href ">" obj.value.items[i].title "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="https://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=28a6afad7c6ba1288c1b738277e42385&url=http%3A%2F%2FYOUR_BLOG_ADDRESS_WITHOUT_http://&num=10" type="text/javascript"></script>

………..replace YOUR_BLOG_ADDRESS_WITHOUT_http:// with your blog’s actual complete address.

6. Click Save and Preview.
7. If it looks good, Click “Save”.

II. Number of Hits/visits

This widget will also show all popular posts but on the basis of most number of hits on that topics.


[+/-] Click to see the Installation Instructions:

To install this widget, you first have to visit PostRank.com
1. Then Insert address of your blog/site in the text box on top of the page
2. Click Analyze.

If you are submitting your site to postrank first time, then it’ll tell you that “We haven’t seen your site before”.
Now you leave your email address there, so that they can email you as soon as they index your site’s feed.
It usually takes a day to their email to arrive in your inbox.

3. Click the link given in the email to see your site’s feed indexed by postrank.

4. Now after checking your feed, Come back here at this page and click this link:

http://www.postrank.com/publishers/customize

Follow the steps given in that page, customize and create your “Top Post” widget.
You can use “Quick Install” to install the widget you’ve customized, directly to your blog (step 3 given on that page) .

Or if you choose to manually install the widget, you have to copy the code given at bottom of that page and follow these steps to manually install the widget:

1. Go to ‘Layout” of your blog.
2. Choose the section where you want to show “Popular Post” widget and then Click “Add a Gadget” link.
3. From the pop up window that opens, scroll down in the middle and click “HTML/JavaScript”.
Another window will pop-up.

4. Leave the title section blank, as “Top Post” is already written on the widget by Postrank.

5. In the content Area, Paste the code you received from postrank.com feeds.
6. Click Save and then Preview your blog.
7. If everything went good, Click “Save”.

---

3. Related Posts

This widgets really helps you in keeping the visitor’s interest in your blog. Reader finds this widgets as soon as he reaches the end of an article. Related posts widgets shows all the posts related to the article currently being read. It actually fetches and shows all other posts with the same label with which current post has been labeled. [+/-] Click to see the Installation Instructions: 1. Go to ‘Layout” of your blog, and then “Edit HTML” tab.
Next step should always be backing up your blogger template, so than if anything goes wrong, you’ll have your backup to restore to original condition. So, click “Download Full Template” link to first download backup!

2. Check “Expand Widget Templates” checkbox.
Now find (Ctrl+F) this tag: </head>

Now, just BEFORE this tag paste all the code below:

<!--Related Posts Scripts and Styles Start--> <style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://bloggerhosting.appspot.com/serve/zainali88.googlepages.com/Related_posts_hack.js' type='text/javascript'/>

After pasting this…Now, search for this line of code: <data:post.body/>

And AFTER this, paste the code below:

<!--Related posts--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <font face='Arial' size='3'><b>Related Articles: </b></font><font color='#ffffff'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; data:label.name &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if> <!--Related posts ends-->

.. you can customize the heading, by changing the text in red.

3. “Preview” the template first, DON’T save at this point. If Preview window shows your blog fine and with the “Related Posts” widget after every post, then it means, everything went perfect. Otherwise it’ll show an error, and prompt you to remove it first before saving. Common mistakes we do is incomplete Copying/Pasting the code. Make sure you copied everything carefully and pasted it in right places, defined above.
4. If preview shows everything fine, then you can SAVE the template 🙂

---

4. Recent Comments

This widget helps you to show most recent comments (max. 5) given by visitors to any topic of your blog. To install this widget, your blog must have RSS feeds installed. If you are already using “Recent Post Widget” then you must have RSS feeds associated. So there is no need to register for RSS feeds again. [+/-] Click to see the Installation Instructions:

1. Go to ‘Layout” of your blog. If you have installed a third-party theme to your blog, then your layout may be divided into proper sections, and it is possible that you may find “Recent Comments” widget already installed. If it is there already then you just have to click “edit” link on the gadget. Then ignore next two steps & jump to step #4.

2. Choose the section where you want to show “Recent Comments” widget and then click “Add a Gadget” link.

3. From the pop up window that opens, scroll down in the middle and click “Feeds”. Another window will pop-up.

4. In the “Feed URL” text box, copy/paste this link: http://www.YOUR-BLOG-NAME.blogspot.com/feeds/comments/default ….replacing “YOUR-BLOG-NAME” with your actual blog’s address. If you own a domain then remove ” .blogspot” too and replace it with your domain’s extension.

5. Give any “Title” you want to this widget, like “Recent Comments” or “Top Commentators”.

6. Choose Number of Posts to show from the drop-down box. ( you can select max. 5 posts to show).

7. “Item date” & “Item sources” are optional. You can select them to show Date of the post with author’s name.

8. Click Save.

9. Now click “Preview”, If everything went good, Click “Save”. After few moments, it’ll show you the list of recent comments given to your blog on the same pop-up screen. If it doesn’t, then re-check the Feed URL you inserted for errors. If your blog is newly created and you haven’t received any comments yet, then this can be the second reason to not showing any post.

---

5. Top Commentators

“Top Commentators” Widget enables you to display the names of the top ten people who comment on your blog. This can be installed just to encourage your site’s readers to read and comment more.

[+/-] Click to see the Installation Instructions: 1. Go to ‘Layout” of your blog.

2. Choose the section where you want to show “Top Commentators/Recent Comments” widget and then click “Add a Gadget” link.

3. From the pop up window that opens, scroll down in the middle and click “HTML/JavaScript”. Another window will pop-up.

4. Give any title, like “Top Commentators” or “Active Readers”.

5. In the content Area, Copy/Paste this code below:
<script type="text/javascript"> function pipeCallback(obj) { document.write('<ol>'); var i; for (i = 0; i < obj.count ; i ) { var href = "'" obj.value.items[i].link "'"; if(obj.value.items[i].link == "") var item ="<li>" obj.value.items[i].title "</li>"; else var item = "<li>" "<a href=" href ">" obj.value.items[i].title "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="https://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=2f414149ab66e0892a6a179016f93019&url=http%3A%2F%2Fwww.YOUR-BLOG-ADDRESS.blogspot.com&num=10&filter=Naser" type="text/javascript"></script>

………..replace YOUR-BLOG-ADDRESS with your blog’s actual address. If you own a domain then remove “ .blogspot” too and replace it with your domain’s extension. If you do not want to show your own name in commentators list, then replace XXXX with your name. This will filter your name, and won’t show your name among Top Commentators.

6. Click Save and then Preview from the layout window.

7. If everything went good, Click “Save”.

---

6. Contact us

In most of the blogs you’ll find “Contact us” missing!! This is a great negative point for that site/blog. This makes your blog more “non professional”. Think that this is the only way your readers/commentators/sponsors can contact you. If you just put your email address exposed on your site, this makes your email inbox vulnerable to spam!! So inserting a “contact us” page/link/widget in your site keep you protected from unwanted junk emails. Unfortunately, blogger.com doesn’t offer anything like this. So we have to go and search for some other free services to do this for us. Luckily, Kontactr provides us free, great and probably the easiest way to use Contact-Form Service. All you need to do is sign up for a free account and anyone who wants to contact you, will be able to email you directly from your site. So…give it a try. You can Contact me??.. 😉

---

---

Optional Widgets

1. Live Traffic

This widget shows that, WHO, FROM WHERE coming on your site and ON WHICH TOPIC!!

Live traffic widget helps you to recognize that which one of your topics of your blog are getting popular, from which country people are coming the most and from which site they are coming or which search engine is helping you to driving traffic to your blog.

Its function is just to show you these stats; it actually doesn’t help you to increase traffic to your blog.

Again blogger.com doesn’t have any widget like this but there are many other free services you can use.
Like;

Feedjit.com
Wowzio.com

2. Web Counter

Ever wonder how many visitors do you get to your site?
Everyone likes to know how much traffic makes its way to their website. You can see this by inserting a small “counter” widget in your blog.

This works just like a simple counter, “one visitor visit – one increment in counter”

These are some of the most popular FREE Counter services:

FreeCounterCode.com
EasyCounter.com
FreeHitsCounter.org

No Email address is required to signup; you just have to insert your site’s URL, choose a counter and copy/paste the given code in your site.

[+/-] Click to see the Installations Instructions:

1. Go to ‘Layout” of your blog.

2. Click any “Add a Gadget” link.

3. From the pop up window that opens, scroll down in the middle and click “HTML/JavaScript”.
Another window will pop-up.

4. Don’t give any title! Leave it Blank.

5. In the content Area, Copy/Paste the code given by the web counter’s site.

6. Click Save.

7. Now drag this newly created widget and drop it below the footer gadget of the layout.

This will show the counter inside the footer of your blog.

8. Now Click “Preview”, if everything’s is alright then Click “Save”.

3. Twitter Updates

If you are a “twitter” user, and want to show your twitter updates on your blog/site…then this widget is just for you!


[+/-] Click to see the Installation Instructions:

1. Go to ‘Layout” of your blog.

2. Choose the section where you want to show “Twitter Updates” widget and then click “Add a Gadget” link.

3. From the pop up window that opens, scroll down in the middle and click “HTML/JavaScript”.
Another window will pop-up.

4. Give any title, like “My Twitter Updates”.

5. In the content Area, Copy/Paste this code below:

<div id="twitter_div" style="background: url(https://img385.imageshack.us/img385/9364/logotwittergl9.jpg) top left no-repeat; padding-left: 60px;">
<ul id="twitter_update_list"></ul></div>
<script src="https://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="https://twitter.com/statuses/user_timeline/YOUR-USER-NAME.json?callback=twitterCallback2&count=5" type="text/javascript"></script>

………..replace YOUR-USER-NAME with your twitter username.
Above code will show latest 5 updates of your twitter account, If you want to increase this number than change 5 (in blue) to the number you want.

6. Click Save and then Preview from the layout window.

7. If its fine, then Click “Save”.

4. My Social Sites

If you want the readers to visit and follow your profile on various social sites, you can install this widget.This widget shows the links to your profile on some of your favorite social sites with their respective logos.

In this widget I’ve embedded my twitter, orkut, digg and stumbleupon profile links.
If you know little bit of HTML than you can customize it the you want it, and can add as many site’s links as you want.

[+/-] Click to see the Installation Instructions:

1. Go to ‘Layout” of your blog.

2. Choose the section where you want to show this widget and then click “Add a Gadget” link.

3. From the pop up window that opens, scroll down in the middle and click “HTML/JavaScript”.
Another window will pop-up.

4. Give any title, like “Follow me on these sites” or “Sites I use” :p…or whatever you like.. 😀

5. In the content Area, Copy/Paste the code below:


<!--Social sites links by Zain-->
<center>
<a target="_blank" href="http://www.twitter.com/YOUR-TWITTER-USER-NAME">
<img src="https://img178.imageshack.us/img178/8742/twitterlogoik7.jpg"></a>
<br/><br/>
<a target="_blank" href="YOUR-COMPLETE-ORKUT-PROFILE-LINK">
<img src="https://img231.imageshack.us/img231/1672/logoorkutpj3.gif"></a>
<br/><br/>
<a target="_blank" href="http://digg.com/users/YOUR-DIGG-USER-NAME">
<img src="https://img515.imageshack.us/img515/3858/digglogour9.gif" ></a>
<br/><br/>
<a target="_blank" href="http://YOUR-STUMBLEUPON-USER-NAME.stumbleupon.com">
<img src="https://img135.imageshack.us/img135/4009/stumbleuponlogowr3.jpg"></a>
</center>

………..replace colored text with your respective ID’s on these sites.

6. Click Save.

7. Now Click “Preview”, after previewing if there’s no error Click “Save”.

5. Chat Box

If you want your readers to contact immediately via chat on your site, then these chat box widgets will help you in this.

ShoutMix
CBox

But draw back of these chat boxes is that you have to keep open your blog and refresh the page after every message to chat with visitors.

But Yahoo! has offered its new service of inserting Yahoo! Ping Box messenger in your blog, using which, your visitors’ chat with you live on your Yahoo! Messenger.
This means messages sent by Yahoo! Ping box will be received on your Yahoo! messenger on your desktop… 🙂
I’ve already written a post about this Yahoo! Pingbox.. Read it here to learn how to install and use.

6. Blog Statistics

This little widget takes very little space and shows your blog’s total number of posts and total number of comments.


[+/-] Click to see the Installation Instructions:

1. Go to ‘Layout” of your blog.

2. Choose the section where you want to show “Blog’s Statistics” widget and then click “Add a Gadget” link.

3. From the pop up window that opens, scroll down in the middle and click “HTML/JavaScript”.
Another window will pop-up.

4. Give any title, like “Blog’s Stats”.

5. In the content Area, Copy/Paste the code below:

<script style="text/javascript">
function numberOfPosts(json) {
document.write('Total Posts: <b>' json.feed.openSearch$totalResults.$t '</b><br>');
}
function numberOfComments(json) {
document.write('Total Comments: <b>' json.feed.openSearch$totalResults.$t '</b><br>');
}
</script>
<ul><li><script src="https://YOUR-BLOG-NAME.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>
<li><script src="https://YOUR-BLOG-NAME.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>

………..replace both “YOUR-BLOG-NAME” with your blog’s actual address. If you own a domain then remove ” .blogspot” too and replace it with your domain’s extension.

6. Click Save.

7. Now Click “Preview”, after previewing if there’s no error Click “Save”.

If you are facing any kind of problem installing these widgets, tell me!

AAANDDD … last but not least, if you like this post and learned a little bit from it, then DON’T forget to share this with others. I’ve put a lot of effort in collecting these.