Auto Read More merupakan
Read More otomatis dengan fungsi yang canggih. Kenapa canggih? Karena Auto Read More dilengkapi dengan pengaturan jumlah karakter yang tampil pada home page blog Anda. Ada 2 pengaturan jumlah karakter yaitu jumlah karakter Read More dengan gambar dan jumlah karakter Read More tanpa gambar.
Kecanggihan yang lain yaitu Read More ini memiliki image thumbnail yang menampilkan gambar pertama pada postingan blog Anda dan memunculkannya pada awal paragraf.
Jika Anda belum mengetahui apa itu Auto Read More, Anda bisa melihat read more pada home page dari blog
Kumpulan Tutorial Ngeblog. Itu merupakan Auto Readmore dengan image thumbnail.
Udah ngga sabar nih menunggu tutorial
cara membuat auto read more?? Hehehehehe...
Silakan Anda simak
cara membuat auto read more berikut ini
Langkah 1Login ke akun Blogger milik anda > Tata Letak > Edit HTML. Klik Download Full Template untuk membackup template blog Anda.
Beri tanda centang pada "Expand widget template" kemudian CoPas kode berikut ini di atas kode </head> (tekan Ctrl+F untuk mempermudah dalam pencarian kode)
<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>
Anda bisa memodifikasi kode berikut ini
var thumbnail_mode = "float"; summary_noimg = 250; summary_img = 250; img_thumb_height = 120;img_thumb_width = 120; Ganti angka
summary_noimg untuk mengatur jumlah karakter yang tampil pada kutipan artikel tanpa gambar.
Ganti angka
summary_img untuk mengatur jumlah karakter yang tampil pada kutipan artikel dengan gambar.
Ganti angka
img_thumb_height untuk mengatur tinggi gambar yang tampil pada kutipan artikel.
Ganti angka
img_thumb_width untuk mengatur lebar gambar yang tampil pada kutipan artikel.
Langkah 2Cari kode <data:post.body/> lalu ganti dengan kode berikut 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</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Ganti kata yang berwarna biru dengan
left untuk menampilkan link readmore di bagian kiri dan
right untuk menampilkan link readmore di bagian kanan.
Ganti kata yang berwarna
merah dengan kata yang Anda suka. Misalnya Baca Selengkapnya atau Baca Selanjutnya.
Langkah 3Klik tombol
Pratinjau untuk melihat hasil. Jika hasil sudah sesuai, klik tombol
Simpan.
Label: Read More, Tutorial Blogger
Link Read More yang berupa teks jika kita lihat semakin lama semakin membosankan. Untuk menghilangkan kebosanan tersebut, kita bisa mengganti link read more dengan gambar. 
, maka akan muncul tanda seperti ini pada postingan yang sedang Anda tulis
