Bagaimana menampilkan sebagian postingan dengan “baca selengkapnya..” di blogspot

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.

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 !

source : isnaini.com

~ by suke on February 3, 2009.

16 Responses to “Bagaimana menampilkan sebagian postingan dengan “baca selengkapnya..” di blogspot”

  1. […] atau “Baca Selengkapnya..” di Blogger Baru Untuk versi template classic sudah ada tutorialnya pada postingan sebelumnya,  sedangkan untuk Blogger baru bisa menggunakan cara berikut […]

  2. kalau untuk wordpress bagaimana ya?

  3. koq beda2 ya dengan artikel blog lain😦

  4. Lumayan berguna nih, makasih ya!!

  5. maaf, mau tanya. kalau yang di wordpress caranya gimana ya?

  6. makasii bgt ya !! wahh,klo menurut w ni sgt berguna nihh!! makasii bgt🙂 . tolong kunjungi blog qw ya!! remaisalhuda.wordpress.com

  7. aQ nyoba ko’ gag bsa2 yaw ..

    • mungkin blog mbak dewy adalah blogger baru..
      coba mbak dewy periksa artikel “Membuat “Read More…” atau “Baca Selengkapnya..” di Blogger Baru”

  8. untuk wordpress tinggal klik menu “insert more tag” shortcut-nya alt+shift+T
    ps : sebelum “insert more tag” kursor di tempatkan di awal paragraph yang ingin kita potong/sembunyikan

  9. mantapsss tipsnya, makasih bro

  10. Makasih Infonya Brooooooooooo

  11. nice info.

  12. ga bisa” gue maah –”

  13. mas bro aku coba kok ngga bisa..
    ada penjelasan lebih detailnya nggak?

  14. […] Bagaimana menampilkan sebagian postingan dengan “baca selengkapnya..” di blogspot […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: