Cara Membuat Read More Pos Blog Secara Otomatis dengan Gambar

Sebelumnya telah dijabarkan cara membuat read more pos blog secara manual dan otomatis. Artikel kali ini akan membahas cara membuat read more pos blog secara otomatis dengan gambar.

Hasil akhirnya seperti berikut:

Langsung saja disimak langkah-langkahnya

1. Login ke blogger.com

2. Pilih Template lalu Edit HTML,kemudian Tempatkan kursos mouse anda di dalam kotak pengeditan template.

3. Tekan CTRL+F, Muncul sebuah kotak lalu Cari kode </head> dan letakkan kode di bawah ini diatasnya.

<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)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>

4. Lanjutkan dengan meletakkan kode di bawah ini diatas kode <data:post.body/> :

<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'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRXRUpKuPJ7wLGMwap-NIkpDT3SL_GIx0r6k_HrDKO0fJaxqdp0RYyCWxGD5xt12WqJSf762uDRVmOEFkgRYI4fkiy_qvmJBpoylwVWQNQRe7KSytffOAFuOeiO_unrDbUIW9VCHyQLWnW/'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. Save Template Anda.

- Anda dapat mengatur penyusunan jumlah karakter dalam readmore tersebut sesuai dengan yang anda inginkan. ( terletak pada kode warna merah ).

- Untuk mengubah background gambar anda dapat mengganti kode dengan warna biru.

Info tambahan:

Pada langkah ke 4, saya meletakkan di atas <data:post.body/> yang ke 2. Silahkan anda coba-coba sendiri ☺

Thanks to mas +Ahmad Ridwan
http://impoint.blogspot.com/2013/03/cara-membuat-auto-readmore-di-blog.html#axzz2dzBN7uLy