How to make to Every Blog Post Summaries with Thumbnail?

Summaries blog post with Thumbnail and read more feature I am very exited to post this tips for my lovely visitors. If you want summaries your post with a image showing on left side just follow this 8 steps and I tried to my best to understand for beginner bloggers. If you would not summaries with image then you should use this hack which "auto readmore " or manual readmore.

Step 1 : Log in Your Blogger Account

Step 2 : Go to Layout

Step 3 : Click on Edit HTML


Step 4 : Check "Expand Widget Templates"


Step 5 : Now Find(Ctrl + F) </head> and Paste this code between </head> and </body>

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 530;
summary_img = 420;
img_thumb_height = 150;
img_thumb_width = 150;
</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; margin-right:5px; border: 1px solid #E9E9E9;background-"><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>

Step 6 : Now again Find (Ctrl + F) and Replace this code with the below code <data:post.body/> or </p><data:post.body/></p>

<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;);</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
</b:if>

Step 7 : Find (Ctrl + F) <div class='post-footer-line post-footer-line-3'/> and Paste this code below <div class='post-footer-line post-footer-line-3'/>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span class='rmlink' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0sI917gNc2pkjw-SbBO8IPeNTgrYeTnOjqkDTGvayL7RcoR7Ge8LadFNUZCb3McIMFy9_6La3m4DNX-Hx2FcrpOmxM_QgM5ySfM6d6GEoJqkEELzZYdWhGMAteu7MzJNGGwykWFTH9q5l/s1600/22.png) no-repeat; padding-left:18px; float:right'><a expr:href='data:post.url'>Readmore</a></span>
</b:if>

Step 8 : Now Save and Done

Related Posts by Categories