Membuat Read More yang Bersifat Hide-Show

Istilah "Read More" ini sudah tidak asing lagi bagi para rekan blogger, apalagi yg memang hobinya nongkrong buat blogging every time. Fitur "read more" ini dipasang bertujuan untuk mempersingkat tampilan posting yang tampil pada halaman depan blog atau juga ketika para pengunjung berusaha mencari postingan melalui kotak search, dengan begitu akan membuat para pengunjung tidak risih ketika berada di halaman depan ketimbang setiap postingan yang berada di halaman depan tersebut tidak dipersingkat dengan trik ini.Biasanya, fitur read more yang kita kenal selama ini carapenggunaannya gampang, teman2 tinggal mengklik link yang bertuliskan "read more" atau seperti di blog ini teman2 akan melihat tulisan read more seperti ini: "Read More ===>>". Setelah pengunjung mengklik link tersebut biasanya si pengunjung akan di bawa/loncat ke halaman postingan tersebut dengan penampilan full/penuh, dengan begitu sekarang si pengunjung tersebut bisa membacanya sampai selesai (Untuk pembuatan read more dengan tipe jump link seperti ini, sudah saya bahas dalam postingan yg berjudul "membuat read more"). Apakah sekarang teman2 bertanya, "apa perbedaan antara read more jump link dengan read more yang bersifat hide-show?", perbedaannya kalau yg bersifat jump link akan melalui proses loading halaman/page, sedangkan yang bersifat hide-show begitu para pengunjung mengklik tulisan "read more"-nya maka si pengunjung akan langsung bisa membaca terusan dari postingan tersebut (lanjutan postingan tersebut akan langsung muncul di bawahnya), jadi teman2 juga bisa mengatakan read more ini bersifat spoiler.

Untuk membuat read more dengan tipe spoiler/hide-show silahkan teman2 login dulu ke blogger, lalu klik Tata letak/Rancangan/Layout, edit HTML, dan jangan lupa mencentang kotak expand widget template.

Selanjutnya letakkan kode berikut di atas kode tag </head>

<script type='text/javascript' src='http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/Readmorehideshow.js' />

Lalu cari kode: <div class='post-body'> dan ganti kode tersebut dengan kode berikut

<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

Dan yang terakhir letakkan kode berikut setelah 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);'>Baca Lanjutannya</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Tutup</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

Klik simpan template.

Selanjutnya yang harus dilakukan ketika memosting artikel yaitu menggunakan kode berikut untuk mengapit bagian akhir yang akan muncul ketika read more diklik

POSTINGAN YG TAMPIL

<span id="fullpost">

ISI DARI READ MORE

</span>

CONTOH PEMBUATAN
-----------------------
Yah nama panjang saya adalah Stepen Chought, biasanya teman2 saya memanggil saya Penchoug. Saya memilki banyak hobi, dan hobi saya yg paling terkenal adalah...selalu mengatakan sesuatu itu adalah hobi saya padahal itu bukan, lalu mengenai makanan kesukaan saya sih...semuanya suka dah, terkecuali es campur, anda tahu kenapa saya gak suka es campur?

<span id="fullpost">

Nah itu alasannya gara2 3 tahun yang lalu yaitu bertepatan ketika saya ulang bulan tahun, saya dihadiahin oleh teman saya es campur, awalnya saya penggemar es campur, tapi sejak tragedi itu saya gak senang es campur, dan masalahnya gara2 es campur yg dihadiahin itu dicampur dengan batu, cabe, sandal, dll pokoknya campur aduk, dan yang bikin aku lebih gak senang adalah komposisinya dari kaos kaki juga...hiks~

</span>
-----------------------

Nah seperti di atas itulah format postingan tman2 nanti (yang saya tandai dengan stabilo orange merupakan bagian yg muncul sebelum "read more" diklik, dan yg biru adalah isi Read more). Agar proses penulisan kode di atas tidak berulang kali maka teman2 bisa mengatur kode tersebut otomatis muncul setiap kali teman2 ingin membuat postingan, caranya: Klik Pengaturan/Setting >> Format >> lalu isi pada bagian "templat Entri(terletak di bagain paling bawah)" dengan kode tersebut. maka setiap kali teman2 melakukan pemostingan tidak perlu lagi menulis kode read more. Dan lakukan pemostingan dengan mode Edit HTML bukan compose/tulis, tujuannya agar teman2 bisa menggunakan kode yang telah kita setting tadi dengan mudah dan baik.



Dan yang terakhir, ketika teman2 menggunakan trik di atas maka yang tampil di setiap bagian bawah postingan pada halaman depan adalah seperti ini: Baca Lanjutannya. Tulisan "Baca lanjutannya" tersebut bisa teman2 ganti dengan kata2 lain yang semisal, seperti "Read More", "Lanjuuuut", dll. Akan tetapi agar sesuai dengan sifatnya yaitu hide-show, maka saran saya teman2 bisa menggunakan tampilan read more seperti ini: |+|Read More atau|+|Show All Post untuk menggantinya coba diperhatikan pada bagian yang telah saya tandai dengan warna biru

Setelah teman2 mengklik tulisan "read more" atau "show all post" maka pada bagian akhir postingan teman2 akan menemukan tulisan "Tutup", nah...itu gunanya tiada lain dan tiada bukan untuk menutup kembali postingan tadi menjadi postingan yang hanya tampil sebagian yang kemudian diikuti tulisan "read more". Tidak beda dengan tulisan "Baca Lanjutannya", maka tulisan "Tutup" ini juga bisa teman2 ganti denagn kata2 lainnya seperti: "Close", "gulung", dll. Sebagai saran mengingat fungsinya sebagai read more hide-show, teman bisa menggunakan bentuk seperti ini: |-|close postatau |-|Hide Post , dll dan saya yakin teman2 pasti sudah pada tahu kata2 apa yg sesuai dengan selera masing2. Bagaimana teman2, benar2 mirip spoiler bukan? itu saja dulu...

Mudah-mudahan bermanfaat.
Keywords:Membuat read more hide show, how to make "hide-show" readmore

Untuk kemajuan Blog Ini Silahkan isi Kotak Komentarnya Ya.. (For blog development, please fill the following blog comment Pal

Share |

Related Post