Cara membuat Read More pada Blog

Cara membuat Read More pada Blog - Bagi para blogger desain tentu paham betul tentang cara membuat Read More, maka dari itu pada kesempatan kali ini saya akan membagikan pengalaman saya sebagai blogger newbie yang belajar mendesain blog, yaitu membuat Read More atau Baca Selengkapnya pada postingan / Artikel. Baiklah langsung saja ke pokok pembahasan, dari sumber yang saya dapatkan ada 2 cara membuat Read More atau Baca Selengkapnya.

1. Membaut Read More dengan cara manual

- Langkah pertama tentu kita harus masuk ke dashboard blogger dan masuk ke menu post atau entri
- Setelah anda selesai menulis atau mengedit artikel tentukan posisi mana yang akan dipotong untuk dipasang Read More menggunakan Insert Jump Break Seperti gambar dibawah.

Membuat Read More Manual

- Apabila selesai Klik Publikasikan, dan Read More berhasil dibuat.

*Cara Diatas merupakan cara manual, yang apabila anda harus melakukannya terus menerus setelah selesai menulis sebuah artikel.

2. Cara membuat Read More Otomatis

- Barang tentu anda harus masuk ke dashboard Blogger
- Masuk ke menu Template dan klik edit HTML serta lakukan pencarian kode </head> dan tempel kode berikut tepat dibawah kode </head> yang telah ditemukan

<!-- Auto read more bayumaulanda.blogspot.com script Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;;
summary_noimg = 4530;
summary_img = 440;
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 bayumaulanda.blogspot.com script End -->

- Sesuaikan koding dibawah ini sesuai keperluan anda

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

- Selanjutnya lakukan pencarian koding <data:post.body/> terdapat 2 atau 3 koding yang sama, ganti seluruh koding yang ditemukan dengan koding berikut 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 -->

- Dan Read More atau Baca Selengkapnya Berhasil dibuat, dan otomatis akan selalu ada pada postingan baru anda

Sekian tutorial dari saya selamat mencoba dan semoga membantu, sampai jumpa.