Saturday, October 3, 2009

Adding Summaries to Your Posts

Adding Summaries to Your Posts

Nice to you again...
Hey, want to summarize your posts? It is easy!
Just follow my Steps below.

By following these Steps you'll be able to make the summaries of your post instead of showing the entire post on the front page of your blog. Then when people want to read the rest of the post, they can click a “Continue Reading” link to see the full post. This is very handy if you have lots of long articles all on one page.
(Note that you'll need to have post pages enabled in order to make this feature work.)

Step #1.
First, go to 'Layout' tab and choose the Edit HTML section ( Layout>Edit HTML )

Step #2.
For this step you need to backup your template (click the 'Download Full Template' to backup your template)

Step #3.
To start editing your template, please click the 'Expand Widget Templates'

Step #4.
Use Ctrl+F to find this </head> tag. Then paste this code just before this </head> tag:
Code: Select all
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 350;
img_thumb_height = 150;
img_thumb_width = 150;
<script type='text/javascript'>
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
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;


Step #5.
Again, use Ctrl+F to find this <data:post.body/> tag. Then, replace that line, with this code:
Code: Select all
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; +'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<>&quot;);</script>
<span class='rmlink' style='float:right;padding-top:2px;'><a expr:href='data:post.url'> Continue Reading...</a></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Step #6
Save Template and done!

Now, your posts had been summarize...
Thank you for viewing my tips... :)


Post a Comment


Blogger Tips and Style Copyright © 2009 Community is Designed by Free Blogger Template