Blogger Widget: Show Total Posts & Comments

You might have noticed that some Blogger blogs have widget installed in the sidebar which displays total posts and comments of that blog. Well, you can also install such a widget in your blog as well. A simple script allows us to show off total posts and comments on our blog.

Steps to Add the Widget!

1. Go to Layout | Page Elements.
2. Click Add a Gadget link in your sidebar where you want to add this widget.
3. When a new window is opened, chose HTML/JavaScript as your widget and add the following code in the Content field.
   

   <script style="text/javascript">
   function numberOfPosts(json) {
   document.write('Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
   }
   function numberOfComments(json) {
   document.write('Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
   }
   </script>
   <font color="blue"><script src="http://bloggerfaqs.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
   <script src="http://bloggerfaqs.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></font>

   
   
4. Save your widget and see the blog.

Widget Customization!

Replace http://bloggerfaqs.blogspot.com/ with your own blog URL. You can change the Posts: and Comments: text to whatever you like for example you can replace Comments: with Total No. of Comments:.

Blogger Widget: Show Upto 25 Recent Comments with Summaries

A simple recent comments widget allows us to display 5 latest comments in sidebar. Now you can display up to 25 comments with summaries of the comments.

Steps to Install the Widget

1. Go to Design then Page Elements.
2. Click on Add a Gadget link in your sidebar
3. A new window will open with a list of widgets, chose HTML/JavaScript widget from there.
4. Once that widget is opened, paste the following code in the Content area of the widget:
   

   <ul style="font-style: italic;"><script style="text/javascript">
   function showrecentcomments(json) {
   for (var i = 0; i < 20; i++) {
   var entry = json.feed.entry[i];
   var ctlink;
   
   if (i == json.feed.entry.length) break;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   ctlink = entry.link[k].href;
   break;
   }
   }
   ctlink = ctlink.replace("#", "#comment-");
   var ptlink = ctlink.split("#");
   ptlink = ptlink[0];
   var txtlink = ptlink.split("/");
   txtlink = txtlink[5];
   txtlink = txtlink.split(".html");
   txtlink = txtlink[0];
   var pttitle = txtlink.replace(/-/g," ");
   pttitle = pttitle.link(ptlink);
   if ("content" in entry) {
   var comment = entry.content.$t;}
   else
   if ("summary" in entry) {
   var comment = entry.summary.$t;}
   else var comment = "";
   var re = /<\S[^>]*>/g;
   comment = comment.replace(re, "");
   
   document.write('<li style="text-align:left">');
   document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');
   document.write(' on ' + pttitle);
   document.write('<br>');
   if (comment.length < 150) {
   document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');
   }
   else
   {
   comment = comment.substring(0, 150);
   var quoteEnd = comment.lastIndexOf(" ");
   comment = comment.substring(0, quoteEnd);
   document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');
   }
   }
   document.write('</li>');
   }
   </script>
   <script src="http://bloggerfaqs.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
   </script></ul>

5. Save the widget and see your blog for changes.

Widget Customization

You need to replace http://bloggerfaqs.blogspot.com/ with your own blog address. You can further make customization by changing the value 20 to some higher or lower value. This value is for the number of comments and you can't have more than 25 comments. Last thing you can modify is font-style: italic; which you can change to font-style: bold; or font-style: normal; to change the font styling.

Blogspot Tutorial: Add a Stylish Blog Search Engine

You can add a colorful search engine to your blog with ease. Many people prefer to have a simple search engine but you can customize it to suit your taste or your blog outlook. Lets have a look at a simple search engine and then we will customize it.

A simple blog search engine

The code for this search engine is:

<form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 200px;" value="Enter something here..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" value="Search!" type="submit"/></form>

You can change two things in this simple search engine. One is value="Search!" where you can replace Search! with some other word like Go!. You can also replace value="Enter something here..." with some other line which will appear in the search box.

Customize this simple search engine to make it stylish and cool

Now, we have seen a simple search engine lets customize it by changing its width, height, colors & font size.

I've used two colors (black & white) to customize the outlook of our simple search engine and it's looking cool, lets have a look at its code and then we'll further customize it.

<form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 150px; height: 15px; color: #FFFFFF; font-size: 14px; background-color: #000000;" value="Enter text to search..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" style="border-color: #000000; background-color: #FFFFFF; color: #000000;" value="Submit!" type="submit"/></form>

Now, I'll explain styling used in this search engine.

Width

width: 150px; is defining width of this search engine, you can change it to a higher value for more width. Like if I change it width: 150px; to width: 200px; this is the result...

Height

height: 15px; is defining height, you can change also change it to another number like when I changed height: 15px; to height: 20px; this happened...

Color

color: #FFFFFF; is for white color. You can certainly have another color by entering it's hex code and if you don't know about hex codes then simple download ColorPic which is a free color capturing utility.

I changed the color: #FFFFFF; to color: #FFD900; which is kinda orange color and this is the result...

Font Size

font-size: 14px; is for font size in px. I changed it to a lower value 10px just to show you the effect...

Background Color of Search Box

background-color: #000000; is for background color of the search box (not of button). Lets change it to background-color: #FF0000; which is for red color and see what happens.

Border Color

Next things is the styling of our search button. border-color: #000000; is the border color of our search button, change it to border-color: #FF0000; and see the result...

Background Color of Search Button

background-color: #FFFFFF; is the background color of the search button, change it to #FFFF00 (yellow) and see what happens...

Search Button Text Color

Last thing is color: #000000; which is the color of search button text, lets change it to #0000FF (blue) and the result is...

Installing this search engine in your blog

You can install this engine after all the customization in your sidebar by going to Layout | Page Elements and on your sidebar click Add a Gadget link. From the new opened window chose HTML/JavaSrcipt gadget and in the Title field write a title as you wish and in the Content area, add the code of your search engine. Click Save and enjoy.

A Recent Comments Widget to Display Last 5 Comments in Sidebar

Recent comments widget will display last 5 comments on your blog. To setup this widget follow these simple steps:

1- Go to Layout and on the sidebar, click on Add a Gadget.

2- A new small window will appear with a lot of gadgets scroll down and find the Feed gadget.

3- The Feed gadget will ask you for feed URL, you need to http://YOURSITE.blogspot.com/feeds/comments/default and replace YOURSITE with your actual blog url.

4- Now you can see last 5 comments on your blog in your sidebar.

5- Press Save button and enjoy.

Translate Blog in Other Languages with Google Translate Widget

Google translation widget allows your blog readers to translate your blog in their language without leaving the page. This widget is powered by Google Translate technology and can be easily installed to any blog.

Steps to Add the Google translate Widget

1. Just go to the following page:
   
   http://translate.google.com/translate_tools
2. Follow all the steps there and make sure to expand the 'Show optional settings' link.
   
   


3. If you're using Google Analytics then tick the 3rd option of 'Advanced' option. By doing this, you'd be able to track how many users are translating your blog.
4. After that, you can click 'Add to Blogger' button and the widget will be automatically installed at the top of your sidebar.
5. That's it for the tutorial.

Please Note!

Although Google Translate widget is the easiest way to allow blog translation in other languages but it's a JavaScript gadget. If you don't have a lot of non-English visitors then don't install this gadget because it takes some time to load.

Add a search form in Blogger

Search

Add a search engine in the sidebar of your blog.

<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Go" type="submit"/></form>

Sudoku Widget

The Sudoku widget generates random puzzles with five different levels of difficulty and shows when you have entered an incorrect answer.

Add Google Talk To Your Blog

Google Talk, long a fixture in Gmail, can now be added to your blog as a gadget.

The Google Talk Gadget lets you send instant messages, transfer files, make voice calls (to other Google Talk users) and leave voicemail messages. If you paste a Picasa Web Album or YouTube URL into a chat session, the gadget gives you an instant preview of the photos and videos.

Recent comments widget

Customize Widget

Widget title:

Blog address: http://.blogspot.com

Comments to display:

Show comment date:

Show post title:

Summary size: characters