Cara Membuat Readmore Otomatis Tanpa JS External

Hari ini saya akan posting tentang Cara Membuat Readmore Otomatis Tanpa JS External

( Info 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..!! 

Sumber : hitsuke