CARA MUDAH MEMBUAT READ MORE OTOMATIS DI BLOG

Cara Mudah Membuat Read More Otomatis di Blog – banyak para blogger yang masih kebingungan untuk membuat readmore secara otomatis di blog mereka, walaupun banyak sekali artikel-artikel yang mebahas bagaimana cara membuat readmore otomatis. Hal ini disebabkan karena banyaknya artikel yang copas padahal si pemilik blog sendiri tidak faham dengan caranya. Disini saya akan menjelaskan cara membuat readmore otomatis secara detail sehingga blogger pemula sekalipun bisa membuatnya.

Ngomong-ngomong mungkin blogger pemula atau newbie masih bingung apa itu readmore?. Read more adalah penggalan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata “READ MORE”, “BACA SELENGKAPNYA”, ” LANJUTKAN MEMBACA”, dll.

Manfaat readmore juga untuk mempersingkat atau merapihkan artikel yang panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.

Untuk demonya silahkan klik link dibawah ini.

CONTOH READ MORE

Cara membuat readmore otomatis dengan gambar

Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.
Cari Kode </HEAD>
Copy paste kode dibawah ini tepat di atas kode </HEAD>

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <style> .post-body{text-align:justify;} .post-body img{max-width:none;width:auto;} .read-more{float:left; padding-top: 10px;} .read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9; text-decoration:none;font:bold 13px Arial;padding:5px;} .read-more a:hover{text-decoration:none;background:#666;} .pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;} .grow img{height:165px;width:250px;transition: all 2s ease;} .grow img:hover{width:400px;height:250px;} </style> <script type='text/javascript'> var thumbnail_mode = "yes"; //yes -dengan gambar, no -tanpa gambar summary_noimg = 300; //banyaknya huruf jika tidak ada gambar summary_img = 250; //banyaknya huruf jika ada gambar img_thumb_height = 165; img_thumb_width = 250; </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 = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;} //]]></script> </b:if> </b:if>

Save Template anda.

geser atau scrol ke bawah dan cari kode atau pijit ctrl+f kemudian paste kode di bawah untuk cari <data:post.body/>
Setelah ketemu hapus kode <data:post.body/> diatas dan ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <div class='read-more'> <a expr:href='data:post.url'>Baca Selengkapnya »</a> </div> </b:if> </b:if>

Klik SAVE / SIMPAN dan lihat hasilnya.
Jika ingin tulisan BACA SELENGKAPNYA menjadi gambar, silahkan ganti tulisan Baca Selengkapnya di atas (tulisan merah) menjadi script berikut

Terlihat seperti sulit tetapi jika sambil di praktekan pasti bisa karena ini sudah sangat detail, jika saya menjelaskan dengan singkat mungkin para blogger pemula tidak akan mengerti atau kesusahan membuatnya.

sekian dulu sari saya untuk cara membuat readmore semoga bermanfaat dan jika masih ada yang tidak dimengerti anda dipersilahkan untuk bertanya langsung.

Kekurangan :
kekurangan auto readmore ini adalah :
- Setingan jumlah posting di halaman utama tidak akan berfungsi
- semakin banyak postingan dengan gambar, maka semakin sedikit jumlah postingan yang muncul di halaman utama

Update :

untuk mengatasi kekurangan di atas, coba update script pertama yg ada di atas </head>
di replace menjadi seperti berikut :

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 100;
img_thumb_width = 100;
</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(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>
</b:if> </b:if>