Cara Membuat Read More Otomatis Pada Blog

Cara Membuat Read More Di Blog. Read more atau baca selengkapnya, berguna untuk mempersingkat tampilan dari setiap posting di halaman awal blog kalian. Berikut ini ada 2 cara, yang pertama adalah cara membuat read more manual versi blogger dan read more otomatis. nah sekarang lanjut tutorialnya.

Cara Membuat Readmore Manual Dengan Blogger

• Login ke Blogger kalian, buka salah satu artikel kalian.
• setelah itu kalian klik "Jump Break", Maka nanti akan keluar garis seperti ini 

• Setelah itu kalian simpan, dan silahkan cek hasilnya !!, cara diatas adalah manual artinya setiap kita membuat artikel, kita harus selalu melakukan langkah tersebut, agar dapat membuat Readmore/Baca Selengkapnya pada blog. nah adalagi nih tips yang paling mantep, yaitu cara yang otomatis, dimana kita gaperlu melakukan "JumpBreak" lagi karena dengan tips ini secara otomatis setiap kita membuat artikel maka ketika dipublikasikan akan membuat readmore secara otomatis.

Cara Membuat Readmore Otomatis

• Login ke blogger. Dari halaman Dasboard Pilih pengaturan Template.
• Selanjutnya klik edit HTML dan cari kode </head> dan Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F untuk mencari):

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</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(thumbnail_mode == "yes") {
    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>
<!-- Auto read more script End -->

• Kalian bisa edit kode2 dibawah ini sesuai keinginan kalian :

summary_noimg = 430; Jumlah Huruf dengan gambar
summary_img = 340; Jumlah Huruf Tanpa gambar
img_thumb_height = 150; Tinggi gambar
img_thumb_width = 150; Lebar Gambar

• Sekarang cari kode <data:post.body/> ada 2-3 kode yang sama, ganti semuanya dengan kode dibawah ini :

<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Baca Selengkapnya >>></a>
</b:if>
</b:if>
<!-- Auto read more End -->

• Kata "Baca Selengkapnya >>>" Bisa kalian ganti sesuka kalian.

Setelah menambahkan read more otomatis, maka setiap Artikel postingan kita tampilannya akan disederhanakan dari halaman awal blog. Jadi kita tidak perlu lagi menggunakan Tools Insert Jump break, seperti read more manual versi blogger. Setelah publikasi, maka tampilan artikel blog akan seperti ini :

Gampangkan ? Semoga Bermanfaat !!