Thursday, May 20, 2010

Automatic Read More Hack For Blogger With Thumbnail

Automatic Read More Hack For Blogger With Thumbnails i.e expandable post hack for blogger with thumbnail of image used in blogger posts and all this work is done by the script automatically,you just dont need to locate your image the script will do all work for you automatically.Just you have to write your post and publish it with one image in post related to post.

If you dont want to add thumbnail image in post summary then i had an post previously on automatic read more hack for blogger,read this.

Now how to install Automatic Read More Hack For Blogger With Thumbnails Demo snapshot is below.

Lets start with its installation:-

Now Login to Blogger Go to Layout > Edit HTML in your Blogger dashboard and check the "expand widget templates" box.

Find the closing </head> tag in your blog template, and paste the following section of code immediately before it:
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
<script type='text/javascript'>
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
strx = s.join("");
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;

Note in above codes we can change the numeric numbers according to our need

summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

Now find this code <data:post.body/> in your template and replace it with below codes.

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

<div expr:id='"summary" +'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Preview Your template if its showing thumbnail with read more hack Save it.

To show thumbnail it should have one image in your blogger posts and please upload the .js file to your server and dont forget to change the link with yours in codes to make this hack work.

I am sure everybody will love this hack for sure.babai

Tuesday, May 11, 2010

Change background color in blog posts

In this article I am going to show you how to change the background color of your blog posts.Many of the people would like to differentiate each wrapper with a different color, so I have decided to share this hack with you.
Follow the steps
  • Login to your blog account
  • Dashboard appears on successful login
  • Go to Layout – Edit Html
  • Search for the code ” post-body { “ (Use your browsers find function dude)
  • After searching the code add the following lines to it

background: #F5F2EE;

  • After adding the code it would look like this

* Click on Save template

* Congrats ! If you followed my steps correctly only the posts section will have the background color.

If you want to apply a different color replace the code in red to your favorite color

Monday, May 03, 2010

Statistics Widget for Blogger

What is Statistics Widget for Blogger?
Statistics Widget for Blogger will display the total number of posts and total number of comments on your blog. As of now, I have included only these two data for display. I do not see any value in displaying the total words in posts and total words in comments. I find them meaningless. If you are interested to display the total number of posts and total number of comments on your blog, please follow the instructions below.

Instructions to install Statistics Widget for Blogger

  • Log in to your Blogger account
  • On your Blogger Dashboard, click on the "Layout" link 
  • This will take you to the "Page Elements" tab. Decide where you want to insert the statistics widget and click on the "Add a Gadget" link accordingly.
    • Scroll down the list and find "HTML/ Javascript" and click on the "+" button 
  • This will open the "Configure HTML/ Javascript" window. In the title section, please type "Blog Statistics" or "Blog Information" or "Blog Data" or any other title as you may wish
  • In the content section, please copy & paste the following code:

<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>');


<ul><li><script src=""></script></li>

<li><script src=""></script></li></ul>

<span style="font-size:75%;"><a href="" target="_blank">Widgets for Blogger</a></span>

  • Remember to replace the text in bold "yourblog" with your blog address. Take note to replace it in two locations.

  • Your window should look like the image below.
  • I have a link back to my blog at the bottom. You are free to remove the credit, if you don't like it
  • Click on "Save" button at the bottom right hand corner

That's it. You have created a widget to display the number of posts and number of comments on your blog. Please contact me if you have any doubts or you face any problems with the widget.