Cara Membuat Read More Otomatis Versi 2

Kayaknya ni tutorial dah banyak yang tau tapi gak papa deh siapa tau ada yang masih belum ngerti caranya.
Sesuai namanya readmore versi 2 ini berbeda dengan versi sebelumnya yaitu versi 1  karena read more ini bisa otomatis tanpa harus mengatur batas perpotongan text secara manual jadi gak perlu susah-susah mengatur posisi perpotomgan text dengan menaruh text sebelum kode <span class="fullpost"> dan sisanya sebelum kode </span>

Readmore versi 2 ini juga dapat menampilkan gambar pertama postingan kita untuk mewakili isi dari postingan kita.Masih gak ngerti? ya udah langsung aja ke tutorialnya biar kagak pusing-pusing hehehehehe

Bagi Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja) tapi kalo belum pernah pasang yang versi lama langkah yang satu ini lewati 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, kalo sudah tinggal lanjutkan ke tahap selanjutnya:

1. login dulu ke akun Blogger kamu
2. Pilih Rancangan
3. Edit HTML
4. Di Backup dulu templatenya biar gak ilang
5.centang Expand Template Widget
6.Letakkan kode berikut 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>

7. Cari kode <p><data:post.body/></p> atau <data:post.body/> (Gunakan ctrl+f agar mudah mencarinya) dan ganti kode tersebut 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</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

 
8.Lalu save templatenya

oke dah selesai kalo pengen tulisan readmorenya jadi gambar klik disini

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di webmiftah.blogspot.com