Home >>

How to make auto read more of our Blog


If you want to be able to set up your Blog posts to automatically add a "Read More" link for articles in Category Blog or Section Blog Layouts like on this Blog so that the articles would all be the same length and they would line up just as pretty as you please. Here we show you how to create it in a simple steps.

auto read more of our blog

How to make Auto read more with Thumbnails of our Blogger Posts?
  1. Log into your Blogger account and go to Dashboard > Design > Edit HTML.
  2. Check the Expand Widget Templates check box.
  3. Find this code:
    <data:post.body/>
  4. Replace that code with this one:
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read more... </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
  5. Then copy and paste this code above the </head> tag.
    <script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 400;
summary_img = 400;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<=!=[=C=D=A=T=A=[

/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
            if(s[i].indexOf(">")!=-1){
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
            }
        }
        strx =  s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {   
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }
   
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}

//]=]=>
</script>
  6. Save Template and now your post will automatically created in auto read more on index page of your blog.



Category: