Cara Membuat Auto Read More Blogger Tanpa Mengganggu Halaman Statis

Tentunya anda tidak ingin membuat jenuh pengunjung bukan ?. Dengan membuat Auto Readmore maka setiap anda posting artikel maka secara otomatis postingan akan diringkas sesuai settting yang anda buat, apabila pengunjung ingin melanjutkan membaca artikel ada pengunjung tinggal menklik "Read More" atau "Baca Selengkapnya". Sehingga pengunjung tidak perlu scroll terlalu lama untuk melihat artikel selanjutnya. Dengan begitu tampilan blog akan lebih menarik dan lebih banyak artikel yang bisa dilihat pengunjung di halaman utama.

Akan tetapi biasanya setelah kita menggunakan script Auto Read More akan muncul permasalahan baru yaitu "Halaman Statis Tidak Bisa di Buka". Sehingga anda brows di google lagi untuk mencari cara mengatasi permasalahan tersebut, hal itu akan sangat memakan waktu dan pikiran anda dan belum tentu berhasil. Sekarang anda tidak perlu repot lagi, saya sajikan untuk anda "Cara Membuat Auto Read More Blogger Tanpa Mengganggu Halaman Statis". Ikuti Langkah-Langkah berikut :

1.  Masuk ke dahboard > Design/Rancangan > Edit HTML. Jangan lupa centang 'Expand Widget Templates'. Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada kesalahan.

2.  Apabila anda sudah mengisi script Auto Read More maka anda harus menghapusnya terlebih dahulu. Gunakan Tutorial Auto Read More yang anda pakai sebelumnya, untuk mengetahui script mana yang harus anda hapus.

3.  Cari kode </head> Gunakan Ctrl + f untuk memudahkan anda dalam mencari script tersebut, kemudian Copy Paste Script berikut ini di bawah kode </head>

<!-- Auto read more script -http://serbaserbi321.blogspot.com/- Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
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://serbaserbi321.blogspot.com/- End -->



Keterangan :
Script berwarna biru adalah jumlah dan ukuran tampilan.
summary_noimg = Jumlah karakter tanpa gambar
summary_img = Jumlah karakter dengan gambar
img_thumb_height = Tinggi gambar {dalam pixel}
img_thumb_width =Lebar gambar { dalam pixel }
Ubahlah sesuai keinginan anda

4.  Cari kode <data:post.body/>  Gunakan Ctrl + f untuk memudahkan anda dalam mencari script tersebut, Kemudian ganti kode tersebut dengan script di bawah ini:

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

Keterangan :
Ganti "Read More" sesuai kata-kata yang anda inginkan misalnya "Baca Selengkapnya" , "Selanjutnya", "Link ke posting ini, atau apa saja sesuai keinginan anda.

5.  Preview terlebih dahulu kalu sudah benar lalu klik save.SELESAI.








4 comments:

Edzar AlHamdany said...

Bagus gan tutornya sngt membantu buat sy...

Jaja said...

kalo biar di halaman statis ada readmore nya gimana, tapi yang bisa di klik pada halaman statis nya?

Christian Han said...

akhirnya, sekian lama saya cari, ketemunya cuma disini yang jadi buat templates aku...
makasih bnyak ea gan... salam kenal...
follow balik ke sini ea
http://master7chris.blogspot.com/

Vertical Design said...

terimakasih banyak mas gan, kebetulan mau pasang readmore di blog baru saya.. ijin praktek dan Salam Sukses

Post a Comment

Add me on Facebook