Automatic Read More Hack For Blogger

By default Blogger shows all the contents from your post on your blog homepage. Having everything on your homepage will make your blog homepage load slower. This might result in getting lower page views as your readers can read all your posts on a single page. So, it’s better to give a summary of your posts on your blog’s homepage and then add a ‘read more’ link below that post summary.

"Automatic Read More Hack For Blogger" i.e an expandable post hack for blogger with thumbnail of image used in blogger posts. It automatically creates a teaser instead of showing the entire post on the front page of your blog. If your readers like a post, then they can click the ‘read more’ link to view the full post.

Follow these simple steps to install automatic read more hack to your Blogger / Blogspot blog.

Step 1 :

Log in to Blogger, go to Design / Layout > Edit HTML and tick the "Expand Widget Templates" checkbox.

Step 2 :

Now find (CTRL+F) this in the code:

</head>

and paste the following code immideately before/above 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>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

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;

}

//]]>

</script>

Note : You can change the numeric numbers according to your 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

Step 3 :

Now find (CTRL+F) this in the code:

  <data:post.body/>

and replace it with below codes.below.

 <b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>

<data:post.body/>

<b:else/>

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

<div expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>

createSummaryAndThumb("summary<data:post.id/>");

</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>

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

</b:if>

Step 4 :

Save the template.

Automatic Read More Hack For Blogger

No comments:

Post a Comment

Popular Posts