Monday, July 27, 2009

Cara mudah membuat read more di Blogspot Classic

Cara berikut akan membuat Auto Readmore Blogspot disertai dengan image thumbnail yang bisa kita atur sendiri. Mending langsung praktek ajah : Ikuti langkah2 berikut : 1. Login ke dashboard di blogspot Anda, pilih tata letak kemudian edit html 2. Temukan kode ini </head> 3. Copy paste kode di bawah ini tepat di atas tag </head> tadi, lalu simpan/save

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

Jika sudah, ikuti petunjuk selanjutnya : 1. Sekarang Anda klik pada checkbox Expand Template Widget 2. Temukan kode ini <data:post.body/>3. Ganti ato Timpa kode tersebut dengan kode dibawah ini, lalu jangan lupa simpan/save

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

Kita bisa mengatur tampilannya sesuai dengan keinginan kita dengan mengubah sedikit script yg berwarna merah tersebut :

var thumbnail_mode = “float” ; silakan anda ubah kata ‘float’ dengan kata ‘no-float’ jika tidak ingin menampilkan thumbnail

summary_noimg = 250; silakan Anda ganti angka tersebut untuk mengatur berapa banyak karakter yg akan tampil jika tidak terdapat image untuk ditampilkan dalam postingan Anda.

summary_img = 250; jumlah karakter yg akan ditampilkan jika postingan Anda terdapat image dan secara otomatis akan ditampilkan di halaman depan

img_thumb_height = 120; tinggi image thumbnail dalam satuan pixel
img_thumb_width = 120; lebar image thumbnail dalam satuan pixel

<span style=”float:left; padding:0px 10px 5px 0px;”> silakan ganti kata ‘left’ menjadi ‘right’ jika image thumbnail ingin tampil pada sebelah kanan postingan Anda.

READ MORE – <data:post.title/> silakan ganti sesuai dengan selera Anda, misal menjadi ‘Baca selengkapnya ‘ dan Anda bisa menghilangkan tag <data:post.title/> jika tidak ingin menampilkan judul postingan pada link Auto Readmore.

0 comments:

Template by : kendhin x-template.blogspot.com