Pages

Cara Membuat Read More Pada Setiap Postingan Blog

Posted by Unknown Rabu, 08 Januari 2014 0 komentar
      Fungsi menu Readmore  ini untuk memotong satu sampai dua paragraf sehinngga postingan kita yang panjang hanya terlihat beberapa karakter saja. Jadi kesimpulannya jika kita ingin membaca seluruh isi postingan kita kilik "Readmore" atau pada blog saya ini klik "Selengkapnya....", dan Postingan yang lengkap akan terlihat. ... Sudah ngerti .?.... Kalau belum Silakan anda coba klik Home di blog ini, naaah..., terlihat hanya judul dan isi postingan beberapa karakter saja, ituuu... yang dimaksud dengan readmore,....
Masih bingung ? ,...  langsung saja kita praktekkan :
  • Login ke blog anda Klik DISINI, silakan isi email dan password blog anda
  • Pilih ‘TATA LETAK’
  • Klik "Edit HTML"
  • Agar aman, silakan anda Download dulu template anda (klik Download Template Lengkap), Pada bagian atas
  • (gunakan Ctrl + F) Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> klik simpan template. 
<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 Anhvo

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>
  • Beri tanda centang pada "Expand widget template"
  • Cari kode  <data:post.body/>
  • Ganti kode  <data:post.body/> dengan
<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'>READ MORE - <data:post.title/></a></span>
</b:if>
  • Simpan Template, Selesai 
Catatan :
  • var thumbnail_mode = "float"; (dapat dirubah berada di (float) kiri atau ganti dengan (no-float)
  • summary_noimg = 250; (banyak karakter yang akan ditampilkan tanpa gambar)
  • summary_img = 250; (berapa banyak karakter yang akan ditampilkan dengan gambar / thumbnail)
  • img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
  • img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
  • READ MORE = Sesuaikan dengan selera anda


    TERIMA KASIH ATAS KUNJUNGAN SAUDARA
    Judul: Cara Membuat Read More Pada Setiap Postingan Blog
    Ditulis oleh Unknown
    Rating Blog 5 dari 5
    Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://rizaltipsntriks.blogspot.com/2014/01/cara-membuat-read-more-pada-setiap.html. Terima kasih sudah singgah membaca artikel ini.

    0 komentar:

    Posting Komentar

    Cara Buat Email Di Google | Copyright of RIZAL TIPS N TRIKS.