Cara Membuat Read More Secara Manual Dan Mudah

Membahas tentang Read More, apa yang ada dipikiran kalian jika mendengar itu? pastinya baca selengkapnya, menurut saya itu betul juga. Tapi untuk fungsinya Read More merupakan cara mempersingkat sebuah posting agar terlihat lebih rapi dan enak dipandang pengunjung blog anda. 

Membuat Read More ada dua cara, yaitu otomatis dan manual, tapi disisni saya akan membahas cara membuat secara manual, karena menurut saya lebih siip. Saya yakin anda pasti bisa asalkan diperhatikan baik-baik dan jeli cara ini, saya sudah menerapkan ilmu ini dan berhasil 100%. Dan jangan lupa Back Up Template dulu untuk berjaga-jaga, agar hal yang tidak diinginkan bisa teratasi dengan mudah. Tapi saya tetap yakin kalian tidak akan gagal, tinggal kembali ke diri kita masing-masing.

 

Dibawah ini adalah membuat Read More dengan cara manual:

1. Masuk ke akaun Blogger anda

2. Setelah itu akan masuk ke Dasbor Blogger. Dan klik menu dropdown seperti di bawah ini

 

3. Lalu klik Template Dan Klik Edit HTML

 

4. Ubah/hapus kode <data:post.body/> dengan kode di bawah in, gunakan CTRL+F untuk memudahkan pencarian

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

5. Kalau sudah, cari kode </head> dan letakkan kode di bawah ini di atas kode </head>

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
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 = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script> 

6. Setelah selesai, SAVE TEMPLATE

Kalau sudah hasilnya akan tampak seperti ini

Oh ya saya hampir lupa,,

Ket:  

posts_no_thumb_sum = 490; (Posting tanpa gambar)
posts_thumb_sum = 400; (Posting dengan gambar)
img_thumb_height = 120; (Tinggi gambar)
img_thumb_width = 120; (Lebar gambar)

Anda bisa mengganti angka diatas sesuai keinginan dan kemantapan kalian.

 

Untuk ini juga:

Jika di template blog anda ada lebih dari satu kode  <data:post.body/> coba satu persatu untuk menggantinya dengan kode di atas. Maksudnya jika pertama gagal, yang kedua dan seterusnya sampai behasil

Itulah yang dapat saya tulis, semoga bermanfaat. Selamat Mencoba,, 

 

GOOD LUCK!