3/27/12

How to Easily Create Automatic Read More at Blog

How to make readmore in blogspot with an easy and quick flash in the blog's favorite bloggers. is the subject which I will discuss to you all,

good blogger friend, before I explain a little what's the point Read more on our blog. with the readmore blog looks at home are not too elongated downwards like the look of my blog home use readmore but here I replaced with the words read more, it's up buddy.

Here's how to install the readmore in blogspot:
  1. Login to your blogger buddy. 
  2. Choose a design or layout.
  3. Choose Edit HTML. 
  4. Check the words "expand widget template". 
  5. Then look for the code </ head>: to facilitate the search for press F3. 
  6. Then enter the code below just above the </ head>
    <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>
    <script type='text/javascript'>
    //<![CDATA[
    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>
    Kemudian sobat  cari kode <data:post.body/>
    Ganti kode <data:post.body/>  dengan kode di bawah ini :
    <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:right;padding-top:20px;'>
    <a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
    </b:if>
    7.Then the Save Template.

    for his testimony readmore ...
    var thumbnail_mode = "float";The location of the thumbnail is
     “float” kiri atau jika tidak silahkan ganti dengan “no-float”; summary_noimg = 250;: Number of characters to be displayed in the post without a picture / thumbnail;
    summary_img = 250;: Number of characters to be displayed in the post with the picture / thumbnail;
    img_thumb_height = 120;: Thumbnail height in pixel size;
    img_thumb_width = 120;: Thumbnail width in pixel size;

    No comments:

    Post a Comment