Cara Membuat Readmore Otomatis Tanpa JS External

Pada postingan hitsuke sebelumnya Membuat Readmore Otomatis, hitsuke mengalami suatu masalah yaitu hosting javascript file yang kehabisan bandwidth. Pada saat itu ancur dah blog Q ini coz semua javascript q yg di hosting di Yahoo sudah EXPIRED. Hari itu Q mulai mencari solusinya, dan yang paling penting ialah Readmore nya donk di banding javascript yang lain.Awalnya hitsuke mencoba hosting file javascriptnya di Google Pages tapi ternyata sama halnya dengan Yahoo, karena suatu alasan yang tidak jelas Google juga akan menutup Free File Hostingnya di Google Pages. Akhirnya Q mulai mungut informasi dari Google dan Menemukan Cara Membuat Readmore otomatis yang menggunakan javascript (JS) Internal ini.

( Info tambahan neh bagi sobat yang mau meng-Upload file-filenya secara gratis klik di Daftar Situs Tempat Meng-Upload file GRATIS..!!! )

Ok langsung kita mulai tutorialnya

1. Seperti biasa Login dulu di Blogger

2. Pada Dashboard pilih Layout kemudian Edit HTML

3. Sebelum na Neh ada pesan dari O-om

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

<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;'/>

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

4. Cari kode </head> kemudian letakan kode script di bawah ini sebelum kode </head> tadi.

Langsung copy paste aja kode dibawah 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[

/******************************************

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>

5. Masih pada halaman EDIT HTML , Beri tanda centang pada "Expand widget template" lalu temukan kode seperti ini <data:post.body/> (gunakan CTRL+ F untuk mempermudah setiap pencarian kode)

6. Klo sudah ganti kode <data:post.body/> tadi 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'>READ MORE - <data:post.title/></a></span>

</b:if>

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

7. silahkan disimpan (SAVE) dan lihat hasilnya ^_^.

Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di ( float) kiri atau jika tidak silahkan ganti dengan (no-float )

summary_noimg = 250; (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 = 120; (Thumbnail 'tinggi dalam piksel)

img_thumb_width = 120 ; (Thumbnail 'lebar dalam piksel)

Selamat Mencoba..!!