22 February 2013

Add Auto Read More with Thumbnail on Blogger

read more function of blogger

       This nice trick will automatically create post summaries with thumbnails. You don't need to add any extra code in every blogger post that you make.

Step 1:

         1.Login to your Blogger account.

         2.Go to "Blogger Dashboard" > "Template" > "Edit HTML".

         3.Back up your template.

         4.Check the  "Expand Widget Templates".

         5.In the code window, search for (Ctrl + F) </head> tag.

         6.Add below code just before </head> tag

<script type="text/javascript">
var summaryConf = {
    showImage: true,
    imgFloat: 'left',
    imgWidth: 120,
    imgHeight: 90,
    defaultThumb: 'https://lh3.googleusercontent.com/-GRP8IcURRsw/T9MjiNWXUcI/AAAAAAAAB88/QEDpDHxI55o/s1600/no-thumb.jpg',
    words: 65,
    wordsNoImg: 80,
    skip: 0,
    showHome: true,
    showLabel: true
<script type="text/javascript" src="http://srvsriram.googlecode.com/files/summary.js"></script>

Step 2:

    1.After that, search for (Ctrl + F) this line code:


    2.Replace the line with this code:

<span expr:id='data:post.id'><data:post.body/></span>
<b:if cond='data:blog.pageType == "index"'>
    <script type='text/javascript'>summary("<data:post.id/>")</script>
<span style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Read More</a></span>
    <b:if cond='data:blog.pageType == "archive"'>
        <script type='text/javascript'>summary("<data:post.id/>")</script>

   3. Save your template

That’s it, enjoy!

Before you leave:
Do you find this article useful? Share it via Retweet, Share or Stumble buttons below.
Any suggestion, question or comment? Please post it in the comments below.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.


Post a Comment


Copyright @ 2013 yourcodes.