Cara Membuat Read More Otomatis Terbaru Pada Blog

Selamat datang di Wibis Blog, kali ini saya akan posting lagi tentang tutorial Blog. Dipostingan saya yang berkategori Blog kali ini berjudul Cara Membuat Read More Otomatis Pada Blog. Jika sobat ingin mempercantik atau ingin merapikan Blog, saya sarankan untuk memasang Read More ini, karena Read More ini terbilang sangat rapi dan tentunya cantik. Oke, tidak usah banyak kata-kata lagi, silahkan sobat untuk mengikuti tutorial Cara Membuat Read More Otomatis Terbaru Di Blog dibawah ini dengan teliti agar tidak terjadi kesalahan.

1. Masuk ke akun blog sobat

2. Lalu letakan kode dibawah ini tepat dibawah kode </head>

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

Keterangan : Kode yang berwarna merah adalah untuk untuk menampilkan gambar (Thumbalin), jika ingin menyembunyikannya silahkan ganti No biru adalah jumlah karakter untuk summary_noimg = tanpa gambar, summary_img = dengan gambar. Sedangkan img_thumb_height dan img_thumb_width adalah ukuran gambar.

4. Setelah itu, cari kode <data:post.body/> lalu ganti dengan kode dibawah ini

<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 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'>Read More</a>
</b:if>
</b:if>

Keterangan : Read More silahkan ganti dengan kata-kata yang sobat inginkan, jika ingin diganti dengan icon Read More agar lebih cantik, silahkan ganti tulisan Read More dengan kode dibawah ini.

<img border='0' src='URL Icon Read More'/>

5. Agar tampilan Read More menjadi lebih rapih, buatlah tampilan Read More menjadi rata kanan dan kiri (Justify) dengan mencari kode dibawah ini.

<div expr:id='&quot;summary&quot; + data:post.id'>

6. Lalu sisipkan kode style='text-align:justify;' hasilnya akan seperti dibawah ini

<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>

7. Terakhir klik simpan.

Demikian artikel yang berjudul Cara Membuat Read More Otomatis Terbaru Pada Blog yang bisa saya bagikan kepada sobat, baca juga ya Cara Membuat Tampilan Posting Di Homepage Hanya Judul Saja Di Blog! Terima kasih