Readmore: Cara Buat Baca Selanjutnya Automatis Dengan Gambar

Walaupun blogger telah update templatenya dengan script readmore tapi disayangkan saat penggunaan readmore perlu melakukan pengaturan pada saat sebelum posting, tentunya sedikit repot. Tapi saya ada sedikit tips jadul yang masih banyak digunakan oleh para pengguna blogger. Yaitu dengan menggunakan kode readmore outomatis, kode readmore dibawah ini anda tidak perlu melakukan pengaturan sebelum diterbitkan, bukan hanya itu, jika anda menambahkan gambar pada postingan, maka gambar pertama akan outomatis muncul di ringkasan posting pada halaman utama. Hasilnya pasti tidak akan mengecewakan anda. Copas saja code script readmore auto with thumbnail dibawah ini..

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

Bagi yang ingin mengganti tulisan readmore dengan logo atau gambar seperti gambar 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 cede logo readmore dibawah ini

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

Selamat mencoba..

Apa itu readmore?
readmore sama dengan baca selanjunya, fungsinya didalam blogging adalah membuat ringkasan posting pada halaman utama (homepage).

Semoga bermanfaat..

Berlangganan via RSS Feed

Dengan memasukan email anda pada kolom dibawah ini, anda akan menerima kiriman posting terbaru kami di inbox anda..