Thursday, January 31, 2008
Create Expandable Post Summary in Blogger
I posted this same tutorial into my itsafun.blogspot.com. I am posting it again to let you know about this nice trick. Here you go -
I have setup several blog site using blogger or blogspot. I like it very much. But one most obvious thing I was missing is the option to create expandable post summaries. By default blogger shows full story in the first page and all comments in the own page of the post when you click the post's title. The main problem is most of the time people leave after reading the article. They do not view the comments and hence can't participate on the discussion about that post. Moreover, the first page become longer and longer with full stories. I was seeking for a solution where only few lines will display in the first page as introduction and people will read the full story & comments after clicking "Read More..." link. In help.blogger.com I have found a solution. But it has few disadvantages. Main problem is - you have to write a css code manually with your each post. It will be the worst situation if you already have posted lots of articles. Then I have developed a solution with javascript where you do not need to worry about creating post summary. It automatically hides the rest of the post. Here you go -
In this method first paragraph will be used as post summary. You will view the full post after clicking "Read More..." link. Note, you must enable post pages in order to using this feature. Also backup your template html before editing it.
Now follow these instructions:
1. Go to your blogger setting panel -> Template -> Edit HTML
2. Check on "Expand Widget Templates"
3. Search for </head> & replace it with following javascript code:
<script type='text/javascript'>
function truncate_body (postid) {
var id = document.getElementById(postid);
var postbody = id.innerHTML;
var len = postbody.toLowerCase().indexOf("<br");
if(len>0)
postbody = postbody.substring(0, len);
id.innerHTML = "<p>" + postbody + "</p>";
id.style.display="block";
}
</script>
</head>
4. Search for <p><data:post.body/></p> & replace it with following code:
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"postid_" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'> truncate_body("postid_<data:post.id/>"); </script>
<p>
<a class='read_more' expr:href='data:post.url'><b>Read More...</b></a>
</p>
<b:else/>
<p><data:post.body/></p>
</b:if>
That's it. Now let me describe the code. It is not necessary to understand the code. You may skip it if the above procedure works for you.
In the 4th step I have created a div with an unique id. Then a javascript function truncate_body is called which is declared between the head of the html. In the function call it passes the id of that div.
The truncate_body function loads the full post into a varible name postbody. Then it search for the index of the fist occurance of html <br from the post. I searched <br instead of <br /> in order to avoid errors. If the <br is found in the body, it creates a sub string from the post's beginning to <br position & replaces the postbody to that substring.
If in your blog that code do not find <br then search for <p or check the html source for solution.
Hope this will work for you. But If it does not work then just post a comment here with your blog url. I will try to solve it.
Subscribe to:
Post Comments (Atom)
11 comments:
so very many thanks! it worked for me. the instruction in blogger was baffling
@adticles
I am very glad to know that it works for you and you are using it into your site.
I would like to reiterate the thanks for this code. It was very easy to follow your instructions. The end result is excellent. You can see it in action at selbictnews.blogspot.com
Thanks again
haha oooh man.. i actually love you.. i followed your directions and solved my problem in less than 6 minutes, compared to the whole afternoon i spent yesterday trying to take the blogger directions to no prevail.. thank you so much
thanku so so so so much, u rock man, hey i have successfully implemented this code on my blog, I have just put ads on my blog but I would be very very thankful to u, if u visit my blog and give me ur advice regarding ads and layout...
thnx again..
I'd like to add my thanks for this really neat and simple solution.
However one problem. My index page only shows the headline not the first paragraph.
In Blogger, the HTML code for the post does not show <br or <p so all that appears on the index page is the headline not the first paragraph of the story.
Could you give me a solution for this
http://theorangepartyblog.blogspot.com/
Many thanks
Thanks, it worked for me. Other hacks that I've tried have problems with list elements i.e. they don't work for posts with list elements like ul or ol, but this worked great.
The only limitation I found with your solution is that we get the "Read More ..." even for smaller posts for which we don't need it. Is there a way to not have this for posts in which we don't want it?
I would also like to add my thanks. I spent over 5 hours today trying to create expandable posts. I followed your instructions, and it worked perfectly. I *heart* U!
Thanks very much for this solution, however I am having the same problem as The Orange Party posted above. All I get is the headline and then Read More and I would like to have the first paragraph. Can you tell me how I can fix this?
Pls i need help.My url is naijajobville.blogspot.com and i have been trying for days to find a code that add the Readmore link to my posts to no avail.Thanx in advance
It worked for me! Thanks so much for this free information.
here's my site www.ninezjadman.com
Post a Comment