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 = "no-float" ;
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 != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<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 != "item"'>
<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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrzQWqKsHnaHRKwvWLrWqcf_hfWTXuucZOoSgPZKFRPz5Y92fmo09RvfBNwcVW09AVc6UB7OHzpMYejlGN57a0z-QPWSFXTWwmp-9uU3UZvTTHiWegXZIZDRmMagDlHafsnLCp-YN0u0/s314/latestbloggertricks.com.png")
10 comments on "How to make to Every Blog Post Summaries with Thumbnail?"
This is DoFollow Blog Leave a Comment
Really awesome and great posting Wajid your are so sweet thanks you keep posting with this great ideas
Hi wajid You have lot of read more hacks,so you are 'read more' specialist.
ha ha ha ...
I am not a specialist but your try this post it is better then read more feature.. Thank you for comments
great posting Wajid your are so sweet thanks you keep posting with this great ideas. Maybe you can add an image to show the before after using this tutorials...
how to increase height of summery ?
Pls guide how to keep
Thumbnails proportional to the original image
very important for me pls help thanks
for the only code which worked for me to generate thumbnails
thanks
How to keep thumbnail image to its default height and width
i dont want distorted images
PLs help how can i use the read more styling
like i got previously in my blog
This is great, thanks for posting! I'm wondering if there is anyway to have the most recent posts (let's say the last three) appear in entirety and have older posts summarized in this way? Any help would be much appreciated?
thx alot..it works great on mine. :)
Post a Comment