How To Create Expandable Post Summaries in Blogger

Expandable post summaries can actually provide your blog a professional look and much more exposure to your content. When I applied Expandable post summaries in my blog, my page views increased by almost 50-60 percent on that very day.The more exposure to my content also resulted in getting more returning visitors and hence increasing faith in my readers towards my content.

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.

Please Share this

Blogger