How to add Read More Automated in Blogger post

My post this time, how to add read more automated. Read More Auto has the advantages of posting will be divided into 2 parts automatically.

To read more automated, the required javascript code, now I will give to you has JavaScript code. To my friends who are just learning a new blogger, I recommend using automatic read more read more alone than usual. Because of course my friend will not bother to share two posts mate with the code manually.

Here are the steps in making auto read more:

1. Of course, your blogger account login
2. Then select the design continues to edit the html, on Expand Widget Templates check settings
3. Copy the following code before the code </ head>:

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ;  summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </script>

    <script type='text/javascript'>
    //<![CDATA[
    /******************************************
    Auto-readmore link script, version 2.0 (for blogspot)

    (C)2008 by dhonie

    visit http://blogku--inspirasiku.blogspot.com to get more tutorial article
    *******************************************************/
    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>

4. If you have ever used an older version read more (manual), you should return the first mate as the original code. Remove the code that I marked in blue below, adjust the template buddy, because each template different course:

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>  

So that now there is only one <data:post.body/>
5. Then delete the code: <data:post.body/> or <p> <data:post.body/> </ p>
6. Replace that code with the following code:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read More … <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

7. Then the Save Template.

Description:
summary_noimg = 450 -> to higher posts without pictures.
summary_img = 360 -> to high posts with pictures.
img_thumb_height = 120 -> image height.
img_thumb_width = 150 -> width of the image.
Read More ... -> Can you replace with the words Read More, Continue or whatever to your creations

Good luck...!!!!!

Artikel Terkait