Membuat Readmore Tanpa Loading Halaman Blog

Sebelumnya kita telah membahas mengenai Membuat Readmore, namun halaman blog diloading ulang. Sedangkan pada saat jaringan internet lambat atau kebanyakan pernak-pernik kode script dalam blog akan menyebabkan waktu yang dibutuhkan untuk loading lumayan lama. Tentu hal tersebut berpengaruh pada kenyamanan pengunjung dalam me-eksplorasi posting blog kamu. Nah, trik blogger berikut adalah bagaimana readmore tidak perlu melakukan loading ulang ketika di klik. Dengan kata lain, kamu hanya menyembunyikan posting berikutnya di bawah tulisan readmore.

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

• Login dulu ke account blogger kamu.
• Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Sebelum melakukan edit template, sebaiknya simpan dulu template kamu 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 kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Copy kode berikut :

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

Kalau kamu mempunyai situs penyimpanan file "readmore.js" sendiri, silakan ganti kode yang berwarna merah dengan alamat penyimpanan file kamu tersebut.

• Paste kodenya, di atas kode </head>
• Cari kode di bawah ini :

<div class='post-header-line-1'/>
<div class='post-body entry-content'>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

• 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> ([+/-] Hide Readmore...). 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 loading halaman blog...