Buat Read More Otomatis

Membuat Readmore Otomatis - Cara membuat readmore untuk apakah readmore otomatis dipasang dan apa pengaruh pemasangan readmore tersebut diblog. gunanya untuk memenggal artikel yang panjang agar tidak tampil secara keseluruhan pada halaman depan (homepage), sehingga dihalaman depan akan terlihat lebih rapi, jika pengunjung ingin membaca artikel tinggal mengkilk link Readmore atau Baca Selengkapnya.

Adanya readmore atau baca selengkapnya bukan hanya untuk mempercantik saja, tapi akan membantu proses loading blog tersebut karena saat halaman utama dibuka tentu akan banyak artikel yang harus diload, sudah pasti membutuhkan koneksi yang cepat dan waktu loadpun akan lama, jika loading terlalu berat pengunjung menjadi bosan dan akhirnya menutup blog kita. beberapa pakar seo merekomendasikan untuk membuat readmore.

Readmore otomatis, sebelumnya kita bisa juga membuat readmore secara manual, karena blogspot sendiri sudah memberikan fasilitas pemenggalan tersebut, hanya saja dengan cara manual kita tidak bisa menentukan berapa banyak kata yang akan tampil pada halaman utama sebelum pemenggalan (readmore/ baca selengkapnya/seterusnya) cara kali ini akan mempermudah kita saat melakukan penulisan artikel, kita tidak perlu memikirkan dimana harus kita penggal kita cukup mengatur berapa banyak kata berapa besar ukuran gambar yang akan ditampilkan pada halaman homepagenya.

mempersingakat silahkaan ikutin cara membuat readmore otomatis versi o-om.

Copas scrip dibawah ini :

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;

</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>


kemudian cari kode </html> di blog sahabat, gunakan CTRL + F dari keyboard untuk mencari kode </html> tadi lebih cepat, jika sudah ketemu paste scrip diatas tepat dibawah kode </head>.

Selanjutnya
Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah <data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Begitulah cara membuat readmore otomatis diblogspot, selamat mencoba semoga berhasil, setelah menggunakan cara diatas silahkan perikasa halaman statis sobat apakah terpenggal keseluruhan atau tidak jika ada kendala dengan halaman statis silahkan baca cara memperbaiki halaman statis posting yang rusak setelah memasang readmore otomatis tersebut.

0 comments:

Posting Komentar

Maaf postingan diatas tidak bermaksud menggurui sobat pembaca, jika berkenan tinggalkan komentarnya. Jangan Spam ya sob, sukses dan salam kenal,

Terimakasih atas kesempatan dan kunjungannya.!