how to create expandable post summaries on new blogger this is a great trick for those who have lots of long articles on their blog and would like to show a certain amount of text/images from the beginning of that post on the main page with a read more link at the bottom. So lets get started first i recommend you download a backup copy of your template so if anything goes wrong you can always restore from that. Next we need to make sure we have post pages enabled so go to Settings > Archiving and change Enable Post Pages to yes like mine in the following screenshot below
Now go to the edit html tab and tick the box to expand widget templates we are going to use conditional CSS to change how posts display on different pages. So copy the following code :
<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
Paste it just before the closing head tag like I've done in the following screenshot below :
scroll down and look for the following code :
Once you have found it copy the following code :
And paste it in like ive done in the screenshot below :<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Read more!</a>
of course it doesn't have to say read more it can be whatever you want also this link is still visible even when your post is not long. Now you should save the template and go to your post editor now you will need to add this ; tag around the part of the post you would like to hide like i have in the screenshot below :
Now to save time having to enter that in everytime you post you could just go to Settings > Formatting scroll to the bottom and paste it in Post Template like i have below so you do not have to enter it in each time you want to post
