Blogermie.com: Cara Buat Readmore Terbaru (2)

25 September 2011

Cara Buat Readmore Terbaru (2)

Setelah saya mengulas tentang cara Buat readmore pada postingan pertama menggunakan Fitur Jump Break. Kali ini sedikit akan saya ulas mengenai Pembuatan Readmore Otomatis menggunakan "Script readmore". Fitur readmore otomatis ini berhasil saya dapat dari mengoprek template blog readmore "Cupid Blogger Template by DheTemplate" yang saya pergunakan untuk template blog ini

read more blog

Fungsi Read More ini mampu menampilkan gambar pertama dalam postingan dan menggeser gambar tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. atau yang lebih dikenal dengan sebutan Image Thumbnail

Dengan menggunakan Script readmore ini, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang di ikut sertakan dalam postingan dan yang kedua jumlah karakter yang tersedia tanpa image.

Nah, tanpa basa-basi Berikut Tutorialnya:

Langsung copy paste aja kode dibawah ini: tepatnya dibawah kode ]]></b:skin>
<script type='text/javascript'>
summary_noimg = 350;
summary_img = 250;
img_thumb_height = 50;
img_thumb_width = 50;
</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>

Keterangan:
  • summary_noimg = 350; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
  • summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
  • img_thumb_height = 50; (Thumbnail 'tinggi dalam piksel)
  • img_thumb_width = 50; (Thumbnail 'lebar dalam piksel)

  • Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini
<p>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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 class='readmorecontent'><a class='readmore' expr:href='data:post.url'>Read More &#187;</a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if></p>
  • Untuk menambah Style Readmore-nya, anda boleh menambahkan kode  ini tepat diatas kode ]]></b:skin> atau ubah atau hapus setelan <div class='readmorecontent'> pada Kode <data:post.body/> jika itu dianggap perlu


.readmorecontent{text-align:right;margin-top:5px;}

a.readmore{padding: 5px;font:12px arial,Helvetica,Sans-serif;
background: #fff;
border: 1px solid #F2F2F2;
-moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

a.readmore:hover{background:#E6E6E6;text-shadow:0px 1px 2px  #555;}


  • Klik Preview terlebih dahulu sebelum menyimpan
Selamat Mencoba

   Incoming search term : read more,membuat read more di blogspot,cara membuat read more pada blog,cara membuat read more di blogspot,cara membuat read more di blogger,cara membuat read more di blog,read more blogspot,cara buat read more,membuat read more di blog,auto read more,membuat read more pada blog,cara buat read more di blogspot,buat read more,cara buat read more di blog,membuat read more pada blogspot,cara membuat read more,cara membuat read more pada blogspot,read more di blogspot,membuat read more di blogger,cara membuat read more pada blogger,read more blog,membuat read more pada blogger,cara membuat read more otomatis,cara bikin read more,cara buat read more di blogger,read more di blog,membuat read more otomatis,membuat read more blogspot,read more otomatis,read more pada blog,auto read more blogger,read more pada blogspot,
read more pada blogger,read more di blogger,membuat read more blogger,cara read more,membuat read more blog,buat read more di blogspot,cara menambahkan read more pada blog,cara memasang read more,cara memberi read more pada blog,cara membuat auto read more,bikin read more di blogspot,cara membuat read more blogspot,bikin read more,membuat auto read more,cara buat read more otomatis,cara membuat read more blog,cara pasang read more,cara bikin read more di blogspot,script read more,cara buat read more pada blog,buat read more di blog,menambah read more pada blog,pasang read more,cara memasang read more di blog,cara pasang read more di blog,cara menambah read more pada blog,cara membuat read more dalam blog,cara membuat read more blogger,memasang read more,buat read more otomatis,cara read more blogspot,
Judul: Cara Buat Readmore Terbaru (2); Reviewer By: Heru Prasetyo; Rating Blog: 5 dari 5
Heru Prasetyo Blogermie.com Updated at: 9/25/2011 01:21:00 PM

1 komentar:

  1. Bro, yang script yang "Langsung copy paste aja kode dibawah ini:" taruk dimana?

    BalasHapus