Memasang Auto ReadMore Terbaru

Di artikel ini saya akan sedikit berbagi informasi bagaimana caranya memasang auto readmore terbaru di blog sobat. Kebetulan juga teman saya masih baru di blogger (newbie) pengen tahu tips ini soalnya dia merasa kurang rapi untuk tampilan contentnya, maka dari itu saya buat artikel ini dan semoga bermanfaat juga bagi newbie yang lainnya.

Kelebihan dari auto redmore terbaru ini adalah script yang tersedia bisa langsung menampilkan gambar pertama dari isi artikel secara otomatis di halaman utama.

Untuk cara pemasangannya tidaklah susah atau simple saja.

Bagi yang sudah menggunakan auto readmore versi lama atau tradisional, ikuti langkah berikut ini :
Jika sobat sama sekali belum pernah memasang autoreadmore, langsung saja ke langkah 2.

Langkah 1
Hapus autoreadmore terlebih dahulu atau dikembalikan seperti semula, caranya cukup menghapus kode yang sudah diberi tanda highlight.

<div class='post-header-line-1'/>
<div class='post-body'>
<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/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Langkah 2

Masuk ke Edit HTML kemudian cari tag </head> biar lebih gampang tekan tombol Ctrl+F dan tuliskan tag yang sobat cari. Jika sudah ketemu copy script di bawah ini tepat di atas tag </head> tersebut.

<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[
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>

Langkah 3

Setelah melakukan langkah tersebut, centang Expand widget templates di bagian kanan atas halaman textarea. Lalu temukan kode seperti ini <data:post.body/>.

Jika sudah ketemu, ganti kode tersebut dengan kode yang ada di bawah ini :

<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>
<span class='rmlink' style='float:left'>
<a expr:href='data:post.url'>Readmore »</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>

Simpan template anda kemudian lihat hasilnya.

Good Luck...!!!!!!!!!!!

Gabung ke group:

Follow @aditya_m_r

Share