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('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].className == 'fullpost') {
spans[i].style.display = 'none';
found = 1;
}
if (spans[i].className == 'showlink') {
if (found == 0) {
spans[i].style.display = 'none';
}
}
}
}
</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("post-<data:post.id/>");
</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.
- posted in
blogger hacks,
blogger tutorials
i have searched this hack everywhere and i found it here. THANKS!!!
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.
there is no way to do this without JavaScript (for this time). we have to give some feedback to Blogger about this.
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.
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.
Thank you so much for this!
Perfect!!!
The easiest way I've seen to date... and no more "read more" on every single post!!
Thanks!
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.
Thank you!!
I've successfuly implemented to my blog.
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!
check the expand widgets box. I had that trouble too. Easy simple fix. Great code!
:( I thought I had checked the widget box yesterday, but I tried again today with still no luck.
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!
Lenchik! Thanks SO much for that last comment - mine was the same way.
And it worked BEE-YOO-TIFULLY!
Thanks everyone!!
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?
Okay dude, or dudette, you are the man... or woman... ditto on the searching everywhere for this, and THANKS for posting...
Okay I figured it out. See my explanation at
http://chezannies.blogspot.com/2008/03/hacking-blogger-to-add-expandable-post_21.html
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
Dear All,
I'm sorry for not updating this blog for long time. I'm back now!
I was wondering how to post codes as text in blogger posts like the codes you have posted above? Need help on this. Thanks!
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)
got it - thanks for the tip Nate!
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
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.
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.
Thank you! this was precisely what I was looking for.
BRILLIANT! Thanks so much!
THANK YOU SOOOO MUCH...Blogger's instructions had me soo confused but your instructions were on point!!
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
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.
FANTASTICO !! I've tried half a a dozen expandable hacks but this is the one that finally worked. Thank you !!
great hack thans dude! see it for yourself http://shatadru.blogspot.com
Great!
Thanks..! It worked for me..!
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!
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!
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.
nice, thanks
not working for me some times read more link appers below post or sometimes it does not.
Thanks thanks for this tutorial i think I have used this on my 3 blogs alraedy
This is so awesome. I've been longing to do this. Thank you! :D
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!
Thanx really works fine!
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....
After many disappointments this was easy to install, worked right away, and has no glitches. Much thanks!
Thank you so much, this is great! You have just saved me hours and hours of misery. This works fantastically. Thanks again!
Thank you so much . Continue the great work !!
OMG. I spent DAYS looking for this code so that I wouldnt have read more in every post. THANK YOU
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
here is simple tutorial on how to add "read more" for blogger check this
Add Read more or continue reading
This worked beautifully! Thank you!!
This worked perfectly! Thank you so much! :)
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.
Nevermind. I figured it out. I pasted it in twice on accident. Thanks for the hack!!
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! ;-)
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.
Hi..
thanks..
this is good..
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.
*MWAH*!
God sent.
http://www.themonthtest.blosspot.com/
nice work; works great!
thank you! thank you! thank you!
Thanks a lot man.. The tutorial is so simple.
thank a lot
http://itsjustourworld.blogspot.com/ about our beautiful world
http://justausefulblog.blogspot.com/
nice article
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
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
Bad that it's impossible to do that automatically for all previous posts...
I have searched HIGH AND LOW for something like this, and found several snippets online that never worked. THIS FINALLY WORKED!!! THANK YOU!
Hi, I'm trying to follow the 'show more' tip but can't find the
"div class='post-body'" line.
My blog :(
thanks God sent.
http://f69dkm.blogspot.com/
Thanks for sharing. I need this. Keep up the good work.
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
Tự động à :|
Test cmt :D
Bat dong san =))
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
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
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
I am genuinely grateful to the owner of this website who has shared this great piece of writing at
here.
My website: Oph crack
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
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
This paragraph presents clear idea in favor
of the new viewers of blogging, that genuinely how to do blogging.
My weblog ... free minecraft
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
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
Awesome post.
Stop by my webpage :: Adfly Auto Clicker
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
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
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
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
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
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 =)
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