Mengganti Readmore Versi 1 dan Versi 2 Dengan Auto Readmore

Browse » Home » HTML Tutorials » Mengganti Readmore Versi 1 dan Versi 2 Dengan Auto Readmore

Mengganti Readmore Versi 1 dan Versi 2 Dengan Auto Readmore

Ditulis oleh Kang eNeS Minggu, 31 Juli 2011. 07.03
Label: HTML Tutorials komentar (29)

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 = 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 == &quot;item&quot;'>
<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 != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmore' style='float:right; font-style:italic'><a expr:href='data:post.url' expr:title='data:post.jumpText + &quot; &quot; + data:post.title'>Readmore...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><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:

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

Jika kamu tidak menghapusnya pun tidak akan menjadi masalah.
Ok, segitu aja sob. Semoga bermanfaat .....

Mengganti Readmore Versi 1 dan Versi 2 Dengan Auto Readmore

Artikel Terkait Dengan HTML Tutorials

29 komentar Posting Komentar

Tambahkan Komentar

10 Artikel Terbaru

10 Artikel Terpopuler

Blog Tutorials

Seputar SEO

HTML Tutorials

CSS dan Javascript

Komputer dan Internet

Agama

Politik

Sosial Budaya

Sekedar Coretan

Yang Baru Dari Sastra Culun

Direkomendasikan Teman Facebook

29 komentar
Posting Komentar