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 !



Tulisan yang berhubungan

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

Pages: « 4 3 [2] 1 » Show All

  1. 20
    Saiful Adi Says:

    besok coba ah. benar benar good info, you get better

  2. 19
    rahadyan Says:

    mas punya ku gak bisa memotong artikel di blog saya ?, padahal aq dah ikuti semua tips nya. knp ya ?

  3. 18
    joe Says:

    Tulisan yang menarik sekali. Template yang disediakan juga bagus2. Buat teman2 yang sedang mencari lirik lagu2 indo terbaru silahkan kunjungi blog saya di liriklagudanmusik.blogspot.com

  4. 17
    Membuat “Read More…” atau “Baca Selengkapnya..” di Blogger Baru | Isnaini Dot Com Says:

    [...] Untuk versi template classic aku udah pernah bikin tutorialnya, akhir-akhir ini banyak banget yang nanya, akhirnya aku nyari info, malah ketemu di helpnya blogger, How can I create expandable post summaries?. Tapi jangan langsung di cobain, aku udah nyoba beberapa kali tapi gagal kalo ngikutin yang dari helpnya blogger, terutama pada bagian style/css nya. [...]

  5. 16
    Isnaini Says:

    Riana : memang seperti itu :)

  6. 15
    Riana Says:

    mas mas gak dijawab juga gak apa2 deh..soalnya saking penasarannya aku utak atik sendiri..eeh ternyata berhasil..tp sama dgn mas iwan di atas “read more”nya muncul di setiap postingan. Tapi gak apa2lah..aku potong aja semua postingan ku…thx banget ya mas

  7. 14
    Riana Says:

    Udah ikutin semua step-stepnya tp hasilnya postingan bener terpotong tp tampilan “baca selengkapnya” gak muncul. jadi gak bisa baca sisa postingannya. kenapa ya mas? mas jangan gak dijawab ya mas soalnya penasarn nih bikin gak bisa tidur. thx

  8. 13
    pecinta lirik Says:

    Thanks untuk tipsnya. tapi karena sekarang blogger sudah ada versi beta, gmn caranya buat hal sama di Blogger BETA? tolong ya….

  9. 12
    iwan Says:

    Tutorialnya bagus banget, tapi ada beberapa hal yang saya tidak suka yaitu: tampilan “baca selengkanpnya” muncul semuanya di akhir isi kontenya, padahal ada bebrapa yg saya tadak inginkan untuk di “read more”. Gimana caranya mas dan tampilan “read morenya letaknya dibawah isi kontennya, saya mau di akhir isnya.

    tanks

  10. 11
    erween Says:

    mau tanya cara mindah isi blog ke blog yang lain..
    ex: dari blogaspot….pengen kupindah ke wordpress….
    Thanks

Pages: « 4 3 [2] 1 » Show All

Leave a Reply