Auto Read More Untuk Blogger

 Auto Read More Untuk Blogger

Auto Read More Untuk Blogger adalah sangat penting, karena fungsi ini SEO friendly dan membuat visitor memungkinkan surfing terus-menerus di site anda.


Jika anda telah mempunyai "Read More" dengan fungsi Manual, maka yang pertama kali anda lakukan adalah menghapus dan menormalkan kembali template anda.

Anda dapat menghapus fungsi dari script : <div class="fullpost">...</div> atau <span class="fullpost">...</span> dimana fungsi ini biasanya ditempatkan pada halaman posting.

Versi Auto Read More ini sangat mengagumkan, dimana kita dapat mengatur tampilan sesuai kemauan kita seperti berapa besar image thumbnail yang akan ditampilkan atau berapa jumlah paragraf suku kata yang akan kita tempatkan pada homepage kita.
Sebagai contoh, silahkan lihat screenshoot dibawah ini:


Catatan:
Jika anda telah membuat "Read More" fungsi "manual", maka yang harus anda lakukan adalah menormalkan kembali script di template anda seperti semula, setiap template mungkin akan berbeda, tetapi anda dapat menormalkan kembali seperti contoh berikut (hapus script yang berwarna merah):

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>

<div style='clear: both;'/>

Setelah menormalkan script diatas, lalu lanjutkan ke EDIT HTML dan temukan script </head>, copy-paste dan tempatkan kode script di bawah ini diatas script </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>

Selanjutnya pada EDIT HTML, check "Expand widget template" dan temukan script berikut:

<data:post.body/>

Jika sudah ditemukan script <data:post.body/>, hapus lalu copy-paste kode script dibawah 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'>Read More »»» <b><a expr:href='data:post.url' expr:title='data:post.title' rel='tag'><data:post.title/></a></b></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Lalu simpan template anda.

Keterangan: 
var thumbnail_mode = "float"; (menempatkan image thumbnail di kiri "float", jika tidak suka dengan opsi ini, silahkan ganti dengan "no-float")
summary_noimg = 250; (mengatur jumlah karakter yang akan ditampilkan jika tanpa image thumbnail)

summary_img = 250; (mengatur jumlah karakter yang akan ditampilkan jika menggunakan image thumbnail)

img_thumb_height = 120; (mengatur tinggi pixel thumbnail)

img_thumb_width = 120; (mengatur lebar pixel thumbnail)

#Silahkan ganti angka-angkanya saja script diatas sesuai keinginan anda.


Selamat Mencoba,