Readmore (Baca Selanjutnya) Auto Thumbnail : Buat Readmore di Blogspot

Apa itu readmore?

readmore adalah sama dengan baca selanjunya, fungsinya didalam blogging adalah membuat ringkasan posting pada halaman utama (homepage) dan akan menampilkan seluruh isi posting pada halaman posting (dengan mengklik link redmore atau baca selanjutnya).

Anda bisa membuat readmore automatis seperti blog saya ini. Langsung meringkas posting dan mengambil salah satu gambar atau image yang ada didalam posting untuk ditampilkan. Anda berminat ikuti tahapan berikut: (muda dan peraktis, pastinya bisa mempercantik blog anda)

Login ke Blogger dengan akun anda

1. Masuk ke tata letak lalu EDIT HTML

2. Centang Expand Template Widget

3. Cari kode </head>

4. Tambahkan kode berwarna biru berikut dibawah kode </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[

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>




5. Lalu cari kode <data:post.body/>

6 Ganti kode tersebut dengan kode berwarna hijau 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'>READ MORE - <data:post.title/></a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Yang berwarna merah ganti sesuai keinginan Anda...

7. Simpan Template

majalahsobek.com