Memasang Read More pada Postingan

Read Mode berfungsi untuk menyusutkan atau mengecilkan atau menampilkan sebagian isi artikel. Tidak semua akun blogger terdapat read more otomatis, seperti di bawah ini

jika akun blog anda terdapat fasilitas demikian, maka untuk menambah read more pada postingan tinggal mengklik button tersebut.

Jika ternyata tidak ada. anda masih bisa menambahkannya dengan cara manual. Yaitu dengan menuliskan secara manual kode ini <div class="fullpost">teks anda</div> atau <span class="fullpost">teks anda</span>

tapi sebelumnya anda haruslah mensetting template blog anda dengan langkah-langkah berikut ini:

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget "

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head>Kalo sudah, jangan lupa di simpan terlebih dahulu.

Kodenya:

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

Lalu, carilah kode seperti di bawah ini:

<data:post.body/>

ganti kode <data:post.body/> dengan kode di bawah 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>

untuk tulisan READ MORE yang berwarna biru muda bisa anda ganti sesuka hati.

Setelah itu simpan template dan lihat efeknya...

Gimana?

Mudah bukan?

SELAMAT MENCOBA.."

sumber: forantum.blogspot.com