Buat Pasang Read More Auto With Title and Thumbnail

Hai, kebetulan malam ini ada waktu buat post untuk blog ini, buat shobat yang ingin menambahkan template kesayangannya dengan mini post Readmore silahkan baca posting ini sampai selesai karena saya akan memberikan cara membuat readmore otomatis tanpa harus mengatur dulu sebelum diterbitkan. Selain itu akan muncul juga judul postingan Anda secara otomatis. Hebatnya lagi, jika Anda menambahkan gambar pada postingan, maka gambar pertama akan otomatis muncul di ringkasan posting.
Caranya mudah, ikuti langkah-langkah di bawah ini:

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

Bagi yang ingin mengganti tulisan 'Readmore' atau 'Baca Selanjutnya' dengan image atau gambar seperti dibawah ini:

1. Cari kode berikut
READ MORE - <data:post.title/>

2. Ganti dengan kode berikut
<img border='0' src='URLGAMBAR' alt='Read More' />

ganti tulisan warna merah dengan url gambar / image readmore anda, kalau tidak punya anda bisa copas code image readmore berikut

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBhFcToWvM9a6BaW769iuYNVeWnjSUj4isgL0PwisjgktgVSq7teyIxw27RlxmCrdb-Nt5ggtQW_U_0rxJHNaHAgOPslepioUB2R473LRIS3hUUGXYZaeU4rKuKitVJH7FFtLj8mK91Q2E/s320/read+more_thumb%5B1%5D.png' alt='Read More' />

Selamat mencoba..