Buat Read More / Baca Selengkapnya di Blog

Bagi yang banyak menampilkan postingan di blog, pengaturan ini lebih membuat artikel tertata dengan baik dan menarik. Pembaca juga tidak malas dulu untuk membaca setelah melihat artikel yang terlalu panjang. Pengaturan Read More / Baca Selengkapnya biasanya hanya menampilkan paragraf pertamanya saja. Untuk membaca selengkapnya klik Read More / Baca Selengkapnya..


Cara Buat Read More, sebagai berikut :

1. Masuk ke blogger dengan ID anda


2. Klik Template


3. Sebelum melakukan perubahan pada HTML lebih baik download dulu template anda dengan menekan Cadangkan / Pulihkan. Kemudian klik Unduh template lengkap. Klik OK. Kemudian Tutup. Backup template ini dimaksudkan agar jika terjadi kerusakkan pada proses edit HTML sobat bisa restore kembali template yang sudah sobat donwload tadi.


4.  Kemudian Klik Edit HTML.


5. Cari kode </head>.


6. Copy paste kode dibawah ini tepat di atas kode </head>


<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 220;
img_thumb_height = 120;
img_thumb_width = 220;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>


7. Cari kode <data:post.body/> atau kode berikut, sama saja
   <p><data:post.body/></p> Biasanya kode tersebut lebih dari satu, sehingga Anda harus coba satu-satu.


8. Hapus Kode diatas dan ganti dengan kode dibawah ini :
   
   
   <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='rmlink' style='float:left'><b>Baca Selengkapnya</b> &#8594; <a expr:href='data:post.url'><data:post.title/></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>


9. Kemudian Klik Save / Simpan.

Jika Anda ingin mengatur seberapa panjang teks yang di tampilkan atau seberapa besar gambar yang dimuat berikut ini keterangannya:
Anda bisa juga mengganti read more dengan kata-kata lain ( baca selengkapnya )
summary_noimg = 250; adalah banyaknya karakter yang ditampilkan ketika postingan anda tidak ada gambar
summary_img = 220; adalah banyaknya karakter yang ditampilkan ketika postingan atau pada artikel anda terdapat gambar.
img_thumb_height = 120; adalah tinggi gambar thumbnail
img_thumb_width = 220; adalah lebar gambar thumbnail