How to create expandable post summaries in Blogger or blogspot blogs ?

SHARE:

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 ?

Template Modifications :

STEP 1 : Log in to your blogger account select Layout tab of the blog which you want to modify.

STEP 2 : Under the layout tab, click Edit HTML

STEP 3 : Now before starting with the editing part, you should back up your template by clickingDownload Full Template link on the same page.

STEP 4 : Now press Ctrl + F , and search for ]]></b:skin> or </head> . Once found paste the following piece of code in between ]]></b:skin> and </head>

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

STEP 5 : Now save your template and click select the checkbox for Expand Widget Templates

STEP 6 : Now again press Ctrl + F and search for <data:post.body/> in the template and 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>

This link will only appear on the main page and archive pages, and it will redirect your readers to the post page containing the full text of your post. You can replace the Read more! text with whatever you like.

STEP 7 : Save the template and your template is modified to show expandable post summaries.


Post Modifications :

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. For example:

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:


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.


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.

SHARE: