Cara Untuk Membuat Read More Pada Blog Agar Tampilannya Menjadi Lebih Sedikit

Pastinya akan sangat ribet dan terlilat sangat berantakan bila pada saat posting tampilannya muncul semua kebawah, jadi pada kesempatan ini saya akan mencoba berbagi cara untuk membuat Read More atau Baca Selanjutnya agar tampilannya menjadi sedikit agar lebih mempercantik tampilan blog Anda.

Berikut gambar di bawah ini adalah contoh gambar Tampilan Read More atau Baca Selanjutnya :

Jika anda tertarik coba ikuti langkah-langkah di bawah ini untuk membuat tampilan Read More atau Baca Selanjutnya :

1. Pertama-tama tentunya dengan Login dulu pada blog masing-masing

2. Masuk ke Menu Template

3. Pilih Menu Edit HTML ( Jika terjadi sesuatu yang tidak di inginkan, alangkah baiknya di jika d Backup dulu templatenya atau bisa juga dengan mengganti template yang baru atau bisa juga klik menu HTML dan klik Sesuaikan jika ingin memakai template yang sama ) 

4. Cari kode script </head> dengan menggunakan CTRL+F pada keyboard dan tekan enter untuk memudahkan pencarian

5. Lalu masukkan kode di bawah ini di atas </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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>

6. Dan selanjutnya cari kode script <data:post.body/>
7. Ganti kode script <data:post.body/> yang pertama, k2, dan k3 di coba satu persatu kalau perlu ganti semua kode <data:post.body/> dengan kode script di bawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<b:else/>
<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>
<div style='clear: both;'/><span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read More >>></b></a></span>
</b:if>

8. Ganti bacaan Read More yang berwarna Biru sesuai dengan ke inginan masing-masing, contohnya dengan Selanjutnya / Baca Selanjutnya.

9. Jika semuanya sudah sesuai dengan urutan coba Resfresh halaman blog anda dan liat hasilnya.

Sekian cara pembuatan Read More dengan versi cara saya sendiri, semoga dengan adanya tutorial ini bisa bermanfaat bagi semuanya. aamiinn ..

Selamat mencoba .. :)

Jika ingin share artikel ini tolong di cantumkan URL dan sumbernya dari mana. Terima kasih.