Expandable post summaries are easy to implement and can provide your homepage a better professional look along with more exposure to your posts. Also expandable post summaries help in optimized use of bandwidth as only required piece of text or images get displayed and not the whole large post as you can see on my blog. With several advantages of expandable post summaries explained here now we can actually start with the implementation of expandable post summaries in blogger tutorial :
How to create expandable post summaries in Blogger or blogspot blogs ?
Step 1
Go to Dashboard >> Template >> Edit HTML
Step 2
Click Blogger Code Editor and Press CTRL + F
Step 3
Type or Paste following code inside the search box then hit enter
]]></b:skin>
or
</head>
Paste the following code in between above ]]></b:skin>
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
Screen Shot
Step 4
Now again press Ctrl + F and search for <data:post.body/>
paste the following piece of code after <data:post.body/>
<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more!</a>
</b:if>
Example Image
Step 5
Save the template
Step 6
Go to Dashboard >>Post
The final piece that we need is a little bit of code in your actual post. 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.
Here is the beginning of my post.<span class="fullpost">And here is the rest of it</span>
Additional Helpful Points :
If you want to write every post as expandable post summaries without writing everytime you write a new post. Just follow the simple steps :
STEP 1 : Go to Settings tab , then under the settings tab go to Formatting tab.
STEP 2 : Under the Formatting tab, search for Post Template
STEP 3 : In the Post Template section you will find a textbox, in the textbox just write
<span class="fullpost"></span>
and you will never need to write this code again. It will automatically be shown on every new post you are going to write. If you have any problem regarding this post just write it in the comment box below.
-Link-From-Blogger.png)
-Link-From-Blogger.png)
