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. 30
    hwardoyo99 Says:

    rimakasih mas atas infonya…
    ilmu anda sangat bermanfaat sekali bagi sesama, semoga tuhan membalas kebaikan anda. Aminnnn

  2. 29
    w31n Says:

    mkasih ya omm atas scibnya

  3. 28
    dzik Says:

    setelah saya cari sepertinya gk da tuch tulisan/kalimat dimana kode akan ditempatkan….kira2 knp?

  4. 27
    How to make read more in blogger new layout | Adsense tutorials and bloggers guide Says:

    [...] This Tutorial help you to make “read more” action when posting in blogger. If you are using classic templates blogger please read this article. [...]

  5. 26
    Diah Says:

    “tapi kalo kamu pake wordpress fasilitas ini udah ada, cukup klik di mana kamu pengen memotong postingan, kemudian klik icon SPLIT POST USING READ MORE TAG”

    Ya ampuun.. itu tho gunanya ’split post’ di Wordpress. Aku juga lagi nyari2, baru ngeh setelah baca tulisan Mas (maklum gaptek :P) Makasih ya Mas ….

  6. 25
    blue Says:

    mas cara di atas bisa utk blogger beta gk…??
    aq pake (lagi) template dari mas yg
    ———————————————————————-
    Blogger Template Style
    Name: Bloggerized Adsense
    Designer: Isnaini
    URL: http://www.isnaini.com
    Date: 01 Des 2007
    ———————————-

    gimana caranya read more……

  7. 24
    Menampilkan “selengkapnya..” atau "read more.." di blogspot / blogger (Split Post) « c1p1 Says:

    [...] selamat mencoba. (sumber) [...]

  8. 23
    Indah Says:

    wah syukran - syukran (bhasa arabnya terima kasih…) tapi kodenya ada yang kurang tuh mas kurang
    kalo itu tidak ada maka tulisan baca selengkapnya muncul paling bawah dan beritanya tidak dapat di potong….

  9. 22
    mariskova Says:

    Makasih Mas atas infonya.

    btw, kenapa ya, read more saya muncul di paling bawaaah sekali setelah labels. Pdhl saya naruh kodenya pas dibawah post/tulisan…

  10. 21
    vega Says:

    Thanks atas infonya. btw, apa sih bedanya yg classic dg yg nggak classic?

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

Leave a Reply