Cara Membuat Read More Otomatis

Cara Membuat Read More Otomatis. read more atau dalam bahasa indonesianya baca selengkapnya merupakan hal yang mutlak untuk dimiliki seluruh blogger. karena dengan read more dapat menambahkan statistik page view kita. read more yang saya akan terangkan pada hari ini yaitu read more yang special, kenapa saya berani mengatakan special? karena read more ini dapat mengatur berapa jumlah artikel yang akan tampil di halaman depan dan seberapa besar ukuran gambar yang tepat hingga jumlah huruf yang ingin ditampilkan. untuk membuat read more special ini sobat harus teliti mengikuti tutorial di bawah ini. silahkan baca dengan seksama   :

• Login ke Account Blogger Anda;
• Masuk ke halaman Edit HTML, lalu diatas kode </head> letakkan script di bawah ini :

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

• Cari dan ganti kode <data:post.body/> dengan semua kode dibawah 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 - <data:post.title/></a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan :
Biasanya kode: <data:post.body/> berada di bawah kode: <div class='post-body'>, maka untuk memudahkan pencarian kode tersebut gunakan tombol Find seperti penjelasan di atas.

• Simpan/Save Template, selesai.

Keterangan :

• var thumbnail_mode = "float"; : Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
• summary_noimg = 250; : Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
• summary_img = 250; : Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
• img_thumb_height = 120; : Tinggi thumbnail dalam ukuran piksel;
• img_thumb_width = 120; : Lebar thumbnail dalam ukuran piksel;
• READMORE-<data:post.title/> : Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, Anda bisa menghapus code script ini <data:post.title/>.

oh iya, tutorial ini merupakan lanjutan dari tutorial Cara Membuat Read More Untuk Template Klasik.