Read More ala Peek a boo

Trick ini sering disebut readmore dengan gaya "peek-a-boo", dimana tidak diperlukan loading halaman untuk menampilkan halaman artikel secara keseluruhan. Gaya ini tetap akan menampilkan sebagian dari artikel kita, dan menyembunyikan sebagian yang lainnya lagi. Pengunjung hanya tinggal meng-klik tombol untuk menampilkan sisa artikelnya. Untuk menggunakan trick ini diperlukan javascript. Adapun java script yang diperlukan yaitu:

// JavaScript Document function toggleIt(id) { post = document.getElementById(id); if (post.style.display != 'none') { post.style.display = 'none'; } else { post.style.display = ''; } } function showFullPost(id) { var post = document.getElementById(id); var spans = post.getElementsByTagName('span'); for (var i = 0; i < spans.length; i++) { if (spans[i].id == "fullpost") spans[i].style.display = 'inline'; if (spans[i].id == "readmore") spans[i].style.display = 'none'; } } var fade = false; function showFull(id) { var post = document.getElementById(id); var spans = post.getElementsByTagName('span'); for (var i = 0; i < spans.length; i++) { if (spans[i].id == "fullpost") { if (fade) { spans[i].style.background = peekaboo_bgcolor; Effect.Appear(spans[i]); } else spans[i].style.display = 'inline'; } if (spans[i].id == "showlink") spans[i].style.display = 'none'; if (spans[i].id == "hidelink") spans[i].style.display = 'inline'; } } function hideFull(id) { var post = document.getElementById(id); var spans = post.getElementsByTagName('span'); for (var i = 0; i < spans.length; i++) { if (spans[i].id == "fullpost") { if (fade) { spans[i].style.background = peekaboo_bgcolor; Effect.Fade(spans[i]); } else spans[i].style.display = 'none'; } if (spans[i].id == "showlink") spans[i].style.display = 'inline'; if (spans[i].id == "hidelink") spans[i].style.display = 'none'; } post.scrollIntoView(true); } function checkFull(id) { var post = document.getElementById(id); var spans = post.getElementsByTagName('span'); var found = 0; for (var i = 0; i < spans.length; i++) { if (spans[i].id == "fullpost") { spans[i].style.display = 'none'; found = 1; } if ((spans[i].id == "showlink") && (found == 0)) spans[i].style.display = 'none'; } }

Upload script tersebut ke web hosting. Kemudian copy url-nya. Kemudian ada beberapa langkah lagi yang harus sobat lakukan, yaitu:

1. Sign in kedalam akun blogger sobat.
2. Pilih Layout --> Edit HTML.
3. Kamu mau memback-up template kamu dulu nggak?, kalo iya kilik tulisan Download Template lalu simpan.
4. Beri tanda centang pada kotak yang bertuliskan Expand Template Widget.
5. kopi kode berikut ini dan taruh tepat diatas kode </head>
<script src='URL SCRIPT' type='text/javascript'/>
6. Cari kode dibawah ini
<div class='post-header-line-1'/> <div class='post-body entry-content'>
7. Ganti kodenya menjadi seperti dibawah ini
<div class='post-body entry-content' expr:id='"post-" + data:post.id'> <b:if cond='data:blog.pageType == "item"'>
8. Kemudian cari lagi kode seperti dibawah ini
<p><data:post.body/></p>
9. Tembahkan kode ini dibawahnya.
<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>

jadi seluruh kodenya akan 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 diganti dengan apa aja kata yang Sobat suka.
10. Lalu simpan template.
11. Pilih menu Setting -->> Formatting
12. Di bagian bawah ada kotak yang disampingnya ada tulisan "Post Template", dan isikan kode dibawah ini ke dalamnya lalu simpan setting.
<span id="fullpost">
</span>
13. selesai....

Satu hal yang sobat ingat, sama dengan readmore versi lainnya...bahwa ketika menulis artikel maka penulisan artikelnya seperti dibawah ini:

Artikel yang akan ditampilakan
<span id="fullpost">
Sisa artikel
</span>

Salam & semoga bermamfaat

tipsandcara
Print this post

Bookmark this post: