Membuat Readmore Versi Baru

Bagi Anda yang senang menyingkat postingan dengan readmore atau baca selengkapnya, mungkin artikel ini bisa dijadikan referensi bagi blog Anda. Mungkin Anda sudah pernah mempraktikkan cara lama membuat readmore seperti pada blog saya ini. Namun sedikit catatan bahwa readmore versi baru ini jauh berbeda dengan yang pernah ada sebelumnya.

Beberapa waktu yang lalu readmore versi baru ini berhasil diciptakan oleh Ramani dan Hans. Bedanya, pada readmore versi baru ini tidak memerlukan loading page yang lama ketika pembaca mengklik readmore. Selain itu tidak memerlukan pemindahan halaman sehingga tetap pada halaman tersebut. Selain itu jika ingin kembali ke tulisan readmore tinggal klik ringkasan saja. Namun sayang fasilitas ini hanya dapat dinikmati pada template baru saja dan tidak bisa jika menggunakan template klasik.

Nah daripada Anda bingung dengan yang saya jelaskan di atas lebih baik langsung praktikkan saja. Saya jamin nggak bakalan kecewa deh.. Semoga bermanfaat !


1. Buka pada Edit HTML


2. Klik tulisan Download template lengkap, ini untuk menghindari kerusakan template jika gagal melakukan editing template.


3. Jangan lupa beri tanda centang pada Expand Template Widget


4. Kemudian copy kode berikut tepat di atas kode </head>

<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />



Link di atas milik Kang Rohman.


5. Tambahkan kode berikut pada template Anda, yang warna hitam adalah kode template Anda, yang warna merah adalah kode yang harus ditambahkan.

<h3 class='post-title'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> <div class='post-header-line-1'/> <div class='post-body' 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 saja...</a></p> </span> <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div> </div> .... rest of template code ....

6. Klik tombol Simpan Template.



Langkah selanjutnya adalah...

1. Klik menu Pengaturan


2. Kemudian klik Format


3. Copy kan kode di bawah ini pada kotak kosong yang terletak di samping Template Posting



<span id="fullpost">


</span>




4. Klik tombol Simpan Setting.


Cara penggunaan :

Setiap kali Anda membuat postingan klik pada Posting, lalu Edit HTML. Di situ otomatis sudah tertulis kode berikut ini.


<span id="fullpost">


</span>


Nah, caranya adalah tulis postingan sampai pada point yang ingin ditampilkan di atas readmore, lalu letakkan kode <span id="fullpost"> di bawah postingan itu, dan lanjutkan untuk menulis lanjutan postingan Anda di bawahnya. Letakkan kode </span> di akhir postingan.


Selamat mencoba!


Jangan lupa berkomentar ya.. Terimakasih!

Dapatkan update hacking tutorial, tips dan trik menarik seputar teknologi, download full software, belajar bisnis internet, dan masih banyak lagi langsung ke email Anda sekarang juga!

Related Post