Blogger Magz

blogger templates | widgets | hacks | news


Selective Expandable Post Summaries  

Blogger Help provides a simple hack to create expandable post summaries for your new blogger. But, it shows "Read More" link in every posts and some of you don't like this. Hackosphere tried to make a selective expandable post summaries for his Neo blogger template. In this post, i'll try to make it easier for you.

First, we have to edit your template code. Login to your Blogger account and go to Template - Edit HTML.
Find the </head> tag and add all of this code before it.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<b:else/>
<style>.fullpost{display:none;}</style>
<script type='text/javascript'>
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(&#39;span&#39;);
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].className == &#39;fullpost&#39;) {
spans[i].style.display = &#39;none&#39;;
found = 1;
}
if (spans[i].className == &#39;showlink&#39;) {
if (found == 0) {
spans[i].style.display = &#39;none&#39;;
}
}
}
}
</script>
</b:if>

Find the CSS style tag for your post content,
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

and replace with this code.
<div class='post-body' expr:id='"post-" + data:post.id'>
<p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'>
<span class='showlink'>
<p><a expr:href='data:post.url'>Read More...</a></p>
</span>
<script type='text/javascript'>
checkFull(&quot;post-<data:post.id/>&quot;);
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Finish!

Implementation


Each post that you want to use this feature on will need this code:
<span class="fullpost"></span>

You'll enter the summary text outside the span tags and the remainder inside, like so:
Here is the beginning of my post.
<span class="fullpost">And here is the rest of it.</span>


Now, when a reader visits your blog, this post will appear like this:
Here is the beginning of my post.
Read more...


When they click the link, they'll go to the post page where they'll see the whole thing:
Here is the beginning of my post.
And here is the rest of it.


Related Posts

92 comments

  • Anonymous   October 1, 2007 at 2:17 AM

    i have searched this hack everywhere and i found it here. THANKS!!!

  • @micronauta   October 31, 2007 at 9:48 AM

    Thank You!

    I tend to hate JavaScript though and wonder what will happen when trying to view the page on mobile devices. I wonder if there is a way to do this without JavaScript.

  • Agus MU   November 1, 2007 at 6:43 PM

    there is no way to do this without JavaScript (for this time). we have to give some feedback to Blogger about this.

  • Atis   November 19, 2007 at 11:47 AM

    Thanks a lots. After some 10 different scripts this is the best one, as it does not place Read More for all posts, but only for the ones I choose.

  • Zorg   December 16, 2007 at 1:43 PM

    Doesn't work. When trying to Preview or Save the edited template, Blogger says "Blogger: Error performing your task". The error page does not say what the error is.

    This would be great if it worked. It's exactly what I'm looking for.

  • VISTA Indiana   January 22, 2008 at 9:57 AM

    Thank you so much for this!

  • idk...   February 1, 2008 at 8:56 PM

    Perfect!!!

    The easiest way I've seen to date... and no more "read more" on every single post!!


    Thanks!

  • Anonymous   February 9, 2008 at 7:05 PM

    Thank You! It

    But one more hint. I tend to hate JavaScript and would like to bring the read more near to expandable post sumaries. I place some words before spam class and it work like a teaser but "read more" goes far to the bottom of the post.

    Thanks a lots.

  • Vlada, Czech Republic   February 22, 2008 at 9:32 AM

    Thank you!!
    I've successfuly implemented to my blog.

  • Dette   March 5, 2008 at 6:35 PM

    I have tried at least 3 different methods and yours seems by far, the easiest!

    I have just one problem (lol - huge) - can't seem to find my CSS style tag for my content. I did a search for it and still nothing.

    I'm a complete newbie - would love your help with this. Thanks!

  • Swami   March 6, 2008 at 1:31 PM

    check the expand widgets box. I had that trouble too. Easy simple fix. Great code!

  • Dette   March 6, 2008 at 9:27 PM

    :( I thought I had checked the widget box yesterday, but I tried again today with still no luck.

  • Unknown   March 6, 2008 at 10:32 PM

    Thank you for the clear instructions!
    Just one thing: in my template the chunk of code that I replaced started with:
    < div class='post-body entry-content' >
    It works great!

  • Dette   March 7, 2008 at 10:44 AM

    Lenchik! Thanks SO much for that last comment - mine was the same way.

    And it worked BEE-YOO-TIFULLY!

    Thanks everyone!!

  • Nate @ House of Annie   March 19, 2008 at 1:13 AM

    It works, for the most part. But can you tell me how I can set a named anchor < a name=" ... " at the "Read More" position so that when the link is clicked, the page loads at the anchor instead of at the top?

  • Rev. Joel L. Tolbert   March 24, 2008 at 6:10 PM

    Okay dude, or dudette, you are the man... or woman... ditto on the searching everywhere for this, and THANKS for posting...

  • Nate @ House of Annie   March 24, 2008 at 7:54 PM

    Okay I figured it out. See my explanation at

    http://chezannies.blogspot.com/2008/03/hacking-blogger-to-add-expandable-post_21.html

  • Anonymous   April 7, 2008 at 6:29 PM

    I love love LOVE this hack! It's perfect when there are only a few posts you'd like to use it for, and not all of your posts.

    There's just one thing - I noticed it works perfectly in IE7, but not at all in Firefox. Does anyone have any ideas on how to fix this in Firefox?

    www.danceofmotherhood.com

  • Agus MU   April 7, 2008 at 9:29 PM

    Dear All,

    I'm sorry for not updating this blog for long time. I'm back now!

  • David D'Angelo   April 10, 2008 at 5:51 AM

    I was wondering how to post codes as text in blogger posts like the codes you have posted above? Need help on this. Thanks!

  • Nate @ House of Annie   April 14, 2008 at 10:50 AM

    It works in Firefox. You just have to scour the html code to make sure that all the < DIV > tags are closed with < /DIV >and that there is only one < SPAN CLASS=FULLPOST > < /SPAN > per post.

    IE is more forgiving of screwy HTML coding (for good or bad)

  • Anonymous   April 15, 2008 at 6:50 AM

    got it - thanks for the tip Nate!

  • Bear with Fangs   April 23, 2008 at 2:32 PM

    AWESOME. I've been looking for this for a while, and this was the most straightforward, and best explained post on how to go about doing it. LOVE IT.

    You guys are welcome to see how it looks in action at my site (not trying to spam, just showing an example) at www.bearswithfangs.com

  • Raven   May 23, 2008 at 9:01 PM

    Great customization - I used this on my own blog. Thanks for sharing!

    For those who asked about how the tweak displays when JavaScript is disabled, I modified the script a bit so that when Javascript is disabled, the main blog page renders as it would without the modification - all posts display full and no expandable links.

  • denreu   May 24, 2008 at 11:40 PM

    thanks for the clear and simple instructions!

    i initially used a different expandable post summaries hack but it does not have a selective option. using your instructions and tweaking it through that other hack, i got exactly what i was looking for.

  • Anonymous   June 17, 2008 at 7:48 AM

    Thank you! this was precisely what I was looking for.

  • CJ   June 23, 2008 at 6:25 PM

    BRILLIANT! Thanks so much!

  • Anonymous   June 25, 2008 at 2:13 PM

    THANK YOU SOOOO MUCH...Blogger's instructions had me soo confused but your instructions were on point!!

  • Dave   June 29, 2008 at 8:20 PM

    Thank you! I have tried for several days to figure this out, and have tried 3 or 4 hacks and in as many ways. You fixed me up first time out of the box

  • Joyce McCloy   July 15, 2008 at 9:01 PM

    It works!!!!! I used your template and also your instructions make sense.

    Here is an example of my blog with your new template (that has expandable hacks):

    http://ncvotes123.blogspot.com/

    I would like to do this to another of my blogs, but would like a different style template (but with the "read more" feature.

    Do you have any other templates for Blogger Layout in plain type or other color layouts? I love it and thank you very much.

  • Anonymous   July 25, 2008 at 1:07 PM

    FANTASTICO !! I've tried half a a dozen expandable hacks but this is the one that finally worked. Thank you !!

  • Shatadru Gupta   August 7, 2008 at 3:33 AM

    great hack thans dude! see it for yourself http://shatadru.blogspot.com

  • Nhan Dao   August 16, 2008 at 4:55 AM

    Great!

  • Anonymous   August 23, 2008 at 11:10 PM

    Thanks..! It worked for me..!

  • Joyce McCloy   August 29, 2008 at 6:37 AM

    Help. This hack worked for me on the "rounders" and "scribe" templates in Blogger, but not for "denim".

    In "Denim", I cannot find the tags that you refer to in your instructions, in order to alter the template.

    Can you please help? I can't find the answer anywhere else, and yours is the first set of instructions that I could use at all for the other templates.

    Thanks!

  • Unkempt Mommy   September 17, 2008 at 6:16 AM

    This is exactly what I'm looking for, but unfortunately, I use code for Classic Blogger instead of the Blogger Templates, so the code is not compatible. Is there any way this can be done w/ Classic Blogger? Please tell me yes. Thanks!

  • Himanshu Kikani   September 18, 2008 at 5:14 AM

    This was indeed a perfect solution for me. But, while it works perfect in Firefox and Google Chrome, and creates error in IE. Can anyone help please? The blog is charkhagujarat.org, it is in Gujarati, an Indian language.

  • Alexander   September 22, 2008 at 11:23 PM

    nice, thanks

  • Anonymous   October 26, 2008 at 11:12 PM

    not working for me some times read more link appers below post or sometimes it does not.

  • Anonymous   November 13, 2008 at 8:51 PM

    Thanks thanks for this tutorial i think I have used this on my 3 blogs alraedy

  • Isabel   November 25, 2008 at 6:01 AM

    This is so awesome. I've been longing to do this. Thank you! :D

  • Anonymous   November 29, 2008 at 4:53 AM

    I am completely html illiterate and I was up all night trying to figure out how to make some posts expandable and some not and i was kind of shocked when this actually worked.
    Thanks so much for this post!

  • Hefestus   December 5, 2008 at 3:48 PM

    Thanx really works fine!

  • Andy Jay   January 9, 2009 at 11:40 PM

    Nice explanation...you could have been more specific and more detailed but, nevertheless, I was able to figure it out from the comments made by forum participants...thanks for the info....

  • David Chute   January 10, 2009 at 11:11 PM

    After many disappointments this was easy to install, worked right away, and has no glitches. Much thanks!

  • Anonymous   February 8, 2009 at 9:09 PM

    Thank you so much, this is great! You have just saved me hours and hours of misery. This works fantastically. Thanks again!

  • Anonymous   February 17, 2009 at 12:39 PM

    Thank you so much . Continue the great work !!

  • JamandKizz   February 24, 2009 at 12:44 AM

    OMG. I spent DAYS looking for this code so that I wouldnt have read more in every post. THANK YOU

  • Jeff   March 9, 2009 at 2:11 PM

    Help!
    I went to edit template

    I found the "head" and added the first revision, however I cannot find the
    div class='post body' in my template. i searched for it and it doesn't find this phrase. Help, am i doing something wrong?

    I'm using Minima Black template.

    Please help.
    thanks

  • Anonymous   March 12, 2009 at 9:53 AM

    here is simple tutorial on how to add "read more" for blogger check this
    Add Read more or continue reading

  • Who Was Kicked Off?   March 21, 2009 at 9:18 PM

    This worked beautifully! Thank you!!

  • Rianney.   March 27, 2009 at 10:46 AM

    This worked perfectly! Thank you so much! :)

  • Unknown   April 26, 2009 at 12:46 PM

    I used the code and now all of my posts show double content!?! Help please!

    (It's like every post shows like this:)

    Post Title

    All of Post Body
    All of Post Body

    And this happens on every post, not just the ones that I added the span to.

  • Unknown   April 26, 2009 at 1:00 PM

    Nevermind. I figured it out. I pasted it in twice on accident. Thanks for the hack!!

  • Suzu-Ki   April 29, 2009 at 3:58 PM

    Thanks so much for sharing this Quanta!
    Works great with Washed Denim template as well, and as a person wrote way above in the comment list, it's < div class='post-body entry-content' > , for this template at least.

    Thanks again! ;-)

  • G   May 6, 2009 at 6:56 AM

    Oh my god! I have done a great mistake! I have forgotten to download a copy of my template and now something gone wrong and the whole blog is gone. I cannot see any of my posts in my blog. Need a urgent help please.

  • Melayu Boleh Blog   May 7, 2009 at 12:54 AM

    Hi..
    thanks..
    this is good..

  • Lori E   June 4, 2009 at 12:50 PM

    I tried this from bloggers instructions and some from another site and they didn't make any sense nor did they work.
    Thank you for your easy to understand words and pictures for those of us who really don't get it.

  • TimmyHoward   July 11, 2009 at 12:25 PM

    *MWAH*!

    God sent.

    http://www.themonthtest.blosspot.com/

  • Adam Tramantano   September 5, 2009 at 5:59 PM

    nice work; works great!

  • Erick   September 7, 2009 at 4:26 PM

    thank you! thank you! thank you!

  • Jerry   November 11, 2009 at 3:22 AM

    Thanks a lot man.. The tutorial is so simple.

  • Unknown   January 15, 2010 at 12:42 PM

    thank a lot

  • electronicmusic   January 24, 2010 at 5:31 PM

    http://itsjustourworld.blogspot.com/ about our beautiful world

  • A3   January 28, 2010 at 12:53 AM

    http://justausefulblog.blogspot.com/

    nice article

  • BloggerGeeze | Blogging Tutorials   March 23, 2010 at 11:25 PM

    I have created a friendly tutorial for Blogger expandable post summary, it is new functionality added to the blogger editor. You can head on to this link article: New Expandable Post Summary from new Blogger Editor

  • Term Papers   April 27, 2010 at 11:22 PM

    I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards

  • Ѯ   June 16, 2010 at 4:06 AM

    Bad that it's impossible to do that automatically for all previous posts...

  • Anonymous   September 1, 2010 at 12:01 PM

    I have searched HIGH AND LOW for something like this, and found several snippets online that never worked. THIS FINALLY WORKED!!! THANK YOU!

  • Unknown   March 3, 2011 at 1:03 PM

    Hi, I'm trying to follow the 'show more' tip but can't find the

    "div class='post-body'" line.

    My blog :(

  • Unknown   December 8, 2011 at 5:38 AM

    thanks God sent.
    http://f69dkm.blogspot.com/

  • Southern Highlands real estate   January 19, 2012 at 2:56 AM

    Thanks for sharing. I need this. Keep up the good work.

  • pay per head call center   August 30, 2012 at 3:39 PM

    I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely

  • TrungLun0112   November 22, 2012 at 7:28 PM

    Tự động à :|

  • TrungLun0112   December 26, 2012 at 12:55 AM

    Test cmt :D
    Bat dong san =))

  • TrungLun0112   December 26, 2012 at 1:12 AM

    Này thì cmt =))
    Am thuc
    Sat thep
    Noi that
    Nha khoa

    Du lich
    Lam dep
    Truyen ngan
    Infographic

    Bao mua ban nha dat

    Sua dien thoai

    Gia su
    Xe dap
    Chuyen phat nhanh

  • Anonymous   April 17, 2013 at 9:34 PM

    I'd like to thank you for the efforts you have put in writing this blog. I am hoping to see the same high-grade blog posts by you in the future as well. In fact, your creative writing abilities has encouraged me to get my own website now ;)

    Also visit my blog post - Twitter Hack Download

  • Anonymous   April 18, 2013 at 1:39 AM

    Usually I do not read post on blogs, but I would like to say that this write-up very pressured me to check out and do it!
    Your writing style has been surprised me. Thank you,
    very great article.

    Feel free to visit my blog post: Fail Compilation 2013

  • Anonymous   April 19, 2013 at 3:33 PM

    I am genuinely grateful to the owner of this website who has shared this great piece of writing at
    here.

    My website: Oph crack

  • Anonymous   April 24, 2013 at 4:36 AM

    If you are going for most excellent contents like I do, only visit this
    web page every day since it gives quality contents, thanks

    Also visit my weblog; healthy diet plans for women to lose weight

  • Anonymous   April 28, 2013 at 7:01 PM

    Thanks for some other magnificent post. The place else may just anyone get that type of info in such an
    ideal way of writing? I've a presentation subsequent week, and I'm on the
    look for such information.

    Also visit my web site LOL videos

  • Anonymous   May 10, 2013 at 1:36 AM

    This paragraph presents clear idea in favor
    of the new viewers of blogging, that genuinely how to do blogging.


    My weblog ... free minecraft

  • Anonymous   May 18, 2013 at 6:08 AM

    This website truly has all of the information I wanted about this subject and didn't know who to ask.

    Also visit my web blog ... 007

  • Anonymous   May 20, 2013 at 9:30 AM

    I don't even know the way I finished up right here, but I believed this put up was great. I don't recognise who you might be but certainly you are
    going to a famous blogger in case you are not already.
    Cheers!

    Here is my web page: Hack Into Twitter User Accounts To Get Data Back

  • Anonymous   May 22, 2013 at 7:49 PM

    Awesome post.

    Stop by my webpage :: Adfly Auto Clicker

  • Anonymous   May 25, 2013 at 8:26 AM

    You really make it seem so easy with your presentation but I find
    this topic to be really something that I think I would never understand.
    It seems too complicated and extremely broad for
    me. I am looking forward for your next post, I'll try to get the hang of it!

    Also visit my homepage; free Minecraft

  • Anonymous   May 28, 2013 at 11:44 AM

    whoah this weblog is great i really like reading your articles.
    Keep up the great work! You already know, a lot of persons are searching around
    for this info, you could help them greatly.

    Here is my website: facebook password cracker

  • Anonymous   May 31, 2013 at 8:22 AM

    Howdy! Someone in my Myspace group shared this website with us
    so I came to take a look. I'm definitely loving the information. I'm book-marking and will be
    tweeting this to my followers! Fantastic blog and amazing design and style.



    Visit my blog sharecash.org download

  • Anonymous   June 3, 2013 at 10:03 PM

    Hey! Do you use Twitter? I'd like to follow you if that would be ok. I'm undoubtedly enjoying your blog and
    look forward to new posts.

    Here is my weblog ... Recover Twitter Password Tutorial

  • Anonymous   June 5, 2013 at 11:32 AM

    This piece of writing gives clear idea in favor of the new people
    of blogging, that truly how to do blogging.

    my web-site: hacking software

  • Anonymous   June 16, 2013 at 1:17 AM

    This program is intended to recover lost passwords for
    RAR/WinRAR archives of versions 2.xx and 3.
    xx. http://www.winrarpasswordremover.tk/ The free professional solution for recovering lost passwords to RAR and WinRAR archives.


    Wonderful work! This is the kind of info that should be shared around the web.
    Shame on the search engines for no longer positioning this publish upper!
    Come on over and visit my site . Thanks =)

  • Anonymous   June 17, 2013 at 12:05 AM

    Very nice post. I just stumbled upon your weblog and wanted
    to say that I've truly enjoyed surfing around your blog posts. After all I will be subscribing to your rss feed and I hope you write again soon!

    My web site ... Soundcloud Ripper

Post a Comment

Feel free to leave a comment...
and oh, if you want a pic to show with your comment,
upload a photo in your Blogger Profile!

Featured FREE Resource: