Cara Membuat Readmore Otomatis di Blog

Cara membuat readmore otomatis pada halaman utama blog anda sangat mudah sekali,maka simaklah tutorial di bawah ini.Tapi,sebelum kita membahas lebih jauh adabaiknya saya jelaskan mengenai fungsi autoreadmore dahulu kali aja ada teman-teman yang belum mengerti  :c:
Readmore otomatis yang biasanya berada di halaman sebuah blog berfungsi sebagai ringkasan dari sebuah artikel yang anda tulis,maksudnya adalah artikel tersebut pada halaman utama anda hanya berbentuk sebuah ringkasan dengan gambar jadi apabila pengunjung ingin membaca artikel tersebut dengan lengkap harus meng klik tombol baca selengkapnya/readmore.

Preview :

 

Tutorial

• Masuk ke akun Blogger anda

• pilih Template/Rancangan , sebaiknya Back up dulu template anda,dengan cara klik download template lengkap untuk berjaga-jaga.

• Cari kode </head>, tekan tombol Ctrl + F untuk pencarian cepat, lalu masukkan kode yang dimaksud untuk memudahkan pencarian.

• kemudian Copy kode di bawah ini dan letakan di atas </head>

<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[
/**
Auto-readmore link script (for blogspot)
(C) 2012 fendevils.blogspot.com
visit http://fendevils.blogspot.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>

Next,Cari kode <data:post.body/>. 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:left'><a expr:href='data:post.url'><b>Readmore</b> &#8594;<data:post.title/></a></span></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Terakhir Save template dan lihat hasilnya :c:

KET : Silahkan ganti kode yang berwarna biru di atas dengan kata-kata sesuka anda contohnya baca selengkapnya , atau apabila anda mau mengganti teks tersebut dengan gambar readmore seperti gambar preview diatas tinggal ganti kode <b>Readmore</b> dengan kode <img src=”url gambar anda”/> ,untuk gambar tombol readmore anda bisa googling di om google dengan keyword “readmore png”

Last note

Dengan menambahkan fungsi Auto readmore pada halaman utama blog anda , hasilnya adalah artkel-artikel pada beranda blog anda  menjadi ringkas dan apabila pembaca ingin membaca lebih lengkap tinggal klik pilihan readmore baca juga cara mengatur tampilan gambar dan karakter pada readmore otomatis untuk menyesuaikannya