How to Add Auto Read More with Thumbnail for Your Blogger Posts

How to Add Auto Read More with Thumbnail for Your Blogger

In the Blogger ,If your Posts showing the total content ,Reader feels the difficults ,what are the all posts about.To overcome this problem,'Auto read more ' with posts title and summary gives the reader quick guide about your posts.Thumbnail of first image in your posts gives over all idea of your posts to select his required posts .Thumbnail with auto read more for your posts increases user fast reading and quick view idea of your Blog.

From your Blogger Dash board ,Go to Theme and Click on Edit HTML button.

Click any where inside the code ,Press CTRL+F Keys and Enter below Tag and press  enter.

<data:post.body/>

You find the above tag three times in the code but stop at third one.

Replace the above tag with this below code.

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

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>

 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>

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

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

Now search for the below Tag

</head>

Just Above it ,paste the below code.

<script type='text/javascript'>

posts_no_thumb_sum = 490;

posts_thumb_sum = 400;

img_thumb_height = 160;

img_thumb_width = 180;

</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, pURL, pTITLE){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = posts_no_thumb_sum;

if(img.length>=1) {

imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';

summ = posts_thumb_sum;

}

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

div.innerHTML = summary;

}

//]]>

</script>

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

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<style type='text/css'>

.post-footer {display: none;}

.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}

 .readmore a {text-decoration: none; }

</style>

</b:if>

</b:if>

You can change the above color marked characters to change posts thumbnail summary ,height,width and number of characters of post summary.