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:
Ok, segitu aja sob. Semoga bermanfaat .....
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 = jumlah karakter yang ditampilkan jika artikel tidak memakai gambar (misal: 700 karakter)
summary_img = jumlah 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:
<!-- Awal Readmore -->
<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>
<!-- Akhir Readmore -->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 2 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: Jika kamu tidak menghapusnya pun tidak akan menjadi masalah.
<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>
Ok, segitu aja sob. Semoga bermanfaat .....
