Membuat Read More Otomatis (Automatic Read More + Thumbnail Image)

Posted in: Tips N Trik

Read more otomatis (Automatic Read more ) adalah read more atau baca selengkapnya dengan secara otomatis mengambil ringkasan dari blog kita di tambah lagi read more otomatis ini juga akan mengambil gambar thumbnailnya. Klo pake read more / baca selengkapnya yang biasa kan agak repot tuh di saat setiap kali mau New Post / menambah postingan baru kita harus menambahkan kode <span class="fullpost> isi postingan </span> atau <span id="fullpost">isi postingan</span>,, Capeeek Dhe....!!! jaman sekarang mah da basi nieh yang ginian...hehehehe... nah bagi yang gak mau lagi disusahkan oleh read more yang seperti ini sekarang ikutin aja nieh tips dan trik membuat Read more otomatis berikut ini :

• Silakan Masuk ke account blogger anda,kemudian masuk ke>tata letak dan pilih>edit

html dan jangan lupa centang pada "Expand Widget Template".

• Cari kode </head>

• kemudian letakkan kode di bawah ini persis di atas kode tersebut :

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 300; img_thumb_height = 100; img_thumb_width = 120; </script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by TanThowi.Com
visit http://tanthowi.com 
********************************************/
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>

•  Setelah it cari kode <data:post.body/> atau <p><data:post.body/></ p>, ganti kode tersebut dengan kode di bawah 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:right'><a expr:href='data:post.url'><br/><b>Read More … </b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

• kemudian Save Template. 
• selesai. 

13.14  D'SM@rz   No comments

TULISKAN PESAN ANDA DI SINI

---

TEMPATKAN TOMBOL TWEET DI SINI

TEMPATKAN TOMBOL GOOGLE PLUS DI SINI