Find What You Need

3 Mar 2010

Memasang Readmore Otomatis Dengan Javascript

Kembali soal Readmore, tapi kali ini kita akan memasang readmore yang bekerja secara otomatis Untuk memasang readmore otomatis terlebih kita harus menghapus versi readmore terdahulu,  bagi kita yang sudah memasangnya. Mungkin kita tidak usah membahas cara menghapus 2 versi readmore terdahulu, yaitu Readmore di Template Classic dan Readmore di template Baru , karena anda-anda pasti sudah tahu caranya. Sebagai gambaran saja, untuk menghapus readmore yang lama kebalikan dari cara memasangnya.

Dengan memasang Readmore Otomatis, kita tidak usah lagi memenggal kalimat dengan memasukkan  " Insert Jump Break " Lagi , Karena secara otomatis nantinya akan dipenggal sendiri .

Langsung saja kita ke cara memasang readmore Otomatis .
Sigin di draft blogger
Dalam dasbor masuk Tata letak --> Edit HTML
Centang Expand Template Widget
Readmore otomatis ini menggunakkan kode javascript, jadi copy kode javascript dibawah ini :


<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 300;
summary_img = 250;
img_thumb_height = 50;
img_thumb_width = 50;
</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+'" /></span>';
summ = summary_img;
}

var summary =  imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Paste kan diatas kode ini </head>, Silahkan di save dulu .

Sekarang Cari kode ini :
<p><data:post.body/></p>
biasanya disimpan diatas ini <!-- clear for photos floats -->
Ganti kode <p><data:post.body/></p> dengan kode dibawah ini :


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id' style='text-align: justify;'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a expr:href='data:post.url' style='float:right;padding-top:10px;'>[Read More...] - <data:post.title/></a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
</b:if>

Jangan lupa jika beres memasukkan kode diatas di save.

Sedikit penjelasan :

var thumbnail_mode = "float";  ( float: letak thumbnail berada di  kiri atau jika tidak silahkan ganti dengan " no-float " ).
summary_noimg = 300; (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 = 50; (tinggi Thumbnail dalam pixel)
img_thumb_width = 50; ( lebar Thumbnail dalam pixel)

Kemudian jika kita ingin menghilangkan judul post didepan Readmore, tinggal menghapus kode ini :
<data:post.title/>

Silahkan sesuaikan yang menurut anda cocok dengan lebar template anda.



**** Semoga Bermanfaat ****

Untuk mendapatkan informasi dan postingan terbaru dari blog ini, silahkan ketikkan email anda di form berlangganan. Gratiiiis...

Berlangganan Lewat RSS

7 komentar:

FaiK Fauzi MuLaCheLLa Pada 11 Maret 2010 pukul 23.54 mengatakan...

mantap Gan... Akhirnya ketemu juga cara untuk justify code ini....

syukron ya....

salam kenal....

Albaniyu Pada 12 Maret 2010 pukul 10.26 mengatakan...

Sama-sama, salam kenal juga dan makasih sudah berkunjung keblog ku...;)

khazo Pada 6 Agustus 2010 pukul 19.17 mengatakan...

mksh gan skrg blog q sdh bs pake readmore ente thanks bgt ych..
i love your bloggggggggg :x

rudy Pada 25 Agustus 2010 pukul 06.09 mengatakan...

terima kasih atas info bagusnya...........

chukie666 Pada 2 November 2010 pukul 13.33 mengatakan...

ini baru yang ane cari2 selama ini ... ;)

Halo Balita | BelajarTahu Pada 27 Januari 2011 pukul 11.10 mengatakan...

sip artikelnya
thanks justify nya !!

Anonim mengatakan...

Muantaap bro informasinya, sangat transparan dan detailnya mantap sehingga bisa belajar membuat template sendiri.

Posting Komentar

Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.

Ketikkan Karakter Jika Ingin Memasang Emoticon.
:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*:|8-}~x(:-tb-(:-Lx(=))

Artikel Yang Lainnya

 

My Best Friend

Mengenai Saya

Foto saya
Sebagai tempat belajar dan menyimpan arsip jika saya membutuhkannya suatu waktu, dan semoga menjadi ilmu yg Bermanfaat bagi Orang yang membacanya .

Visitor

free counters

Belajar Bersama Copyright © 2009 Template Wanaking Di Desain Ulang Oleh Albaniyu | Blogger Template