CARA MEMBUAT READMORE OTOMATIS |informasi apa saja

Kamis, 03 Juni 2010

CARA MEMBUAT READMORE OTOMATIS

6/03/2010 02:26:00 AM |

Diposting oleh Unknown |

Bila anda ingin membuat halaman depan blog anda lebih teratur dan dapat menampilkan lebih banyak artikel tanpa harus di lihat dengan menggerakkan scrol yang panjang yang dapat membuat bosan dan malas untuk membaca artikel lainnya. maka saya sarankan anda untuk memasang readmore tomatis yang hanya dilakukan sekali saja, selanjutnya posting yang anda kirim akan otomatis terpotong sesuai kenginan kita

Untuk read more otomatis ini, dibutuhkan kode javascript yang sebenarnya bisa sobat simpan sendiri di tempat biasa sobat menyimpan file secara online. Namun kali ini script read more diletakkan langsung di template tanpa menggunakan hosting untuk mencegah errror saat hosting yang kita gunakan untuk menyimpan kode script-nya sedang down.

Buat blogger baru, saya sarankan menggunakan read more otomatis saja ketimbang read more yang biasa. Karena tentunya sobat tidak akan repot membagi 2 postingan sobat dengan kode manual.

Berikut langkah – langkah dalam membuat read more otomatis :

login ke blogger terlebih dahulu.
Klik Tata Letak.
Kemudian klik Edit HTML.
Centang Expand Template Widget.
Copy kode berikut ini lalu paste tepat diatas kode </head> :

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </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>

Untuk yang sudah pernah menggunakan read more versi lama (manual), sebaiknya anda kembalikan dulu kodenya seperti semula. Hapus kode yang saya tandai dengan warna oranye di bawah ini, sesuaikan dengan template sobat, karena setiap template berbeda - beda :

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

sehingga sekarang hanya ada satu <data:post.body/>
Kemudian hapus kode : <data:post.body/> atau <p><data:post.body/></p>
Ganti kode tersebut dengan kode berikut 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>

Kemudian Simpan Template.

Keterangan tulisan berwarna biru :

summary_noimg = 450 –-> untuk tinggi postingan tanpa gambar.
summary_img = 360 –-> untuk tinggi postingan dengan gambar.
img_thumb_height = 120 –> tinggi gambar.
img_thumb_width = 150 –> lebar gambar.
Read More… –> bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.

Silahkan anda atur sesuai dengan template anda. Selamat berkreasi. semoga bermanfaat dan jangan bosan untuk berkunjung kemari