Mengganti Readmore Versi 1 dan Versi 2 Dengan Auto Readmore ~ Sang Guru-Ptkgsi

Rabu, 02 November 2011

Mengganti Readmore Versi 1 dan Versi 2 Dengan Auto Readmore

Pada bahasan sebelumnya, mengenai auto readmore, saya sudah berjanji akan membahas mengenai cara mengganti readmore versi 1 dan versi 2 dengan auto readmore. Karena bagi beberapa sobat yang sudah terlanjur menggunakan readmore versi 1 atau versi 2, mungkin masih kesulitan jika harus menggantinya dengan auto readmore.

Sebenarnya jika sobat masih ingat kode yang digantikan ketika membuat readmore versi 1 atau versi 2, tidaklah susah untuk mengubahnya menjadi auto readmore ini, karena hanya tinggal menghapus kode-kode tersebut dan menggantikannya dengan kode auto readmore.

Ok deh, untuk lebih jelasnya kamu bisa mengikuti langkah-langkah berikut:

Mengganti Readmore Versi 1 Dengan Auto Readmore

Dari dasbor, pilih Rancangan - Edit HTML.
Lakukan duplikasi template untuk jaga-jaga jika bermasalah.
Beri tanda checklist (centrang) pada Expand Template Widget.
Copy script berikut lalu letakkan (paste) di bawah kode </head> (antara </head> dan <body>):
<script type='text/javascript'>
summary_noimg = 700;
summary_img = 500;
img_thumb_height = 150;
img_thumb_width = 200;
</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>

Keterangan:
summary_noimg = jumlam karakter yang ditampilkan jika artikel tidak memakai gambar (misal: 700 karakter)
summary_img = jumlam karakter yang ditampilkan jika artikel memakai gambar (misal: 500 karakter)
img_thumb_height = tinggi gambar thumbnail (misal: 150px)
img_thumb_width = lebar gambar thumbnail (misal: 200px)
Setelah itu carilah kode berikut:
<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>

Kata Readmore »» mungkin saja berbeda tergantung dulu kamu membuatnya.
Ganti kode tersebut dengan kode ini:

<p>
<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='readmore' style='float:right; font-style:italic'><a expr:href='data:post.url' expr:title='data:post.jumpText + " " + data:post.title'>Readmore...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</p>


Catatan:
Jika mau, kamu dapat mengganti perataan tek sebelah kanan (right) dengan kiri (left), atau mengubah style huruf italic dengan normal. Kamu juga bisa mengganti tulisan Readmore... dengan kata lain atau dengan gambar (image).
Simpanlah hasil editing ini dan ucapkan alhamdulillah...

Mengganti Readmore Versi 1 Dengan Auto Readmore

Untuk mengganti readmore versi 2, ikuti saja langkah-langkah seperti pada artikel Menambahkan Auto Readmore Pada Blogspot, kemudian cari lalu hapus kode:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link' style='text-align:right'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>

Jika kamu tidak menghapusnya pun tidak akan menjadi masalah.

Ok, segitu aja sob. Semoga bermanfaa

http://ruangsc.blogspot.com/2011/07/mengganti-readmore-versi-1-dan-versi-2.html
Ditulis oleh Kang eNeS
http://ruangsc.blogspot.com/2011/07/mengganti-readmore-versi-1-dan-versi-2.html

Sang Guru-Ptkgsi

Rabu, 02 November 2011