Membuat "Baca Selengkapnya"

Berikut ini cara membuat "Baca Selengkapnya" di blog (versi baru) biar tampilan blog gak terlalu panjang:

Seperti ini....

1. Masuk ke akun blog

2.Klik Desain (pojok kanan atas blog)
 
3. Pilih Template dan pilih edit HTML

4. Setelah memilih edit HTML  akan muncul jendela baru, pilih Lanjutkan

5. Centang Expand Template Widget

6. Cari kode </head> , untuk mempermudah gunakan find dengan menekan ctrl+f.

7. Copy kan kode berikut diatas kode </head> :

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

8. Cari kode <data:post.body/> dan anti dengan 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'><b>Baca Selengkapnya</b> &#8594;<data:post.title/></a></span></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

9. Pilih Simpan template 

10. Tulisan berwarna biru bisa diganti sesuai selera

Float untuk tata letak

"Baca selengkapnya" untuk tulisan yang akan ditampilkan

summary_noimg = 250 untuk berapa banyak karakter postingan tanpa gambar
summary_img = 250 untuk berapa banyak karakter postingan dengan gambarimg_thumb_height = 120 untuk thumbnail dalam piksel (tinggi)
img_thumb_width = 120 untuk thumbnail dalam piksel (lebar)

SUMBER : lanoblog.blogspot.com