Cara Membuat Auto Read More Blogger

Membuat Auto Read More Blogger | Setelah membuat read more dengan fasilitas jump break di blog blogger blogspot seperti sebelumnya, saat ini ada cara yang lebih praktis karena read more yang ada pada entri di blog kita akan muncul secara otomatis setiap kali kita melakukan posting baik membuat posting langsung dari post editor blogger maupun posting yang dibuat menggunakan email. Ini juga dapat membantu anda menjaga tampilan homepage agar tidak berubah.

Ingat. Sebelum anda mengedit template anda, biasakan untuk menyimpan template yang lama, bisa dengan copy pada notepad anda agar tidak kehilangan template anda, jika mengalami kesalahan.

Bagi Anda yang ingin mengganti fasilitas read more yang telah dibuat sebelumnya dapat mengembalikan ke seperti semula terlebih dahulu dengan menghapus kode berwarna merah dibawah ini dari menu 'Edit HTML’ Blog Anda:

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

Simpan template.

Membuat auto read more:
Masih di menu "Edit HTML", jangan lupa centang "Expand widget Template", cari kode </head> letakan script dibawah ini di atas 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[
/******************************************
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>

Kemudian cari kode seperti ini: <data:post.body/>

Ganti kode <data:post.body/> dengan kode berikut:

<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>

Tulisan READ MORE dapat diganti dengan kata lain sesuai keinginan Anda.
Simpan/save template, lihat hasilnya.

Keterangan:

var thumbnail_mode = "float";  (Letak thumbnail akan berada di (float) kiri atau jika tidak silahkan ganti dengan no-float.
summary_noimg = 250; (Jumlah karakter yang akan tampil di posting tanpa gambar / thumbnail)
summary_img = 250; (Jumlah karakter yang akan tampil di posting dengan gambar / thumbnail)
img_thumb_height = 120; (tinggi Thumbnail dalam piksel)
img_thumb_width = 120; (lebar Thumbnail dalam piksel).

Sumber: o-om.com

Semoga Bermanfaat ^-^