Cara membuat read more otomatis (automatic read more)

Pada kesempatan ini saya akan mencoba berbagi informasi buat sahabat blogger tentang cara membuat read more atau yang sering terlihat baca selengkapnya secara otomatis, dengan read more otomatis kita tidak perlu membuat read more pada setiap postingan karena read more akan muncul secara otomatis.
Berikut contoh sekilas gambarannya yang di ambil dari blog http://vimovista.blogspot.com/:



Oke langsung saja berikut langkah langkahnya:

Pertama-tama  login dahulu ke bloger.com

kemudian masuk ke rancangan

Berikutnya masuk ke edit html

Jangan lupa centang pada kotak
Expand Template Widget

angan lupa untuk mem backup agar bila gagal tidak terjadi pusing...

Kemudian cari kode: </head>

Kalau sudah ketemu, kopi kode berikut, letakkan diatas kode </head> tersebut...

<!-- Star of auto read more part1 -->
<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[
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>
<!-- End of auto read more part1 -->

Lankah berikutnya cari kode <data:post.body/> ganti dengan kode berikut:

<!-- Auto read more part2 <data:post.body/> diganti kode berikut -->
<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>
<!-- Auto read more part2 End -->

Simpan themplate

Selesai.....

Keterangan :

summary_noimg = 250;  = tinggi artikel terpenggal tanpa image
summary_img = 250; = tinggi artikel terpenggal dengan image
img_thumb_height = 120; = ukuran tinggi gambar pada thumbnails
img_thumb_width = 120; = Ukuran lebar gambarpada tumbnails
READ MORE = Bisa diganti dengan Baca Selengkapnya, ,ocehan sepenuhnya, full read, dll...

Sumber

Posted by Fayes Cool » Rating 4.5 » at Thursday, June 16, 2011

Postingan Terkait