Read More tanpa reload halaman Blog

Dikesempatan kali ini saya mencoba untuk berbagi kepada sobat semua mengenai Tip's trik Blogger tentang bagaimana cara meletakan "ReadMore tanpa Mereload Halam Blog sobat.Maksudnya begini,Setiap kita meng"klik" Readmore pada suatu artikel yang ada pada blog.Otomatis halaman tersebut akan membuka kembali ke halaman baru untuk menyajikan satu halaman penuh artikel tersebut.Bagi sobat yang lebih mengutamakan waktu,mungkin ini menjadi sesuatu yang menjengkelkan untuk menunggu reload halaman tersebut.Apalagi disaat koneksi Internet yang terasa lemot...wuih,sangat menyebalkan bukan?

Nah...dari tip's trik kali ini saya akan mencoba berbagi bagaimana readmore tidak perlu melakukan loading ulang ketika di klik. Dengan kata lain, Sobat hanya menyembunyikan artikel berikutnya di bawah tulisan readmore.

Kalau sobat berminat, mari bersama-sama kita mengulas readmore tanpa reloading halaman blog. Adapun langkah-langkahnya adalah sebagai berikut :

  • Lakukan proses login account di blog sobat terlebih dahulu.

  • Pilih tab Tata Letak ---> Edit HTML ---> Centang "Expand Template Widget".
Sebelum melakukan edit template, sebaiknya simpan dulu template sobat yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan sobat sudah memiliki back-up untuk mengembalikannya seperti semula.

  • Copy kode berikut ini.

<script src='http://www.geocities.com/asmara.4477/readmore.js' type='text/javascript'/>

Letakan posisinya diatas kode </head> dan cari kode :

<div class='post-header-line-1'/>
<div class='post-body entry-content'>
  • Ganti semua kode yang berwarna merah dengan kode berikut :
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
  • Di bawah kode tersebut terdapat kode <p><data:post.body/></p> atau kode sejenisnya, seperti : <data:post.body/>
Atau jika kamu telah memodifikasi seperti pada readmore sebelumnya jadi seperti ini :

<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/> <a expr:href='data:post.url'><strong>Readmore...</strong></a></p> </b:if>

Ganti dulu semua modifikasi readmore (warna merah) sebelumnya dengan kode :

<p><data:post.body/></p>

  • Selanjutnya tambahkan kode berikut di bawah kode :

<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);'>[+/-] Readmore...</a></p>
</span> <span id='hidelink' style='display:none'> <p><a expr:onclick='"javascript:hideFull("post-" + data:post.id + "");"' href='javascript:void(0);>[+/-] Hide Reedmore...</a></p> </span> <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script> </b:if>

  • Jadi seluruh kodenya akan menjadi seperti berikut :
<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);'>[+/-] Readmore...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull("post-" + data:post.id + "");"' href='javascript:void(0);'>[+/-] Hide Readmore...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

Arti kode HTML di atas adalah menyembunyikan posting setelah kode
<div id="fullpost">

[+/-] Readmore...

jika di klik akan menampilkan seluruh posting yang diakhiri dengan
</div>

Kemudian jika "
[+/-] Hide Readmore...

" diklik, maka akan mengembalikan posting dalam bentuk semula (posting singkat).

  • Untuk kode yang berwarna hijau dapat kamu ganti dengan kata yang kamu kehendaki, seperti ; Selengkapnya... dan Ringkasan..., Baca Lanjutannya... dan Post Singkat..., serta kata-kata lainnya.

  • Jangan lupa disimpan

Sekarang Klik tab Pengaturan --> Format
Di layar paling bawah, ada text area kosong disamping tulisan "Template Posting", isi area kosong tersebut dengan kode di bawah ini :

<span id="fullpost">
</span>

Jika blog kamu masih menyimpan residu trik blogger membuat readmore sebelumnya, maka kotak area template posting berisi kode seperti berikut :

<span class="fullpost">
</span>

Ganti kode yang berwarna merah "class" dengan kode "id", sehingga menjadi :

<span id="fullpost">
</span>

Simpan pengaturan format

Selamat membuat readmore tanpa reloading halaman blog...

0 comments:

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.