Blogger Expandable Post Summary For Selective Posts

Similar Queries :
How to display short summary of my post and rest with READ MORE mark
How to insert click to Read More link in my blog post 
How to get selective expandable post

The below solution will show you how to add a “Read More” link in your selective blogger or blogspot post. The advantage of this trick is more useful for the bloggers writing long articles in one page. The idea is to show only selected portion of article on your Home Page. If reader want to read the full article, he/she have to click “Read More” link to see the full article. People using wordpress has such option, but there is nothing for blogger (BlogSpot.com). So here is the trick.

Log in to your Blogger Dashboard >> Layout >> Edit Html >> Tick Expand Widget >> Find </head>
(Use Ctrl + F to find text in Mozilla Firefox and IE) and paste the code below

<b:if cond='data:blog.pageType == "item"'>
 <style>.fullpost{display:inline;}</style>
<b:else/>
 <style>.fullpost{display:none;}</style>
 <script type='text/javascript'>
 function checkFull(id) {
   var post = document.getElementById(id);
   var spans = post.getElementsByTagName(&#39;span&#39;);
   var found = 0;
   for (var i = 0; i &lt; spans.length; i++) {
     if (spans[i].className == &#39;fullpost&#39;) {
       spans[i].style.display = &#39;none&#39;;
       found = 1;
     }
     if (spans[i].className == &#39;showlink&#39;) {
       if (found == 0) {
         spans[i].style.display = &#39;none&#39;;
       }
     }
   }
 }
 </script>
</b:if>

Now, Find the below code in your template

<div class='post-body'>
  <p><data:post.body/></p>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

And Replace it with the below code

<div class='post-body' expr:id='"post-" + data:post.id'> 
    
<p><data:post.body/></p> 

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

<span class='showlink'> 

<p><div class='more-link'><a expr:href='data:post.url' expr:title='data:post.title' rel='nofollow'>Read More...</a></p> 

</span> 

<script type='text/javascript'> 

checkFull(&quot;post-<data:post.id/>&quot;); 

</script> 

</b:if> 

<div style='clear: both;'/> <!-- clear for photos floats --> 

</div>

 

The part of a code marked in Red font (nofollow) is used to instruct search engines robot not to scrawl & index the link. As per blogger help page i am not able to find such tag.


You can edit/customize the Read More link appearance as per your need. Find ]]></b:skin> in Edit Html mode (be sure that expand widget is marked) and paste the below code above ]]></b:skin>.

.more-link { 
    
display : block; 
    
padding-right : 20px; 
    
text-align : right; 
    
clear : both; 
    
} 
    
.more-link a { 
    
text-decoration : underline; 
    
font-weight : bold; 
    
} 
    
.more-link a:hover { 
    
color : #ff0000; 
    
font-weight : bold; 
    
text-decoration : underline; 
    
}

Done. Now whenever you want expandable post, add the code below in your HTML mode. Anything written before the <span class="fullpost"> will display on your Main page, rest will be hidden. If someone clicks on Read More... link he/she will be able to read the full article.

This part of the post will appear on your main page

<span class="fullpost">

This part of the post will remain hidden until reader clicks on Read More.. link or the title of the post.


</span>

In a simple sentence, i can say that whatever you write before <span class=”fullpost”> will be shown on your main page, and whatever you write between <span class=”fullpost”> and </span> will remain hidden.

If your article is too small or you dont want Read More link on your Main Page, remove the <span class="fullpost"></span> code from your post.


Why to write span code every time you write a new post ?.. here is the solution. Insert the code in Post Template.


Log in to blogger account >> Go to Settings Page >> Click Formatting >> Copy and paste the below code and save settings.

<span class="fullpost">




</span>

Look at the Screenshot

 
If you completed above step, you will see the code while writing blog post (in Html Mode)If you are using Windows Live Writer just update the Blog Account Configuration settings.


Related : How to Insert Code in Blog Post


Related : Change Blogger Post Title to Increase your Search Rankings