Cara Mudah Membuat Auto Read More Otomatis Di Blog

Cara Mudah Membuat Auto Read More Otomatis Di Blog - Sobat... Buat sobat yang blog nya belum dipasang template, tentunya gak bakal ada auto readmore otomatis di depan halaman blog. Nah, maka dari itu, buat sobat yang belum ada auto readmore otomatis di blog, saya akan buat tutorial nya.

Tutorial Cara Mudah Membuat Auto Read More Otomatis Di Blog dengan Image dibuat semudah-mudahnya. Dan tutorial ini dijamin work 100%. Saya pernah blogwalking dan nyoba tutorial seperti ini di blog orang lain, dan saya coba, ternyata gagal dan gak berhasil.

Sobat beruntung bisa baca tutorial ini yang belum ada auto read more ototmatis di blog sobat. Karena ini bener-bener work dan saya pernah nyoba sendiri. Di blog orang lain mah, kadang-kadang error. Sebelum kita ke tutorial, saya akan jelaskan tentang apa itu auto readmore otomatis.

Auto readmore, buat sobat pasti tau read more di blog itu apa. Fungsi readmore adalah untuk mempersingkat tampilan postingan artikel didalam sebuah blog. Biar blog kita gak panjang-panjang makanya artikel didalam sebuah blog harus diberi readmore. Seperti saya ini bukan bertuliskan read more, tetapi baca selengkapnya. Karena saya cinta Indonesia, makanya saya kasih bahasa Indonesia aja.

Nah, read more udah pada tau. Sekarang auto. Auto itu banyak. Dan tentunya sobat bisa menyimpulkan sendiri. Bahwa read more didalam sebuah blog gak boleh ada satu artikel aja. Harus semua artikel pake read more. Biar memudahkan pengunjung untuk melihat apa saja artikel di blog sobat.

Nah, sekarang udah ngerti kan? Apa itu auto read more otomatis di blog. Sekarang kita langsung ke tutorialnya.

1. Login Blogger 

2. Klik template/rancangan

3. Edit HTML

4. Cari kode </head> (agar memudahkan pencarian, klik kolom Edit HTML, kemudian tekan Ctrl+F secara bersamaan pada keyboard)

5. Setelah ketemu kode </head> copy kemudian paste kan kode dibawah ini tepat DIBAWAH kode </head>

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

*Catatan kode diatas:

summary_noimg = 430; Jumlah huruf tanpa gambar
summary_img = 340; Jumlah huruf dengan gambar
img_thumb_height = 150; Tinggi Gambar
img_thumb_width = 150; Lebar Gambar

6. Selanjutnya cari kode <data:post.body/> setelah ketemu, ganti kode tersebut menjadi kode seperti 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'><font color='#1780dd'>Baca Selengkapnya &gt;&gt;&gt;</font></a>
</b:if>
</b:if>
<!-- Auto read more End -->

*Catatan!!

Terdapat 3 kode <data:post.body/> di kolom Edit HTML. Ganti semua kode <data:post.body/> menjadi kode diatas.

7. Simpan perubahan

*Tulisan Baca Selengkapnya bisa diganti dengan keinginan.

Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi.  Semoga berhasil... ˆ⌣ˆ

Tutorial Blogger

Judul	Cara Mudah Membuat Auto Read More Otomatis Di Blog
Deskripsi	Cara Mudah Membuat Auto Read More Otomatis Di Blog yang dijamin 100% work dan dengan gaya bahasa yang mudah dipahami
Author	Fahmi Fanirius
Author Rating	96%/ 100% Suara Dari 4698 votes