ReadMore otomatis Blogspot

Kalau pada postingan yang lalu sudah saya share cara membuat readmore pada blogspot untuk versi yang manual, sekarang saya akan share membuat readmore otomatis,memang untuk pembuatan readmore otomatis ini cenderung agak susah, tapi keuntungannya pada saat kita posting tidak harus mengatur bagian mana yang harus kita penggal.

keuntungan lain adalah readmore otomatis ini dilengkapi thumbnail picture yang ada dalam postingan kita. langsung saya ikuti langkah dibawah ini untuk membuatnya :

PENTING! bila blog ada sudah memakai readmore versi lama, anda harus menghapus code readmore yang lama terlebih dahulu.


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


Lihat kode diatas, kode yang berwarna merah adalah kode yang perlu anda hapus. Setelah anda hapus ikuti langkah selanjutnya...







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




Copy kode di atas dan paste code tersebut di bawah code </head> dan save

kemudian cari code <data:post.body/> dan ganti dengan code 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>>


Keterangan :

thumbnail_mode var = "float", (lokasi letak thumbnail (float) kiri/kanan, atau jika tidak, silahkan mengubah (no-float)
summary_noimg = 250; (Menentukan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menentukan berapa banyak karakter akan ditampilkan di pos dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat mencoba ..

Baca Juga Artikel menarik di bawah ini :

0 comments to "ReadMore otomatis Blogspot"

Post a Comment

Donasi buat KotaTahuku

Merasa Blog ini bermanfaat ? Dukung blog ini dengan sedikit donasi dari anda..

Mungkin Yang Anda Cari

Avail Bisnis

Obrolan Santai


RecycleBlog