Bagaimana menampilkan sebagian postingan dengan “baca selengkapnya..” di blogspot
Banyak yang nanya bagaimana memotong postingan di blogspot dengan kata “baca selengkapnya..” atau “read more..” sehingga yang tampil di halaman depan hanya separuh postingan dan postingan lengkap akan muncul apabila link “baca selengkapnya..” atau “read more..” di klik.
mas, mau nanya boleh? saya dah lama penasaran sama yg namanya kode untuk mempersingkat postingan….yang biasanya berbunyi : “read more” atau “cerita selengkapnya..”. soalnya kalo ga digituin puanjaaaang…suka pusying. makasih loh. ditunggu jawabannya.
Sebenarnya fasilitas ini nggak ada di blogger/blogspot, tapi kalo kamu pake wordpress fasilitas ini udah ada, cukup klik dimana kamu pengen memotong postingan, kemudian klik icon SPLIT POST USING READ MORE TAG.
Untuk pengguna blogspot, berikut ini langkah modifikasi yang bisa dilakukan. Trik ini menggunakan css untuk menyembunyikan sebagian post, sehingga hanya bagian yang diinginkan saja yang tampil di halaman depan.
Pertama buka template blogger kamu, kemudian tambahkan CSS berikut, CSS biasanya terletak di antara tag <style> dan </style>
<MainOrArchivePage>span.selengkapnya {display:none;}</MainOrArchivePage><ItemPage>span.selengkapnya {display:inline;}</ItemPage>
Dengan style ini, kita membuat sebuah class di css dengan nama “selengkapnya” dan hanya akan tampil ketika postingan berdiri sendiri (post page). Sebagian dari berita akan menggunakan class ini seperti yang akan saya jelaskan kemudian.
Langkah kedua adalah menambahkan kode untuk menampilkan link “baca selengkapnya…” tambahkan kode berikut setelah kode < $BlogItemBody$> pada template kamu:
<mainorarchivepage><br /><a href="<$BlogItemPermalinkURL$>">baca selengkapnya..</a></mainorarchivepage>
Kamu bisa mengganti tulisan “baca selengkapnya..” dengan kata lain yang kamu suka!
Setelah mengkopi kode-kode diatas kedalam template kamu, Save Template dan Republish.
Langkah terakhir adalah melakukan modifikasi setiap kali kamu membuat postingan. Ketika membuat berita yang akan dipotong, selalu gunakan mode Edit Html bukan Compose mode , dan tambahkan kode seperti contoh berikut ini:
Ini adalah awal postingan dan akan dipotong disini. <span class="selengkapnya"> Ini adalah akhir postingan saya </span>
maka akan menghasilkan sebuah postingan seperti ini:
Ini adalah awal postingan dan akan dipotong disini baca selengkapnya..
ketika link di klik maka akan menampilkan postingan secara penuh seperti ini:
Ini adalah awal postingan dan akan dipotong disini. Ini adalah akhir postingan saya.
Selamat mencoba !






January 27th, 2007 at 03:41:59
dah aku coba mas… tapi koq gak bisa
efeknya tiap akhir postingan pasti ada tulisan link baca selengkapnya….
waktu aku coba potong postingan dengan
January 26th, 2007 at 16:55:00
Kalau utk wordpress cara memotong postingan dengan read more ada di bagian apa ya mas? mohon bisa dibantu, terima kasih
December 20th, 2006 at 14:41:35
Iya nih boss….. buat yang versi BETA kok susah banget yah…… aku dah coba tapi gak bisa2, mungkin ada cara lain lagi?……..
klo dah bisa email aku yah……..
November 25th, 2006 at 11:22:52
IMO : belum nyoba untuk blogger beta
November 25th, 2006 at 09:28:45
SAYA MENGGUNAKAN BLOGGER VERSI BETA, MAU MENGGUNAKAN TRIK “READ MORE” JUGA, HANYA KOK DI HTML AKU GA ADA tag dan TUK MEMASUKKAN CSS DIATAS,THANK’S B4
October 21st, 2006 at 18:55:01
thanks boss dengan tips yang anda berikan tampilan read more di blog saya sesuai harapan. Padahal dengan tip yang sama yang diberikan orang lain beberapa kali gagal.sukses untuk anda. sering sering kasih tips yang lain ya …
September 27th, 2006 at 16:26:36
udah pernah nyoba .. tapi yang keluar malah cuma judulnya aja, sedang isinya gak keluar sama sekali >_
September 13th, 2006 at 12:16:32
Klo yang di wordpress kayak gini gimana bikinnya bang?
September 3rd, 2006 at 18:50:07
actually between the testing123, there is span thingy ….but it didn’t show up there….heheheh
September 3rd, 2006 at 18:44:58
hello i managed to finish this tutorial…the only thing is that…if my post is short, the “baca selengkapnya..” is still there…though i did not put the testing123 in my post…. hopefully can get ur answer…