Pertama menemukan cara membuat auto readmore di tempatnya o-om. Pertama kali membaca aku tidak tertarik karena kegagalan membuat readmore sebelumnya. Tapi ternyata aku yang dodol ini"berhasil..berhasil...berhasil". Sebenarnya apa bedanya auto readmore dengan readmore biasa?
Auto readmore lebih istimewa karena kita tidak perlu memenggal paragraf dan meletakkannya di atas fullpost sisanya di bawah fullpost seperti readmore pada umumnya. Dengan menggunakan auto readmore secara otomatis readmore akan terbentuk. Jumlah karakter yang tampil di halaman pertama bisa diatur, mau 250 boleh, 500 juga boleh, terserah deh mau berapa aja.
Kelebihannya lagi, auto readmore juga menampilkan gambar postingan meski kita meletakkannya di tengah atau di bagian akhir artikel.
Buat yang sudah mengatur readmore versi lama harus dihapus dulu. Caranya hapus kode yang tercetak merah di bawah ini
<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;'/>
Kalo udah beres lanjutkan ke tahap selanjutnya. Masuk ke edit html cari kode </head> kodenya ada di tengah agak ke bawah, paste kode berikut ini di atas kode </head>
Ini dia kode yang harus dicopy lalu dipaste
<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>
Jangan lupa simpan
Masih di edit html, centang pada "Expand widget template". Temukan kode <data:post.body/> hapus, ganti 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 == "item"'><data:post.body/></b:if>
Keterangan
1 var thumbnail_mode = "float" ; letak thumbnail/gambar berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
2 summary_noimg = 250; Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail
3 summary_img = 250; Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail
4 img_thumb_height = 120;Thumbnail 'tinggi dalam piksel
5 img_thumb_width = 120;Thumbnail 'lebar dalam piksel
READ MORE - membuat auto readmore
Auto readmore lebih istimewa karena kita tidak perlu memenggal paragraf dan meletakkannya di atas fullpost sisanya di bawah fullpost seperti readmore pada umumnya. Dengan menggunakan auto readmore secara otomatis readmore akan terbentuk. Jumlah karakter yang tampil di halaman pertama bisa diatur, mau 250 boleh, 500 juga boleh, terserah deh mau berapa aja.
Kelebihannya lagi, auto readmore juga menampilkan gambar postingan meski kita meletakkannya di tengah atau di bagian akhir artikel.
Buat yang sudah mengatur readmore versi lama harus dihapus dulu. Caranya hapus kode yang tercetak merah di bawah ini
<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;'/>
Kalo udah beres lanjutkan ke tahap selanjutnya. Masuk ke edit html cari kode </head> kodenya ada di tengah agak ke bawah, paste kode berikut ini di atas kode </head>
Ini dia kode yang harus dicopy lalu dipaste
<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>
Jangan lupa simpan
Masih di edit html, centang pada "Expand widget template". Temukan kode <data:post.body/> hapus, ganti 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 == "item"'><data:post.body/></b:if>
Keterangan
1 var thumbnail_mode = "float" ; letak thumbnail/gambar berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
2 summary_noimg = 250; Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail
3 summary_img = 250; Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail
4 img_thumb_height = 120;Thumbnail 'tinggi dalam piksel
5 img_thumb_width = 120;Thumbnail 'lebar dalam piksel
