Cara Membuat 'Read More'

Menurut penulis, read more merupakan bagian yang penting dalam sebuah blog. Fungsinya bukan cuma sebagai gaya-gayaan atau ikut-ikutan keren dengan tampilan 'baca selengkapnya' / 'read more' seperti punya blogger yang lain (awalnya sih penulis mikirnya gitu), tapi ternyata banyak hal dan keuntungan lain. Salah satunya adalah untuk menghemat 'load page' bagi yang mau mengunjungi blog kita. Dengan adanya 'read more', tulisan yang tampil akan disingkat dengan hanya memperlihatkan sebagian kecil dari tiap tulisan yang ada (view). Nah, bagi yang menggunakan net yang 'limited', akan jadi lebih hemat. Bagi yang 'unlimited' tapi lemot, maka 'page' yang ingin dibuka jadi cepet ter'load'. Dan kalau yang 'unlimited' dan kenceng 'load'nya, hantam aja. Hehe.

Langsung saja. Read more dapat dibuat manual, dapat juga secara otomatis (bagi yang malas untuk mengaturnya di setiap post). Keduanya punya kelebihan dan kekurangan masing-masing. Kelebihan manual adalah anda dapat mengatur apa saja atau sebanyak apa tulisan yang tampil di halaman view namun tampilannya jadi tidak rapi karena tampilan viewnya tidak akan berukuran sama. Kalau otomatis, anda tidak dapat mengatur apa saja yang tampil di halaman view karena sudah ditentukan secara otomatis, tapi tulisan akan terlihat lebih rapi. Let's check it out! 

I. Read More Manual

Nah, sebenarnya read more itu sudah ada pada pengaturan blog dasar (kalo dulu sih belom ada : ini ceritanya). Jadi, apapun template dasar yang digunakan, akan bisa membuatnya secara langsung.

Caranya:

1. Buka dulu menu untuk membuat 'entri baru' pada blog anda.
2. Selanjutnya buat tulisan yang ingin di 'post'kan
3. Lalu atur manual 'read more'nya dengan cara klik icon 'kertas robek'  atau icon dengan tanda a pada gambar di bawah. Setelah itu akan muncul garis batas seperti yang ditunjukkan huruf b pada gambar di bawah.
   
   
4. Garis batas tersebut punya arti, yaitu semua yang berada pada bagian atas garis pembatas akan tampil pada 'page view' dan yang berada pada bagian bawah akan terbaca bila pembaca menglik 'read more'. Dan garis itu dapat anda pindah-pindah ke mana pun dengan cara men'drag'nya (klik, tahan, lalu geser kursor) ke tempat yang diinginkan.
5. Selesai!
   

II. Read More Otomatis

Kalo yang otomatis, ada 2 bagian juga yaitu dengan ikut menampilkan gambar, atau hanya menampilkan tulisan saja.

SARAN SAYA : Sebelum mengutak atik templates, HARAP KODE TEMPLATES LAMA DI BACK UP DEMI KEAMANAN!

Nah, kali ini agak sulit, cuma anda tak akan kecewa dengan hasilnya. Saya mengambil sumbernya dari sini.

1. Buka dashboard, klik Rancangan (a), lalu pilih edit HTML (b), dan contreng tulisan Expand Widget Templates (c).

   

   (a)

   

   (b)

   

   (c)

2. Cari kode </head> . Bisa ditemukan dengan CTRL+F dan ketik </head>.
3. Setelah bertemu, tepat di ATASnya letakkan kode javascript berikut:
   
   <script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>
4. Lalu cari kode <data:post.body/> atau <p><data:post.body/></p>.
5. Setelah itu ada 2 pilihan 
   • Dengan menampilkan gambar yang ada pada view.
     
     • hapus kode no 4 dan ganti dengan :
       
       <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 style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>

       
   • Hanya menampilkan tulisan saja pada view.
     
     • hapus kode no 4 dan ganti dengan
       
       <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 style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>
       
   
   
6. Simpan templates dan lihat hasilnya

Bagi yang sudah terlanjur menggunakan read more secara manual lama (mungkin sudah tak ada lagi yang make, tapi sebagai pemberitahuan) Maka, temukan code seperti di bawah ini :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

Dan gantilah dengan kode sesuai pilihan yang ada diatas, dapat menggunakan cara 1 maupun cara 2. Semoga berhasil dan selamat ngutak-atik template. Hehe

Free Template Blogger collection template Hot Deals SEO