Cara Mudah Membuat Read More Otomatis di Blogspot

Menurut saran seorang temanku untuk membuat line break di setiap postingan blogku agar page view-nya bisa nambah banyak, membuatku tergugah (#halah..hehe) – terpacu, untuk mencari tahu cara membuat read more (baca selengkapnya…) di postinganku itu. Setelah browsing sana-sini aku malah tambah bingung karena ini ada cara manual dan cara otomatis serta banyak alternatif cara. Kalau  milih manual pasti capek karena musti edit satu-satu, jadi cari cara otomatis, but… ups… ketemu lagi sama edit template… jujur kalau masalah edit template musti super hati-hati. Masalahnya kalau salah kode, bisa kacau semuanya. Tapi memang kalau ga kepepet ga belajar dan ga bisa bikin tutorial gini buat bantuin temen kan? Hehe… ada manfaatnya juga dibuat kepepet. Oke, kog jadi malah curhat ya, langsung aja deh ibu-ibu simak tutorial sederhana saya dibawah ini :

1. Masuk ke www.blogger.com
2. Ketik email dan kata sandi Anda → MASUK 
   
3. Klik “TEMPLATE” 
   
4. Klik tombol "Cadangkan/ Pulihkan" di pojok kanan atas
   
    
5. Unduh template lengkap → setelah selesai mengunduh lalu tutup/close 
   
6. Klik “EDIT HTML” 
   
7. Copy kode ini   </head> (tekan Ctrl+C)
8. <script type='text/javascript'>

   var thumbnail_mode = "float" ;

   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>

9. Taruh kursor di dalam kotak “edit html” tadi. Bisa di belakang salah satu kode script → tekan Ctrl+F sehingga keluar kolom kecil untuk search kode → paste (Ctrl+V) kode </head>   → tekan Enter di keyboard Anda 
10. Setelah ketemu kode </head>  letakkan/paste kode (no.8) di atas kode </head> 

    

    Ketr.No.8-10

11. Copy kode ini <data:post.body/> dengan cara tekan Ctrl+C,  lalu cari di dalam kotak "edit html" seperti langkah no.9 . Setelah ketemu, ternyata kode tersebut tidak hanya ada 1 tapi ada 3 tempat, untuk mengetahuinya bisa tekan Enter di keyboard Anda dengan tetap menaruh kursor di samping kode itu dalam kotak search.
12. Perhatikan nomor disamping kotak edit html itu untuk mengetahui perbedaan nomor  kode yang awal dan terakhir yang sama. Disinilah rumitnya karena Anda harus coba-coba dan berhati-hati dalam mengganti kode. Pakai kode 1, 2 atau yang ke-3? Karena masing-masing template bawaan blogger beda-beda. Kalau saya pakai yang ke-2 (enter kode yang ke 2) → Delete/ hapus kode  <data:post.body/> lalu ganti dengan kode (No.13) dibawah ini : (blok kode dibawah ini dengan cara tekan Ctrl+A→ copy kode tekan Ctrl+C). 
13. <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> 
14. Paste kode (no.13) → (Ctrl+V) untuk mengganti kode  <data:post.body/> 

    

    Ketr.no.11-14

15. Klik “PRATINJAU TEMPLATE” untuk melihat hasilnya apakah tampilan blog Anda sudah menampilkan read more/ baca  selengkapnya? Cek juga judul artikel Anda. 
    
16. Jika belum berhasil, klik Edit HTML tadi lalu hapus script yang baru saja Anda tambahkan terakhir tadi, lalu ganti lagi dengan kode semula <data:post.body/> dan coba gunakan kode <data:post.body/> yang ke 3/terakhir.  Ulangi lagi dengan cara : Delete kode  <data:post.body/> lalu ganti dengan kode yang sama dengan tadi. Jangan buru-buru disimpan tapi cek dulu dengan cara klik "PRATINJAU TEMPLATE" seperti tadi.

• Jika sudah benar maka Anda boleh klik "Simpan/ Save template" → LIHAT BLOG 

Sumber : http://ittaqi-tafuzi.blogspot.com

Keterangan : 

Untuk mengatur panjang teks atau gambar yang ingin Anda tampilkan :

summary_noimg = 250; banyaknya karakter di postingan tanpa gambar

summary_img =220;     banyaknya karakter di postingan + gambar

img_thumb_height = 120; tinggi gambar

img_thumb_width = 220;  lebar gambar

Kata Read More bisa juga diganti dengan Baca selengkapnya, dll