Cara Membuat Read More Otomatis

Cara Membuat Read More Otomatis

Read more dalam bahasa indonesia yaitu Baca Selengkapnya dan fungsi dari Read more itu sendiri adalah untuk meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau ‘baca selengkapnya’ maka barulah pengunjung bisa membaca artikel penuh tulisan blog anda.

Membuat, memasang ataupun menambah Read more otomatis kedalam artikel halaman blog. Pada beberapa template untuk memasang tulisan read more ini terladang membuat kita merasa bosan, karena kita harus menambahkannya atau membuatnya secara manual ditambah lagi bentuknya kurang memuaskan. Nah, untuk mengatasi kejenuhan tersebut sobat bias mencobanya dengan cara membuat read more otomatis. Cukup sekali saja membuatnya dan manfaatnya akan terus menerus terasa selama sobat memposting tulisan, Sekarang lanjut ke langkah cara membuat read more otomatis di blogspot.

1-Login kedalam dasbor blog Kemudian pilih template

2-Untuk jaga-jaga terjadinya error pada template, silahkan sobat klik Cadangkan/pulihkan kemudian download template lengkap. Setelah itu…

3-Kemudian pilih Edit HTML

4-Beri centang pada kotak expand template widget

5-Kemudian cari kode seperti ini dalam template </head> tekan ctrl+f untuk mempermudah pencarian kode, masukan kode dibawah ini tepat diatas kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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>

6-Kemudian cari lagi kode seperti ini <data:post.body/> Atau seperti ini <p><data:post.body/></p> dalam template blog, setelah menemukannya hapus kode tersebut dan ganti dengan kode dibawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>

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

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> <b> Readmore</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

</b:if>

Keterangan: kode ini hanya menampilkan tulisan ‘Read more’ saja, ganti tulisan Read more sesuai keinginan sobat, misalnya Lanjut membaca, Baca selengkapnya, dll…

<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:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Keterangan: kode ke-2 ini menampilkan Read more dalam bentuk gambar, silahkan sobat ganti Url gambar dengan url gambar milik sobat sendiri.

7-Last, pilih simpan perubahan template. Selesai.!

Demikianlah cara membuat Read more otomatis dan kurang lebih hasilnya akan terlihat seperti pada gambar diatas. Selamat mencoba dan bye-bye…