Cara Memasang Auto Readmore di Blog

Azka trimbell | 03:52 | 0 comments

Readmore merupakan sebuah navigasi yang digunakan oleh banyak website maupun blog yang banyak memuat tulisan-tulisan berbasis berita, tutorial dan lain-lain. Readmore membuat blog terlihat lebih minimalis, readmore 'memotong' sebuah posting sehingga hanya 3 - 4 baris kalimat yang tampil yang kemudian sisa tulisan posting tersebut akan tampil jika tombol readmorenya diklik oleh reader.


Oke, untuk memasang Auto Read More, Temen - temen Blogger hanya perlu mengikuti langkah - langkah simple berikut ini :

  1. Login ke Blogger dan Langsung menuju ke Dashboard > Template > Edit HTML.(Jangan Lupa untuk Back Up Template terlebih dahulu.)
  2. Cari kode : </head>
Copy Kode di Bawah ini dan Pastekan di Bawah kode </head> tersebut :

<!-- Auto read more script Mulai -->
<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 430; //panjang tulisan tanpa gambar
summary_img = 340; //panjang tulisan dengan gambar
img_thumb_height = 200; // tinggi gambar thumbnail
img_thumb_width = 200; // lebar gambar thumbnail
</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 Berakhir -->

      3.  Lalu cari Kode : <data:post.body/> dan Ganti Dengan Kode di Bawah Ini :

<!-- Auto read more Mulai -->
<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 Berakhir -->

     5. Save Template!. Selesai.
# <data:post.body/> ada 2

Category:

Info Newz2:
Merupakan Kumpulan dan berita tentang Dunia Seputar Entertainmen Gatget INTERNET KOMPUTER Love And Sex MOZAIK Seo TRIK DAN TIPS Umum Videos Wanita World in the news !

Disclaimer:
Semua Grafis di blog ini bukanlah milik kita atau gambar apapun bukan dibawah Hak Cipta kami, Semua grafis diambil dari sumber yang berbeda, Jika ada Gambar / artikel yang menyinggung atau di bawah Hak Cipta Anda maka silakan E-mail kami ke Trimbelboy@gmail.com untuk dihapus dalam waktu 24 jam!

0 comments