Cara Membuat ReadMore Otomatis Di blog

Teman Teman kali ini saya masih berbagi ilmu tentang Readmore otomatis di blogger, Mengpa blog dibutuhkan read more.

Alasanya mempercantik blog, mempersimpelkan blog, cara membuat readmore ini terbilang sangat mudah, kalau kita ada kemauan pasti kita bias menjalankanya. Mungkin ada beberapa cara , namun disini saya menampilkan atau memberitahu cara nya yang enak dan mudah dimengerti saja. Tidak muluk muluk.

Nah,dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali.

Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Langkah Cara Membuat Read More Otomatis tanpa jQuery pada Blogger dengan Bahasa Javascript

Sedikit Curhat >>Dulu saya Sampe keringetan sendiri yang nama nya belajar ngeblog apa lagi yang namanya Buat read more tuh, sampe, kehilangan kesabaran, apa kah teman teman pernah mengalaminya Seperti Saya ??? JUJUR aja teman teman,,,,

Ok pertama seperti Biasa Masuk Blogger.

Pilih Template, edit Html

Jangan Lupa Cek Lis, Centang 

Lalu Setelah Kamu Centang cari tulisan </head> agar mudah gunakan CTRL+F atau F3 setelah ketemu tepat diatas kode </head> kamu copy dan paste Kode Berikut.

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
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 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>

Kalau sudah di coppy paste berikutnya tinggal cari kode <data:post.body/> atau <p><data:post.body/></p>

Tadi sebelumnya sudah saya bahas bahwa Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Sekarang yang menggunakan Teks dulu 

Caranya cari kode <data:post.body/> atau <p><data:post.body/></p> lalu ganti dengan kode

<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 style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>

Sekarang Yang menggunakan Gambr

Caranya cari kode <data:post.body/> atau <p><data:post.body/></p> lalu ganti dengan kode

<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 style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>