Adding Read More With Thumbnail To Blogger


A good advantage of having an automatic read more on your blog is that it will make your blog load faster by showing few post (5-6 posts) only instead of the full post on the homepage since it is the most  important part of your blog.  We can put some  set of codes in order to apply that  automatic read more to your blog
Automatic read more for blogger posts can be done by inputting some code into your blog templates.
read more with thumbnail



Adding Read More With Thumbnail To Blogger


Step 1. Go to Blogger Dashboard >> Lay-out >> Edit HTML
Step 2. Click on "Expand Widget Templates" at the top right hand corner of your  Blogger Template page
Step 3. Just after/below  ]]></b:skin> copy paste the code below,
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Step 5. Now find this code  <data:post.body/>

Step 6. And just after <data:post.body/> add the code below,

<!--READ-MORE-STARTS-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72px' width='72px'/>
   </b:if>
   <data:post.snippet/>
  </div>

 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<div style='text -align: right;'> Read More-- &gt;&gt;</div></a>
</b:if>
<!--READ-MORE-STOPS-->

Short Customization:

1. You can replace the text in blue with anything you like, e.g: Continue Reading, Keep Reading, Read More To Download
2. Replace also the text in pink if you want to  shift or transfer the " Read More" from right to left

Step 4. Save your template and you are Done! Enjoy your day friend!!!
Credits goes to My bloggertricks with some modification from me.
About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...