Cara Mudah Untuk Membuat Readmore Otomatis Di blogspot

Cara Mudah Untuk Membuat Readmore Otomatis Di blogspot

Cara Membuat Readmore Otomatis.

   Dengan adanya readmore otomatis, kita bisa menentukan berapa ketinggian dan lebar penggalan postingan dan image yang akan muncul pada halaman pertama blog kita sehingga terlihat rapi dan menarik.

Trik ini mungkin telah banyak yang mengetahui dan ada juga yang belum mengetahuinya. Bagi anda yang belum mengetahui bagaimana cara membuat readmore otomatis, bisa mengikuti tutorial berikut ini.

PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :

Cari kode </head> kemudian masukkan script di bawah ini persis diatas kode tersebut. 

<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, version 2.0 (for blogspot)

(C)2012 by Hermanbagus

visit http://hermanbagus.blogspot.com more tips
********************************************/
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>

KEDUA, cari kode html berikut ini :

<data:post.body/> atau <p><data:post.body/></p>

Ganti kode tersebut dengan kode di bawah ini :

<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 class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan : tulisan yang berwarna merah adalah yang bisa anda ganti.

==> Summary noimg 250 : Tinggi artikel terpenggal tanpa image

==> Summar img 120 : Tinggi artikel terpenggal dengan image

==> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...

KETIGA, klik save template

Untuk melihat hasilnya coba buka halaman home page blog sobat, jrenk jrenk . . readmore otomatis telah tampil dan blog sobat terlihat lebih menarik dan lebih ringkas pada blog sobat, sehingga menimbulkan daya tarik tersendiri bagi pengunjung..

Semoga bermanfaat.


NB : Jika cara diatas belum berhasil. mungkin ada kendala. silahkan buka Cara untuk-mengatasi-read-more-otomatis yang tidak berfungsi.