Cara Membuat ReadMore Otomatis Menggunakan Icon

Kali ini saya akan membahas  blog tutorial tentang cara memberi readmore otomatis.
Mungkin anda bisa  memberi read more otomatis pada blog anda dengan tipe readmore yang menggunakan gambar/icon.

Demonya ada di blog ini saya menggunakan tipe readmore (e) dan seperti ini contohnya : 

Langsung saja di praktekan seperti langkah” dibawah ini.

Berikut langkahnya :

1. Log in blogger.com

2. Dasbor > tata letak > edit HTML

3. Centang Expand Template Widget

4. Cari kode </head> , (agar proses berjalan cepat cari dengan menggunakan Ctrl + F dan akan muncul kolom pencarian di sisi kiri bawah layar anda).

5. Copy kode di bawah ini,dan letakkan tepat di atas kode </head>  

    <script type='text/javascript'>
    var thumbnail_mode = "float" ;
    summary_noimg = 250;
    summary_img = 250;
    img_thumb_height = 120;
    img_thumb_width = 120;
    </script>

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

    (C)2008 by Galaxy Abdul Malik

    ********************************************/
    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>

CATATAN :  

summary_noimg = 250; adalah jumlah karakter/huruf yang akan di tampilkan pada posting yang tidak bergambar.

summary_img = 250; adalah jumlah karakter/huruf yang akan ditampilkan pada posting bergambar.

img_thumb_height = 120; adalah ukuran tinggi gambar yang akan ditampilkan pada postingan.

img_thumb_width = 120; adalah ukuran lebar gambar yang akan ditampilkan pada postingan.

6. Lalu cari kode <data:post.body/> , (bila terdapat kode tersebut lebih dari 1, misalnya pada template anda mempunyai 2 kode <data:post.body/> silahkan anda ganti kedua kode tersebut dengan kode yang telah disiapkan di bawah dan begitupun seterusnya).

7. Ganti kode tersebut dengan kode di bawah ini (pilih salah satu dari pilihan di bawah) :

a. Readmore otomatis dengan gambar : 

    <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'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzptC4B-YwLmH814VuUbJiKpt0zkJdQnxYs-Q9eexjwqXOW3OoPHr5wz1amVv0Q_kemcwLgeubGeCD07cuu9oJy_PViHJ3a6ib4cwKJAnzvDkRnfdU5k8Pjh-fRPKNsSnaveNwlJVqMjuU/'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

 

b. Read more otomatis dengan gambar :  

    <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'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ6FOGge7WwmcezcuEoFlVKIgoPZ1fFBk08CCYjvIByZjaUbFeCKzOmpiUXe5ihrFZYkge_qiikO-W8R4MRTgQG5m44OdEVaEqSv9z4oziCv1cDT3ikf0C1YlO9S7RUeMjF9QAVunoMPs/s1600/readmore.gif'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

 

c. Read more otomatis dengan gambar :  

    <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'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ6FOGge7WwmcezcuEoFlVKIgoPZ1fFBk08CCYjvIByZjaUbFeCKzOmpiUXe5ihrFZYkge_qiikO-W8R4MRTgQG5m44OdEVaEqSv9z4oziCv1cDT3ikf0C1YlO9S7RUeMjF9QAVunoMPs/s1600/readmore.gif'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

d. Read more otomatis dengan gambar :  

    <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'><a expr:href='data:post.url'><img src='http://3.bp.blogspot.com/-N4-Utfk6JWc/TWfg7_UuoxI/AAAAAAAAAFs/JsiB7iEpefw/s1600/icon_readmore.gif'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

e. Read more otomatis dengan gambar  : 

    <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'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJG-jrtsmdsKIbgPiaN4LWysdItX5BrOw1SaiEZneEXvfeuJ6TP4DE19UUiBNq57Jftcm2qE9W-PM3YsphqNuYc6Im-YKabP-A1HW06cE8zijptUeCXmGAxu7mFuKz-6SIc3camcRBV9s/s320/a1ifte.png'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

f. Read more otomatis dengan gambar  : 

    <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'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2xFxvKlfGObh9linJLP0I0nsqrAMku94rZX5kS-Yc8QnOhwZRtih-CTIIJqCn1RO5TIymp-xz1qgDJVFOcIiJfecWgv6C2QIbiRBT_ded3lbO7QtXJTUU_YULoCBvqP7NzdOYtIfZ7mI/s320/read-more_icon.gif'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

g. Read more otomatis dengan gambar  : 

    <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'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1PEOwrSatjFGFw9lMaK76RMPPEG47Nbu835o6v7EDd1YyWg2oVWy8-AhKciI8tU9fMEpDt2bbJPnrW5oH7GFLuRk7C1l2iv77B-blianLMIu6P__ytJuKdDO5lx0yYrMM1hnY7mpDn4Q/s1600/readmore.png'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

h. Read more otomatis dengan gambar  : 

    <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'><a expr:href='data:post.url'><img src='http://lh4.ggpht.com/_OzNnI7Y03Iw/S3jOUc9SkkI/AAAAAAAAA94/oKajALH-z-c/1-mini-allblogtools.png'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

i. Read more otomatis dengan gambar  : 

    <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'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4s6qLQjKRUh6UW0LBbdXVrqtfmOYFSqDWTCpztif2_9OuItQqGZ3TDu51njyvBCa6xwjEA1-MaUtA9FVSuN9Bp1CNU5rUHL6R-gxCF0ttAXnZa2ropv0Zee1Q-zO0twjQZcTmHM_aDlc/s1600/redmore.gif'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

8    Simpan template.       

SELAMAT MENCOBA READ MORE OTOMATIS INI. SEMOGA BERHASIL!