TopBottom

Blog Tutorial

About Me

Add your donation here for a better of our service. Thanks!

Berlangganan

Anda Suka Tips Blogger Zacky?
Temukan Kami Di:
Ingin Dapat Artikel Terbaru?
rss Klik disini untuk berlangganan melalui RSS atau terima artikel di email anda dengan cara mengisi form berikut:

Cara Membuat Read More Dengan Javascript (Versi 2)

Original by IFX Adrian | 30 November 2009 5 Comments

Kok artikelnya pake versi? Kayak software aja? Hikz.. hikz..! Tapi apa maksudnya?
Begini.. Di cara membuat read more sebelumnya atau boleh dibilang versi 1, jika kita klik link read more nya maka browser akan meload lagi halaman web kita. Di versi 2 ini, jika kita klik link read more maka keseluruhan isi artikel akan langsung tampak di bawahnya. Jadi tidak meload halaman baru. Mau tau gimana caranya?

Berikut Cara Membuat Read More Dengan Javascript:

1. Login ke akun Blogger anda

2. Pilih Layout > Edit HTML, lalu centang Expand Widget Templates.

3. Cari kode </head> lalu pastekan kode berikut tepat di atasnya:

<script src='http://tipsbloggerzacky.googlecode.com/files/readmorev2.js' type='text/javascript'/>


4. Jika sudah, cari kode <div class='post-header-line-1'/>, di bawahnya kan ada kode <div class='post-body entry-content'>. Ganti kode tersebut menjadi seperti ini:

<div class='post-body entry-content' expr:id='"post-" + data:post.id'> <b:if cond='data:blog.pageType == "item"'>


5. Sudahkan? Selanjutnya cari kode <p><data:post.body/></p>, paste kode berikut tepat di bawahnya:

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>


6. So, seluruh kode tadi menjadi seperti ini:

<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>


Tulisan Selengkapnya... dan Ringkasan... bisa anda ganti sesuai keinginan.

7. Klik Save Template untuk menyimpan perubahan
8. Selanjutnya pilih menu Setting > Formatting
9. Scroll ke bawah dan temukan kotak Post Template, lalu paste kode berikut kedalamnya:

<span id="fullpost">

</span>



10. Klik Save Settings

Dalam membuat postingan, letakkan abstraksi / pembuka postingan anda sebelum kode <span id="fullpost"> dan sisa nya letakkan diantara kode <span id="fullpost"> dan </span>.

Huft,,, selesai sudah semuanya… cape’ juga ane… eh tunggu dulu, masih ada dikit lagi nih..!

Lalu gimana buat yang sudah pakai read more versi 1? Ya tinggal update aja ke situs providernya… eh, kok malah kayak software?
Begini, buat yang sudah pakai read more versi 1, anda tinggal mengubah sedikit kode read more yang lama..

Caranya:
1.Kode read more yang lama kan seperti ini:

<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<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'>Read More......</a>
</b:if>



2. Hapus kode yang berwarna biru lalu ikuti langkah2 di atas.

3. Jangan lupa ubah juga isi Post Template dengan:

<span id="fullpost">

</span>



Gimana? Udah ngertikan? Ngerti aja ya? Ane udah cape’ nih..

Selamat mencoba…

Jangan lupa kasih komentar ya…

Bagikan Artikel Ini!

<a href="http://instaforex.com/forexcopy_system.php?x=DVXF">InstaForex</a>
Facebook Delicious Digg! Twitter Linkedin StumbleUpon Lintas Berita
Technorati Google Bookmarks Mixx Yahoo! Newsvine Reddit

Artikel Lain Yang Mungkin Anda Baca

5 komentar:

Neoandini 17 Februari 2010 18.56  

hmmm..... apa ga berat loadnya gan, kalo readmore pake javascript. Pan udah disediain fiturnya sama blogger buat motong posting mah.

tinggal tambahin tag <!-- more --> di editor htmlnya, otomatis postingan kepotong.;)

tapi, nice share gan....... :D

erix 10 Maret 2011 12.48  

Gan Scriptnya udah gak jalan tu .....

ne scriptnya :|
http://komputersfix.googlecode.com/files/ReadmoreJSv2.js

http://komputer-fix.blogspot.com

news review 22 Desember 2011 08.41  

js untuk membuat readmore ketika dikopi gimana caranya ya?

Posting Komentar