How to create expandable post summaries on blogger

Today im going to show you 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 Ive done in the following screenshot below



Now scroll down and look for the following code



Once you have found it copy the following code



<b:if cond='data:blog.pageType != "item"'>

<a expr:href='data:post.url'>Read more!</a>

</b:if>



And paste it in like ive done in the screenshot below



Now if you preview the template you should see a Read more link at the end of your post like mine in the following screenshot or on the main page of this blog



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 <span class='fullpost'></span> 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



i hope you enjoyed reading this post