Cara Membuat Read More Otomatis Terbaru Di Blog

Cara Membuat Read More Otomatis Terbaru Di Blog - Selamat datang di Se-Blog teman-teman, kali ini Se-Blog akan posting lagi tentang Blog lagi lho. Dipostingan Se-Blog yang berkategori Blog kali ini berjudul Cara Membuat Read More Otomatis Terbaru Di 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 anda

2. Lalu menuju Edit HTML dan centang Expand Widget Template

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

<!-- Auto read more script -http://buka-rahasia.blogspot.com- 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 -http://buka-rahasia.blogspot.com- End -->

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

<!-- Auto read more -http://buka-rahasia.blogspot.com- 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 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>
<!-- Auto read more -http://buka-rahasia.blogspot.com- End -->

Read More silahkan ganti dengan kata-kata yang anda 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.

Cara Membuat Read More Otomatis Terbaru Di Blog - Itulah tutorial Cara Membuat Read More Otomatis Terbaru Di Blog yang Se-Blog bagikan kepada anda, baca juga ya Cara Membuat Tampilan Posting Di Homepage Hanya Judul Saja Di Blog!

Sumber

Posted in: Blog