21 Oktober 2009

Read More Otomatis ( Auto Read More )


Sobat semua pasti dah tahu banget yang namanya read more. Biasanya blog / website menggunakan  read more untuk menyingkat posting artikel agar terlihat rapi. Banyak sekali versi read more. Yang akan saya share kali ini adalah read more yang secara otomatis bisa mengatur tampilan. Yang dimaksud di sini yaitu kita tidak perlu bersusah payah memotong artikel yang akan di tampilkan di depan. Tetapi sudah otomatis terpotong berdasarkan jumlah karakter yang dapat kita setting sendiri. Ga seperti read more yang lain yang harus memotong secara manual, tetapi program ini dah bekerja otomatis. Ada lagi fasilitas yang lain yaitu  mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungkin lebih tepatnya image thumbnail. Tidak hanya itu masih banyak fasilitas lainya.

Ga usah muter muter langsung aja ke TKP. 
Oya bagi sobat semua yang sudah terlanjur menggunakan read more versi lama / manual sebaiknya templete di kembalikan seperti semula kayak waktu masih perawan gtu..hehehe..
Bingung caranya? Ya udah gini aja. masuk ke EDIT HTML, Cari kode seperti 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'&gt;Readmore</a>
</b:if>
<div style='clear: both;'/>



Lalu hapus kode yang berwarna merah. Setelah itu di save.


Masih di halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas 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>



Jangan lupa di save.
Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua 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'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


silahkan disimpan dan lihat hasilnya :)

Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Semoga bermanfaat.






14 komentar:

darkfarmer on 22 Oktober 2009 09.47 mengatakan...

wah... harus dicoba nih script2 nya..
praktek dl ah..

thanks
Darkfarmer

Munir Ardi on 22 Oktober 2009 12.41 mengatakan...

nice info saya akan coba di blog baru saya

RAJA FRESH on 22 Oktober 2009 15.57 mengatakan...

template saya kok gak bisa dipakein read more ya

Seri Bahasa on 22 Oktober 2009 16.28 mengatakan...

kodenya banyak banget sob takut nanti seri keliru hehehe. seri mahu coba ini seri readmore ngak berfungsi.

dhizzoft on 22 Oktober 2009 17.06 mengatakan...

@:Raja Fresh iya read more ini berlaku untuk templete baru..aplikasi yang udah jadi yang di blog saya ini udah pake readmore ini
@:Seri kan cuma tinggal copy paste jadi biar ga keliru

Berry Devanda on 22 Oktober 2009 17.31 mengatakan...

berguna sekali infonya mas...
tapi kok panjang banget?

internet jaga otak on 22 Oktober 2009 17.32 mengatakan...

... oh gitu toh scriptnya, jadi gak prlu pake div class fulpost yaahh.. ok, makasih infonya sob

Rizky2009 on 22 Oktober 2009 20.28 mengatakan...

scripnya sama dengan yang aq pasang, cuma kayanya ini lebih rumit, meskipun sulit ini adalah tantangan yg harus bisa d taklukkan.. sip dah...

dhizzoft on 22 Oktober 2009 20.38 mengatakan...

@ semuanya : walaupun rumit dan panjang tapi kalau pemasangany bener pasti bisa berjalan..contohnya blog ini menggunakan script itu..dan yang penting ga memberatkan loading blog

secangkir teh dan sekerat roti on 22 Oktober 2009 22.49 mengatakan...

mantep...!
ada contohnya mas?

dhizzoft on 22 Oktober 2009 23.24 mengatakan...

@ secangkir teh dan sekerat roti contohnya blog ini sudah menggunakan read more tersebut

Hatake on 23 Oktober 2009 15.48 mengatakan...

OK deh,,
ni tips agar diterima adsense:

Cara Mudah agar diterima google adsense

shidiq on 24 Oktober 2009 05.42 mengatakan...

Top MArkotob trik nya .....

Dr. Agung on 2 November 2009 14.26 mengatakan...

o begitu Bro, tips yang bagus

visit me ya http://baliflash.blogspot.com tks


Posting Komentar

 

Gabung Yuk