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!
welcome to the wow power leveling cheap Wow gold service site, buy cheap wow gold,wow gold,world of warcraft power leveling buy wow gold
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! :)
Weaknesses of World Of Warcraft Gold the client-server model used by World of Warcraft have been wow power levelingexploited in order to crash the cluster of servers that aoc goldmake up a realm. Exploits also include characters being able to instantly Cheapest Wow Goldchange location or teleport. The situationbecame worse cheap wow goldwhen trying to coordinate activities across a number of playersor guilds on the same realm.World of Warcraft Lead Producer, stated that new realms would be introduced to warhammer goldrelieve the burden on existing ones. Existing realms would be upgraded.
Although the game wow gold follows a similar model to others in the genreand was noted for having wow gold cheapmany familiar concepts from roleplaying games, the new approaches gold4powerto reduce pauses between game encounters was well liked. At various times, World of Warcraft players have experienced problems with connecting to and logging in to wow gold for sale the game. Sudden server crashes that would force realms offline also occurred.
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/