Auto Read More Untuk Blogger

Text Resizer: Click for Resizer

Auto Read More Untuk Blogger adalah sangat penting, karena fungsi ini SEO friendly dan membuat visitor memungkinkan surfing terus-menerus di site anda. Selain itu Versi Auto Read More ini sangat mengagumkan, karena 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. Untuk contoh nya seperti gambar dibawah

Bagaimana Anda tertarik untuk membuatnya????

PENTING !!!!!!! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna hijau dibawah ini.Ingat!!! Setiap template mungkin berbeda, jadi tinggal disesuaikan saja.

<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;'/>

Ok setelah anda menormalkan script diatas lanjutkan dengan tutorial dibawah ini.

Untuk membuatnya ikuti langkah-langkah dibawah ini:

Pilih Rancangan kemudian pilih Edit HTML jangan lupa Klik Expand Template Widget.

Oh ya sampai lupa back Up template anda dulu biar aman

Setelah itu cari kode berikut ini </head> kemudian masukkan script berikut 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[
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>

Setelah itu cari kode berikut ini <data:post.body/> setelah ketemu hapus kode diatas dan ganti dengan kode 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 == "item"'><data:post.body/></b:if>

Klik Simpan Selesai dech

NB :
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.

Semoga anda berhasil...........

Source : http://blogclubbers.blogspot.com/

Artikel Terkait:

Blogger Trick

Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Auto Read More Untuk Blogger
Dalam Kategori : Blogger Trick
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.