Page

Rabu, 02 November 2011

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...!!!!!

10 komentar:

  1. nice. .
    who is maked? you?
    yeah , thanks master blog :)

    BalasHapus
  2. ko kodenya ga bisa di copy bos. hasil copy selalu ini :
    Read more at: http://blogku--inspirasiku.blogspot.com/2011/11/how-to-add-read-more-automated-in.html
    © 2011 by BlogKu InspirasiKU Under Common Share Alike Atribution
    Gimana tuh caranya????

    BalasHapus
  3. ini ngga niat share apa boss, kok ngga bisa dikopi kodenya?

    BalasHapus
  4. Blog nya alay nih.. widget dimana2..
    bikin berat.. udah mau ngopy susah banget..

    sok-sok pula make green mode..

    sorry gw bukan kritikus blog.. gw hanya seorang web developer

    BalasHapus
  5. COK GAK ISOK DI KOPAS

    BalasHapus
  6. blog anjing nggilani

    BalasHapus
  7. bilang aja pelit share ilmunya

    BalasHapus

.: Terimakasih telah berkunjung di web blog saya, silahkan tinggalkan pesan untuk kemajuan web blog ini dimasa mendatang :.