Tips Membuat Readmore Pada Postingan Blog

Ada banyak cara untuk mempercantik tampilan blog, mulai menambahkan beberapa widget dan sebagainya. Namun kali ini saya akan memberikan tips membuat read more otomatis pada blog, fungsi dari readmore ini adalah untuk memperpendek artikel blog kita sehingga kita dapat menampilkan beberapa postingan di halaman utama/ beranda blog.

Berikut ini ada 2 cara menambahkan fitur readmore untuk blog :

I. Untuk menambahkan Readmore pada postingan blog kita perlu masuk dulu ke Dashboard, kemudian Design === Template===Edit HTML

Klik expand template widget.

Cari kode berikut.

</head>

Masukan kode berikut di atasnya.

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 300;
summary_img = 170;
img_thumb_height = 150;
img_thumb_width = 250;
</script>
<script src='http://panduanbelajarblog.googlecode.com/files/readmore-otomatis.js' type='text/javascript'/>

Cari kode berikut.

<data:post.body/>

Hapus dan ganti dengan kode di bawah ini.

<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>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more</b></a></span>
</b:if>
</b:if>

Klik simpan template dan selesai.

Keterangan:

   1. Download template terlebih dahulu sebagai backup jika kita mengalami kegagalan dalam proses editing.
   2. Gunakan tombol Ctrl+F pada keyboard untuk mempercepat proses pencarian kode yang kita inginkan di dalam template blog.
   3. summary_noimg merupakan jumlah karakter yang ditampilkan tanpa menggunakan gambar dalam postingan blog.
   4. summary_img merupakan jumlah karakter yang ditampilkan ketika dalam postingan blog terdapat gambar.
   5. img_thumb_height merupakan tinggi gambar yang ditampilkan.
   6. img_thumb_width merupakan lebar gambar yang ditampilkan.
   7. Kita juga dapat mengganti tulisan Read more sesuai keinginan kita.

II. Dengan Read More Gambar

1. Masuk ke Edit Template >>> Expand >>> cari kode </head>
2. Copy kode berikut ini tepat diatas kode </head>

<!-- Automatic read more script Start -->
<script type='text/javascript'>
 summary_noimg = 430;
 summary_img = 340;
 img_thumb_height = 150;
 img_thumb_width = 150;
 img_thumb_nosrc = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr1y_xijTY4fydHRFi3ow8dNxh5pLMsIQnZ8vsZ91UQN8UsPJV3RWKAwx0TooHiwfLKUSLEGCy9CM3oftT-gpweS_OfS0jQyiRh8KapX-w9rYDZyhOg6aNjkMcqTMOYD1Hm5TOaQ1Ly6Mv/s1600/default.png&quot;;
</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;

  // this block of code is used to add default thumbnail to post without images
  if(img.length<=1) {
   imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';
   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>
<!-- Automatic read more script End -->

3. Kemudian cari kode <data:post.body/>
Ganti kode tersebut dengan kode dibawah ini :

<!-- Automatic read more script Start -->
<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 style='text-align:justify;' 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'><div style="text-align: right;"><img border='0' src='http://i1307.photobucket.com/albums/s597/depermana/bluish_zps515fdacf.png'/></div></a>
</b:if>
</b:if>

<!-- Automatic read more script End -->

4. Terakhir Save template

Selamat mencoba......

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku