Cara Membuat Read More Otomatis

Buat Sobat Blogger yang udah dewa dengan dunia blogging kasih tau kalau ada yang salah dengan postingan saya kali ini. Untuk Read More Otomatis ini, dibutuhkan kode javascript yang sebenarnya bisa sobat simpan sendiri di tempat biasa sobat menyimpan file secara online. 


Namum kali ini script Read More di letakkan langsung di template tanpa menggunakan hosting untuk mencegah eror. Buat Blogger yang baru terjun di dunia blogging, saya sarankan   menggunakan Read More Otomatis saja ketimbang menggunakan Read More biasa.

Berikut langkah – langkah dalam membuat read more otomatis :

• Silahkan login ke blogger terlebih dahulu.
• Klik Tata Letak. 
• Kemudian klik Edit HTML.
• Centang Expand Template Widget.
•  Letakkan kode berikut ini tepat diatas kode </head> : 

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ;summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </script><script type='text/javascript'> //<![CDATA[ /****************************************** Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvovisit 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>

• Cari kode <data:post.body/> atau <p><data:post.body/></p>
• Kemudian hapus kode : <data:post.body/> atau <p><data:post.body/></p>
• Ganti kode tersebut dengan kode berikut 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></b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

• Kemudian Simpan Template. 

Keterangan :

summary_noimg = 450 –-> untuk tinggi postingan tanpa gambar.

summary_img = 360 –-> untuk tinggi postingan dengan gambar.

img_thumb_height = 120 –> tinggi gambar.

img_thumb_width = 150 –> lebar gambar.

Read More… –> bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.

Tweet

Anda sedang membaca artikel tentang Cara Membuat Read More Otomatis dan anda bisa menemukan artikel Cara Membuat Read More Otomatis ini dengan url http://se-dot.blogspot.com/2011/03/cara-membuat-read-more-otomatis.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Read More Otomatis ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Read More Otomatis sumbernya.