We had released Recent Comments Widget sometime back that turned out to be an instant hit. We were overwhelmed with the responses we received. There were a lot of requests for a similar Recent Posts widget. So, today, we are releasing Recent Posts widget for BlogSpot users.

How is it different from the other Recent Posts widget?

1. The problem with other widgets is that the source code for them lies with the widget author and the authors often integrate it in within their own site. If because of some problem their site is down, the recent posts widget will not work.Here, I am releasing the source code so that the logic would reside within your blog itself and hence you can do away with dependency on 3rd party site not under your control.
2. You have a number of control and customizations options available. With this widget you have the option to show:
   1. Posts Title only.
   2. Posts Title with Date.
   3. Posts Title with excerpt.
   4. Posts Title with Date and excerpt.

Why should we use this widget when we can use you the feed option provided by blogger itself?

Well, for a number of reasons.

1. Blogger limits the recent posts to 5.
2. There are a number of customization options I have provided which you might not find with the internal blogger system.
3. [Trivia] The URL that appears in your Firefox bar (below) when you hover the mouse over the link, contains your feed URL and not the actual URL.

How to install Recent Posts widget for blogger?

1. Login to the blogger dashboard.
2. Go to ‘Page Elements’ tab
3. Click on Add a Gadget. Select HTML/JavaScript widget type.
4. Now this is the most important step. Download the corresponding code given below and paste it in the widget box you have just opened above.
   1. Right click on the button below to download code for Posts Title only.
      
   2. Right click on the button below to download code for Posts Title with Date.
      
   3. Right click on the button below to download code for Posts Title with excerpt.
      
   4. Right click on the button below to download code for Posts Title with Date and excerpt.
      
5. Scroll down to src=http://xyz.blogspot.com and replace xyz with your blog’s name. For example if your blog’s URL is http://abc.blogspot.com then the code should become src=http://abc.blogspot.com DO NOT TOUCH any other part of the code or else it might create problems.
6. You have the option to increase/decrease the number of posts displayed in your widget. Go to var numposts = 5; (3rd line from the top, in the code you have downloaded). Increase/Decrease the number of posts. By default 5 posts would be displayed.
7. If you choose to show excerpt for your posts, you have the option to increase/decrease length of the excerpt. Go to var numchars = 100; (6th line from the top, in the code you have downloaded). Increase/Decrease the number of characters. By default length is set to show 100 characters.
8. You are done! Lastly please do not remove the footer credits*.

Please let me know if you face any problem implementing the code above.

If you like the above widget. Consider donating and encourage us to come up with more such widgets.

*The code is released under the condition that footer credits should remain intact.

Want to get an update as soon as we publish new article? I recommend you to subscribe via RSS Feed. You can also subscribe by email and have new articles sent directly to your inbox. It's absolutely free!

After a lot of dilly-dallying, finally I made up my mind to move from blogger to wordpress. With the introduction of “Import” feature in wordpress, the process has become quite simple but there are some points to take care of. Here is a step by step process how I made a shift, hope it would be useful for you too. In my case I had to move from blogger custom domain to wordpress. ie from xyz.com on blogger to xyz.com on wordpress. [This tutorial will be useful even for those who are moving from blogspot domain to your own domain on wordpress]

[We assume that you have wordpress installed on the domain you want to move to]

Change your Name Servers to point to the new webhost.

Go to your DNS settings page and point name server to your new host.
 
While registering, your webhost should have provided you with the name server info. If you are moving from custom domain name to wordpress with the same domain name, give ~ 24hrs of time for name server settings to propagate.   

Switch to blogspot.com

If you are moving from blogger custom domain (and same domain) to wordpress, read on. Otherwise skip this step.
You need to switch to blogspot.com otherwise you would not be able to complete next step.

Import all your blogger posts and comments with a click of a button.

Go to wordpress dashboard > Manage > Import. Click on blogger.

On the next page you need to key-in your blogger account details to let wordpress access your blogs. Click on Import button. Your blog posts and comments will now get imported to wordpress.

Redirection through .htaccess file.

This is one of the most important part. Proper redirection ensures that you don’t lose the old traffic and Google juice. We assume that permalinks custom structure that you would be using is /%postname%/ [btw this is one of the most SEO friendly structures] Create a .htaccess file on the new domain. 

1. If you are NOT in the habit of fiddling blogger post slug after publishing: The world would be nicer to you.
   Here is what you can do to ensure proper redirection.
   RedirectMatch permanent ^/[0-9]{4}/[0-9]{2}/([a-z0-9A-Z_-]+) http://xyz.com/$1 
   $1 in the end takes anything that comes out of ([a-z0-9A-Z_-]+) and append to your new blog URL.
2. If you are in the habit of fiddling post slug after publishing (like me): Get ready to do some techie stuff.
   If you tend to change the post slug in blogger after publishing, the above method would simply not work for you, as it didn’t work for me. Here is what I did that ensured 100% redirection. I used one to one mapping for the URL’s. I have tried to automate this process so that it would consume minimal time of yours.

   Download and install Notepad++
   Go to blogger dashboard. Posting > Edit Posts. View Source.
   Select All and copy paste everything in notepad++ window. 
   Find http://xyz\.blogspot\.com.*" and click find all. You will see the results in a window below. Copy paste from this window into a new one.
   Find (.*)(http://xyz\.blogspot\.com.*")(.*) replace with \2
   Find " and replace with blank [ie leave the replace field blank]
   Find .*#comments and replace with blank [ie leave the replace field blank]
   Find http://xyz\.blogspot\.com  and replace with RedirectMatch permanent ^
   Now Log into phpmyadmin of your new domain. Go to SQL tab and execute this query.

SELECT post_name
FROM wp_posts
WHERE post_status = "publish"
AND post_type = "post"

 
You will get all your posts slug. Copy paste them in notepad++ window and:
Find (.*) and replace with to http://www.xyz.com\1

Hereafter you need to manually place the URL in-front of the corresponding matching URL. I know this is kind of a boring stuff but this is closest to which I could reach and have tried to automate the process as much as I was able to.

Rest of the part should be no brainer.

Change the “Let Search Engines find your blog” under blogger settings to No.

Change the original feed address in feedburner to your new blog’s feed address.

Done. Enjoy!
While I moved from blogger to wordpress I took help from this post of blogbloke.com. I found there were some points that could be improved upon hence wrote a full post on it.

Outlined below are the steps I take when someone steals my blog’s copyrighted content.

1. I send a polite request to the site owner to remove copied content. This solves the issue 90% of the time. [Though it may sound crazy but I have seen that people think any material available on the web can be used by anyone freely]
2. If I don’t get a response, I send a harsh mail telling about what can be done if they do not remove the content. Things like complain to Google Adsense or their advertising agencies or the web host scares them off. This solves the issue 9% of the time.
3. Rest hard-core 1% needs a complain to be sent to their webhost or advertising partners.

This (pt 3. above) is what I had to do about a fortnight back when steps 1. and 2. failed in a recent case. The offending site in question was hosted on blogger using custom domain. The offender copied at least 46 posts from another blog of mine. Since I couldn’t locate any advertising on the blog, I resorted to sending a complaint to web host. All webhosts require a formal DMCA complaint to be sent to them. Generally all webhosts accept content in email format. Google Blogger requires DMCA complaint to be sent either through fax or normal mail service, in their prescribed format.

I sent the fax on 9th/Oct. Received a mail from blogger support on 11th where they asked for the list of infringing URLs in the ‘soft copy’ format. Without wasting any time I sent all the URLS which I could get hold of. (Remember that the offender in question had copied nearly whole of my site). On 18th, I received a mail saying they have removed the content in question. To my surprise they have not only removed the content but the whole site itself. Now that site shows 404.

So next time you see someone blatantly copying your posts, don’t fret. Just follow what I did.

Releasing the Recent Comments widget for blogspot/blogger users.

How is it different from the other Recent Comments widget?

The problem with other widgets is that the source code for them lies with the widget author and the authors often integrate it in within their own site. If because of some problem their site is down, the recent comments widget will not work.

Here, I am releasing the source code so that the logic would reside within your blog itself and hence you can do away with dependency on 3rd party site not under your control.

How to install Recent Comments widget for blogger?

1. Login to the blogger dashboard.
2. Go to ‘Page Elements’ tab
3. Click on Add a Gadget. Select HTML/Javascript widget type.
4. Now this is the most important step. Select the whole code given below and paste it in the widget box you have just opened above.

   <script style="text/javascript">
   function showrecentcomments(json) {
     var numcomments = 5;
     var showcommentdate = true;
     var showposttitle = true;
     var numchars = 100;
   for (var i = 0; i < numcomments; i++) {
       var entry = json.feed.entry[i];
       var alturl;
       if (i == json.feed.entry.length) break;
   for (var k = 0; k < entry.link.length; k++) {
         if (entry.link[k].rel == 'alternate') {
           alturl = entry.link[k].href;
           break;
         }
       }
      alturl = alturl.replace("#", "#comment-");
      var postlink = alturl.split("#");
      postlink = postlink[0];
      var linktext = postlink.split("/");
      linktext = linktext[5];
      linktext = linktext.split(".html");
      linktext = linktext[0];
      var posttitle = linktext.replace(/-/g," ");
      posttitle = posttitle.link(postlink);
      var commentdate = entry.published.$t;
      var cdyear = commentdate.substring(0,4);
      var cdmonth = commentdate.substring(5,7);
      var cdday = commentdate.substring(8,10);
      var monthnames = new Array();
      monthnames[1] = "Jan";
      monthnames[2] = "Feb";
      monthnames[3] = "Mar";
      monthnames[4] = "Apr";
      monthnames[5] = "May";
      monthnames[6] = "Jun";
      monthnames[7] = "Jul";
      monthnames[8] = "Aug";
      monthnames[9] = "Sep";
      monthnames[10] = "Oct";
      monthnames[11] = "Nov";
      monthnames[12] = "Dec";
      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('<br/>');
      if (showcommentdate == true) document.write('On ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' ');
   document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented');
      if (showposttitle == true) document.write(' on ' + posttitle);
   document.write('<br/>');
   if (comment.length < numchars) {
   document.write('<i>');
            document.write(comment);
   document.write('</i>');}
      else
           {
   document.write('<i>');
            comment = comment.substring(0, numchars);
            var quoteEnd = comment.lastIndexOf(" ");
            comment = comment.substring(0, quoteEnd);
   document.write(comment + '...<a href="' + alturl + '">(more)</a>');
   document.write('</i>');}
   document.write('<br/>');
     }
   document.write('<br/>');
   }
   </script>
   <script src="http://xyz.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
   </script><a href="http://reviewofweb.com/blogging/recent-comments-blogspot-widget/">Widget </a>by <a href="http://reviewofweb.com/">ReviewOfWeb</a>
   

5. Scroll down to src=http://xyz.blogspot.com and replace xyz with your blog’s name. For example if your blog’s URL is http://abc.blogspot.com then the code should become src=http://abc.blogspot.com DO NOT TOUCH any other part of the code or else it might create problems.
6. You are done! Lastly please do not remove the footer credits*.

Please let me know if you face any problem implementing the code above.

If you like the above widget. Consider donating and encourage us to come up with more such widgets.

Recently while trying to rearrange the ‘Page Elements’ for one of my blogs on blogspot, I got this error bX-xvu2n5

(Click to Enlarge)

Initially I thought the error could be because I am using draft.blogger.com so I switched back to the normal blogger.com -no solution. Then I tried switching to IE6 from Firefox 3.0.1- again no solution .I tried searching on web, the nearest I reached was this report-bug form to Blogger Team.

Well, here is my work around to this problem:

1. If you are trying to add a gadget(if not then skip this step), open the Add a Gadget page element and make changes as required. The gadget will automatically get saved in the 1st position.
2. Make sure that you have given some name to the new page element. It would be required in the next step.
3. Go to ‘Edit HTML’.
4. Press Ctrl-F and enter the name of page element. You will now reach to the page element defined in step 1 (or your desired element if you have skipped step 1).
5. Here you will find a no of widget id’s starting with <b:widget id
6. Now, cut your widget from the given list and paste it at the required place (in the list itself).
7. Confused? ok if you have something like

<b:widget id=’HTML7′ locked=’false’ title=” type=’HTML’/>
<b:widget id=’LinkList2′ locked=’false’ title=’Name1′ type=’LinkList’/>
<b:widget id=’Profile1′ locked=’false’ title=’About Me’ type=’Profile’/>
<b:widget id=’HTML8′ locked=’false’ title=” type=’HTML’/>
<b:widget id=’LinkList9′ locked=’false’ title=’Name2′ type=’LinkList’/>
<b:widget id=’LinkList10′ locked=’false’ title=’Name3′ type=’LinkList’/>

and you want to shift About Me to a place between ‘Name2′ and ‘Name3′, cut it from that place and paste it in between ‘Name2′ and ‘Name3′.Then it should look like this:

<b:widget id=’HTML7′ locked=’false’ title=” type=’HTML’/>
<b:widget id=’LinkList2′ locked=’false’ title=’Name1′ type=’LinkList’/>
<b:widget id=’HTML8′ locked=’false’ title=” type=’HTML’/>
<b:widget id=’LinkList9′ locked=’false’ title=’Name2′ type=’LinkList’/>
<b:widget id=’Profile1′ locked=’false’ title=’About Me’ type=’Profile’/>
<b:widget id=’LinkList10′ locked=’false’ title=’Name3′ type=’LinkList’/>

Click ‘Save Template’ and Done!

I am giving away two important tips for blogspot hosted blogs. If you implement this properly, as per the directions given below you might get a sustained increase in traffic.

Install Dynamic Meta Description tags: The word ‘Meta’ means data-about-data. When we say meta description tag, it describes the contents of the page. I can say with my personal experience that this is one of the most important data that Google use to index your site. I have seen great results on my site within a week of implementing it.

Well, The problem with blogspot hosted blogs is that unlike self hosted wordpress blogs, it doesn’t provide any native facility to have meta description tag for each page. So, If you define a meta description tag for your home page it will be replicated for all your pages which would be taken as a duplicate ‘meta-tag’ in Google. With the code below you can have different description tag for each page of your blogspot hosted blog.

   1: <META NAME='description' expr:content='data:blog.pageTitle + &quot;,Put in your common description tags here &quot;'/>

The steps to place this code are:

1. Go To layout > Edit HTML
2. Copy the above code and place it anywhere between <head> and </head> of your blog template.
3. Replace Put in your common description tags here with suitable description tag for your blog separated by comma. So if your blog is on Web 2.0. The tags can be technology, Web 2.0, making money online
4. Save template and you’re done.

Food for the geeks— expr:content= ‘data:blog.pageTitle’ gets replaced by the title of your current page. So when combined with the common description tags, the description tag becomes unique for each page.

Change the default Title tag on blogger: Title tags are the ones that you see on the top of your browser.

As seen in the image above, title tag for this post on adsense blog is Inside Adsense: Ad serving for everyone. By default blogger serves the title tag as Blog Name: Post Title Name. SEO studies have indicated that search Engines like Google, Yahoo give more importance to the content of tags which appears first so you may wish to reverse the order to Post Title Name: Blog Name. Here is how to do this

1. Go To layout > Edit HTML
2. We are going to introduce a large chunk of code, I will advise you to take a back up using Download Full Template
3. On the very top of your template you will find <title><data:blog.pageTitle/></title>
4. Delete it!
5. Now just above <head>, paste the code given below and ’save template’.

 <!-- Start Widget-based: Changing the Blogger Title Tag -->

 <b:if cond='data:blog.pageType == "item"'>

 <b:section id='titleTag'>

 <b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>

 <b:includable id='comments' var='post'/>

 <b:includable id='postQuickEdit' var='post'/>

 <b:includable id='main' var='top'><title><b:loop values='data:posts' var='post'><b:include data='post' name='post'/></b:loop> ~ <data:blog.title/></title></b:includable>

 <b:includable id='backlinkDeleteIcon' var='backlink'/>

 <b:includable id='feedLinksBody' var='links'/>

 <b:includable id='backlinks' var='post'/>

 <b:includable id='status-message'/>

 <b:includable id='feedLinks'/>

 <b:includable id='nextprev'/>

 <b:includable id='commentDeleteIcon' var='comment'/>

 <b:includable id='post' var='post'><data:post.title/></b:includable>

 </b:widget>

 </b:section>

 <b:else/>

 <title><data:blog.pageTitle/></title>

  </b:if>

 <!-- End Widget-based: Changing the Blogger Title Tag -->

The code above is referred from this blog. [Trivia- But if you follow the instructions there, you might get an error like "Your template is invalid because the tag 'b:section' appears inside of the tag 'head'" To fix that error you need to put the code above <head> instead of directly replacing it with <title><data:blog.pageTitle/></title>]

Want to embed flash file in blogger? Here is a simple work-around. We assume you don’t have any hosting account to host your files.

• If you are on blogger that means you have a Google Account which enables you to access Googlepages. This is the place where you need to upload your swf files (flash files). Googlepages allow space upto 100MB, this much space should be sufficient for your flash files hosting needs.
• Now copy the code given below in your favorite text editor.

   1: <object> 

   2:  

   3: <param value="http://abc.googlepages.com/file.swf?clickTAG=http://www.xyz.com/lp/row.asp" rel="nofollow" name="movie"/> 

   4:  

   5: <embed 

   6: width="160" src="http://abc.googlepages.com/file.swf?clickTAG=http://www.xyz.com/lp/row.asp" rel="nofollow" height="600" type="application/x-shockwave-flash"> 

   7: </embed> 

   8:  

   9: </object>

• Replace http://abc.googlepages.com/file.swf? with the full path of your googlepages A/C. So if your Google A/C email is steve@gmail.com and file name is apple.swf then this part of the URL should become http://steve.googlepages.com/apple.swf?
• If you just want to serve the flash file on your blog this will be enough and you can skip the next 2 steps. 
• But, if you are serving flash file as an advertisement on your blogger blog then you will need a clickTag. The swf files use the clickTag method to get the landing page URL. Replace clickTAG=http://www.xyz.com/lp/row.asp with the landing page of your advertiser.
• So the value of src should become http://abc.googlepages.com/file.swf?clickTAG=http://www.xyz.com/lp/row.asp , if you are serving this as an advertisement and should become http://abc.googlepages.com/file.swf? if you are just showing this on your blog with no landing page.
• Last but the most important part is that you should never forget to use type="application/x-shockwave-flash" while embedding any flash file. If you remove "type", though firefox will show up correctly but IE6 will not render anything.
• Now place this code in "Configure HTML/Javascript" widget of blogger.
• All Done!