Cara membuat/memasang Read More di Blog

Hallo sobat Blogger sekalian, kali ini NGEBLOG™ kasi tips Cara membuat/memasang Read More di Blog.

Sebelumnya cara lama untuk untuk membuat Read More blog dengan cara menambahkan tag dan setiap kali kita posting di blog yang dinilai Blogger terlalu rumit dengan segala keterbatasanya. Berikut ini Cara membuat/memasang Read More di Blog yang mudah untuk membuat Read More Otomatis dengan Thumbnail di Blogger seperti halnya yang saya gunakan pada Blog Sederhana Saya ini.

• Silahkan Login ke Blogger


• Klik Rancangan >>  Edit HTML


• Centang Expand Template Widget


• Cari kode ini </head> 


• Lalu Letakkan kode dibawah ini sebelum kode ini  </head>

<script type='text/javascript'>

      var thumbnail_mode = "float" ;

      summary_noimg = 250;

      summary_img = 250;

      img_thumb_height = 120;

      img_thumb_width = 120;

      </script>





      <script type='text/javascript'>

      //<![CDATA[

      /******************************************

      Auto-readmore link script, version 2.0 (for blogspot)



      (C)2008 by Fais



      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>



Jika sobat bloger ingin merubah ukuran read more nya, sobat ubah saja di bagian bagian kode di bawah ini. Ubah angka nya sesuai kebutuhan :



      summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar

      summary_img = 340; adalah tinggi potongan artikel dengan gambar

      img_thumb_height = 100; adalah ukuran tinggi thumbnail

      img_thumb_width = 120; adalah ukuran lebar thumbnail



Langkah selanjutnya cari kode <data:post.body/>  lalu ganti tag <data:post.body/> tersebut dengan kode script di bawah ini :



<b:if cond='data:blog.pageType != "item"'>

      <div style=' text-align: justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>

      <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>

      <span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>

      </b:if>

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

• Simpan Template