Cara Membuat Simpel Read More (Baca Selengkapnya) by Unieqx

Cara Membuat Simple Readmore atau Baca Selengkapnya by Unieqx ~ Jika anda bertanya, Sebenarnya apa fungsi dari read more atau baca selengkapnya? Kata para master SEO (Search Engine Optimized), read more adalah salah satu syarat agar blog kita terlihat baik di mata Google. Apabila blog kita memenuhi syarat dari seo, maka blog kita akan terangkat di pencarian Google dan tentunya akan banyak pengunjung yang datang.

Untuk masalah optimasi blog, anda bisa mencarinya sendiri. Bagaimana agar blog kita berada di urutan pertama pencarian Search Engine. Dan kali ini saya ingin berbagi tips, bagaimana cara membuat read more atau baca selengkapnya dengan simple. Ikuti langkah demi langkahny.

Langkah-langkah Membuat Read More :

1. Login ke Dashboard Akun Blogger anda,
2. Setelah itu pergi ke Template
3. Back up template anda, fungsinya agar saat terjadi kesalahan saat mengedit kita bisa mengembalikaanya seperti semula. Caranya pilih Cadangkan/Pulihkan > Download Template.
4. Setelah selesai menyimpan back up-an kemudian klik Edit HTML,
5. Cari source code </head>, gunakan CTRL+F untuk memudahkan pencarian,
6. Copy code berikut dan paste tepat diatas kode </head>,

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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(thumbnail_mode == "yes") {
 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>
<!-- Auto read more script End -->

     7.  Kemudian gunakan CTRL+F lagi untuk mencari kode :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<data:post.body/>
</b:if>

atau kalau tidak ada, cukup code <data:post.body/> yang anda cari, kemudian ganti dengan kode di bawah ini :

<!-- Auto read more Start -->
<!-- http://unieqx.blogspot.com/ -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&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>
<a class='more' expr:href='data:post.url'>Baca Selengkapnya ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

     8.  Kemudian klik Pratinjau untuk melihat hasilnya,
     9.  Jika sudah benar, klik Simpan Template. Contohnya sebagai berikut :

Setting untuk Snippet 

Anda dapat mengubah settingan read more diatas dengan mengubah nilai variabel di bawah ini :

1. thumbnail_mode - Set ke 'yes' jika Anda ingin menampilkan thumbnail dengan ringkasan teks. Dan set 'no' jika hanya ingin menampilkan ringkasan text saja.
2. summary_img - Menentukan jumlah karakter (termasuk spasi) sesuai keinginan anda, dengan gambar thumbnail.
3. summary_noimg -Menentukan jumlah karakter (termasuk spasi) tanpa gambar tumbnail.
4. img_thumb_height - Untuk mengatur tinggi gambar di posisi thumbnail.
5. img_thumb_width -Untuk mengatur lebar gambar thumbnail.
6. Anda juga boleh mengubah text "Baca selengkapnya . . ." sesuai anda.

Sekian tips dari saya, semoga membantu. Terima kasih telah berkunjung untuk membaca Cara Membuat Simpel Read More (Baca Selengkapnya) by Unieqx. Semoga Berhasil!!