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...

30 komentar untuk “Membuat Readmore Tanpa Loading Halaman Blog”

  1. gak bisa pren..?? error xml gitu?

    BalasHapus
  2. error xml bisa disebabkan "error kode" atau "connect ke blogger.com ada gangguan". Tapi kalau loading ke blogger.com cepat berarti kita hilangkan bahwa "connect ke blogger.com ada gangguan".
    Coba sekarang pakai kode contoh untuk kode script-nya :

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

    BalasHapus
  3. To ve : posting telah OB update dan thanks atas koreksinya ;;)

    BalasHapus
  4. yang ini gag jadi lagi bossss.....

    BalasHapus
  5. to chibuy : OB sudah lihat blog "Blog kita semua". Triknya udah bener, tapi tinggal penempatan kode pemenggalannya saja lagi yang diatur. Kalau ingin melihat contoh coba buka posting OB tentang "Membuat Readmore"

    BalasHapus
  6. trims bos buat tutornya
    tak coba dulu
    n semoga sukses selalu

    BalasHapus
  7. Bro.. Emg tulisan "readmore" nya itu isa diatur ya ? Misalnya mau taruh dibawahnya kalimat apa ato taruh dibawahnya foto gitu. Bingung duehhh....
    Td aku ada coba yg "otomatis readmore" , tp ya ga ngerti caranya ngatur tempat readmore.

    BalasHapus
  8. Lo , kok gambar gw cm tanda tanya ? perasaan dah diubah jg td wkt nyoba avatar komentar.

    BalasHapus
  9. to Nama Tampilan Blog: Khusus "otomatis readmore" penempatan readmore ngga bisa diatur, karena udah otomatis. Kalau yg bisa diatur coba baca posting OB yg lain berkenaan dengan readmore.
    Klo gambarnya masih "?", jawabannya sama dengan pertanyaan edwin dalam posting pasang avatar mybloglog. Singkatnya daftarkan ID profile blog "Judul Blog" dulu di service MyBlogLog

    BalasHapus
  10. Lebih cepat di coba, lebih baik

    BalasHapus
  11. Saya udah coba dan ternyata bisa, cuma permasalahannya kok komennya ga muncul???? gimana dong baiknya:)

    BalasHapus
  12. aku coba ah, membuat readmore di blogspot2 ku. hehe.. btw thanks infonya ya mas

    BalasHapus
  13. Mo coba trik ini..soalnya blog saya kalau pake readmore yang dari blogspot hasilnya malah ancur :((

    BalasHapus
  14. numpang tanya ? seteleah buat menu seperti pnyanya Mas OB,Trus caranya memposting artikel gimana? agar nyambung dg kolom-kolom menu yg di buat tdi..
    thanks,

    BalasHapus
  15. udah di coba sob, tapi readmorenya gak berfungsi... btw kok sobat gak pake juga di blog sobat?

    BalasHapus
  16. Bos OB, ane dah coba tuh buat readmore, tapi ko ga berfungsi yah, tolong dijelasin cara postingya sekalian.., soalnya masih baru neh diblog.. terima kasih ya Boss..

    BalasHapus
  17. bos tetep ga bisa dibuka / berfungsi read morenya.
    ini dia kode readmore blogs saya.


    nah bos gimana tuk mengakalinya, terima kasih. kalo bisa kirim ke email saya albarjoi21@gmail.com

    BalasHapus
  18. ga bsa friends...
    ga mau jalan alias tidak terjadi apa"...
    kayak gini hasilnya:

    http://ramayulaziale.blogspot.com/

    BalasHapus
  19. Thanks infonya bos..aku udah coba di blogku tapi kok malah gak muncul ya.. malah artikelnya gak mau muncul..

    BalasHapus
  20. oke , nanti di coba gan

    BalasHapus
  21. punyaku Gk ada kode itu ??

    yang ( div )

    bagaimana??
    mohon bantuannya??
    salam kenal...

    BalasHapus