Cara membuat read more pada blog

Salam hangat para bloger, Pada pertemuan kali ini saya akan melanjutkan tutorial blog (agar lebih menarik). Yaitu Cara membuat read more atau baca selengkapnya pada blog. Bagaimana cara membuatnya??? oke, check it out...

1. Buka dan masuk pada akun blog anda.
2. Kemudian pilih elemen Template kemudian pilih edit HTML. Jangan lupa simpan HTML anda sebelumnya untuk berjaga-jaga apabila terjadi sebuah kesalahan pada koneksi maupun PC anda.
3. Langkah selanjutnya adalah cari kode </head>. Untuk mempercepat dalam proses pencarian tekan Ctrl+F pada keyboard anda dan akan muncul tabel search seperti pada gambar di bawah. Kemudian ketik </head> pada tabel tersebut dan enter.
   
4. Jika sudah, copy dan paste kode di bawah ini tepat di atas kode </head>.
   <script type='text/javascript'>
   var thumbnail_mode = "float" ;
   summary_noimg = 275;
   summary_img = 275;
   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 = 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>
5. Kemudian cari kode <data:post.body/> jika sudah ketemu, copy dan paste kode di bawah ini persis di bawahnya. Dikarenakan kode <data:post.body/> banyak sekali, cari pada nomor urut 2 pada pencarian anda  (itemprop='description articleBody')
   
   <b:if cond='data:blog.pageType != "item"'>
   <div expr:id='"summary" + data:post.id'><data:post.body/></div>
   <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
   <div class='readmore-link'><span class='arrow'>›</span> <a expr:href='data:post.url'>Read More</a></div>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
6. Jika sudah, simpan dan lihat hasilnya. Mantaaaapppp.....

Sebagai tambahan dari saya, bahwa sebenarnya kode HTML atau Javascript di atas bisa anda ubah sesuai keinginan anda. misal anda ingin membuat thumbnail-nya lebih besar. maka anda ubah kode img_thumb_height = 120. Ganti angka 120 tersebut dengan angka sesuai selera anda. Begitu juga dengan kode img_thumb_widht = 120 anda ganti juga angka 120 tersebut dengan angka sesuai selera anda.

Saya kira sudah cukup penjelasan saya mengenai Cara membuat read more atau baca selengkapanya pada blog. Semoga artikel saya kali ini sangat membantu dan bermanfaat buat anda. Dan pada pertemuan berikutnya saya akan membahas Cara membuat artikel terkait/releated post di bawah posting pada blog.

Apabila ada pertanyaan kritik ataupun saran bisa anda coret-coretkan pada tabel komentar di bawah. Wassalam Wr Wb dan salam sukses selalu.