Friday, February 12, 2010

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(http://3.bp.blogspot.com/_sunpK_FtO1E/SsxHmmwuzwI/AAAAAAAAATc/KK9OnC71wJg/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

Stumble
Delicious
Technorati
Twitter
Facebook







Related Posts by Categories







10 comments on "How to make to Every Blog Post Summaries with Thumbnail?"

This is DoFollow Blog Leave a Comment

Zakir Hussan said...

Really awesome and great posting Wajid your are so sweet thanks you keep posting with this great ideas

vijay on February 12, 2010 at 6:58 PM said...

Hi wajid You have lot of read more hacks,so you are 'read more' specialist.

Muhammad Wajid on February 12, 2010 at 11:09 PM said...

ha ha ha ...
I am not a specialist but your try this post it is better then read more feature.. Thank you for comments

mr.luthfi on February 15, 2010 at 11:43 AM said...

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

----- श्रेष्ठ भारत ----- on August 6, 2010 at 4:51 PM said...

how to increase height of summery ?

himanshu on August 17, 2010 at 3:19 PM said...

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

:) Admin (: on August 29, 2010 at 2:07 PM said...

How to keep thumbnail image to its default height and width
i dont want distorted images

paying ptc sites on September 3, 2010 at 11:41 AM said...

PLs help how can i use the read more styling
like i got previously in my blog

Amy (the b-line) on September 24, 2010 at 11:53 PM said...

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?

RV2x08 on December 9, 2010 at 11:17 AM said...

thx alot..it works great on mine. :)

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

Latest Blogger Tricks,Tips,Tutorial,Template,Widgets