Pages

How to Make Read More (Expandable Post Summaries) in Blogger

Pada saat awal-awal menggunakan Blogger, saya merasa ada sesuatu yang kurang dari Blogger ini. Ketika saya membuat tulisan yang agak panjang, tulisan akan ditampilkan seluruhnya di halaman depan (Home). Saya ingin hanya paragraf pertama (post summaries) yang ditampilkan di halaman depan. Tidak ada link “Read more” yang saya inginkan. Tidak ada tool di editor (tempat menuliskan postingan) Blogger untuk menambahkan “Read more”. Wah, susah juga...

Kalau di Wordpress ada. Tapi Wordpress (versi hostingan gratis) tidak saya pilih, karena adanya kekurangan yang belum bisa saya atasi, yaitu salah satunya tidak bisa menerima kode javascript.

Tapi jangan khawatir. Saya sudah tahu triknya. Dan sekarang, saya ingin membagi ilmunya untuk Anda.

Ada 3 langkah, untuk membuat paragraf pengantar yang akan ditampilkan di halaman depan:

1. Penambahan ‘Conditional CSS’

Conditional CSS mengubah bagaimana postingan tampil di halaman yang berbeda.
Caranya, klik Layout ---> Edit HTML.
Lalu backup template dengan mengklik Download Full Template.
Lalu cari dan temukan kode ini </head>
Tambahkan kode berikut tepat di atasnya:

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Gunanya adalah membuat class bernama fullpost yang akan tampil hanya di halaman detail (permalink).

2. Penambahan Read more

Langkah kedua, menambahkan link "Read More" (atau apa pun sesuai selera Anda) yang akan tampil setelah paragraf pengantar.
Untuk itu klik checkbox Expand Widgets Template tepat di atas kotak Edit Template.
Lalu scroll sampai ketemu kode:
<data:post.body/>
Tambahkan kode berikut setelahnya:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Read more!</a>
</b:if>

Kalau sudah, klik Save Template. Link Read more ini hanya akan tampil di halaman depan (home) dan arsip (Archive). Kalau diklik, akan membuka halaman baru berisi satu tulisan penuh.

3. Penambahan di Post Template

Langkah terakhir adalah menambah format di template postingan, sehingga setiap membuat postingan baru akan memudahkan Anda, di mana menempatkan paragraf pengantar dan di mana sisa keseluruhan tulisan.
Klik Settings ---> Formatting, lalu geser ke paling bawah halaman.
Copy dan Paste kode berikut ini ke kotak Post Template:

PENGANTAR
<span class="fullpost">
SISA PARAGRAF SELANJUTNYA
</span>

Klik Save Settings.


Ketika Anda membuat postingan (Create Post) dan kemudian mengklik tab Edit Html, Anda akan melihat seperti berikut ini (Klik gambar untuk memperbesar):



Ganti tulisan "PENGANTAR" dengan paragraf pengantar Anda sendiri. Kemudian ganti tulisan "SISA PARAGRAF SELANJUTNYA" dengan sisa paragraf berikutnya dari tulisan Anda.
Jangan menghapus kode <span class="fullpost"> dan </span>.
Intinya masukkan paragraf pengantar Anda di atas kedua kode itu dan paragraf berikutnya di antara kedua kode tersebut.
Lalu klik Publish. Lihat hasilnya dengan klik View Blog.
Anda sudah mengerti sekarang? Puas?

Update: Setelah Blogger mengalami perubahan, akhirnya fasilitas ini sudah disediakan di wysywig editor Blogger yang baru, namanya "Insert Jump Break" yang gambar iconnya seperti kertas disobek. Jadi artikel ini tidak perlu lagi dan tinggal menjadi sejarah masa lalu Blogger.

32 komentar:

  1. tangkyu ya infonya tak pake di blog gw. ow iy, tlg cantumin alamt gw y..


    http://programmerzone.blogspot.com

    BalasHapus
  2. terima kasih, syukron, tararengkyu, danke... makasih nih... say sudah coba dari berbagai blog yang nyediakan trik readmore... cuma trik ditempat anda yang bisa bekerja dibloh saya. cuma ada perhatian nih. kode == kayanya harus di ganti kode !=
    betul ga??? mungkin anda salah ketik?

    BalasHapus
  3. Thankyu Guys...Dah bisa tapi kalo nulis artikel pendek tulisan Read More! sehabis selesai artikel..jadi percuma..ada saran?thankyu

    http://senandung-puisi.blogspot.com

    BalasHapus
  4. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  5. Wah makasih banget nih, akhirnya bisa bikin read more di blogger versi baru, soalnya di blog2 lain pada ngasih tutorialnya ga jalan semua.....hehehehe.....

    BalasHapus
  6. Please guide me step 2 again, where I have to place the given code?

    BalasHapus
  7. ok..trims ats infonya, tapi keliatannya ada cara lain yg lebih simpel dech :)

    BalasHapus
  8. sudah puas mas, thanks ya tutorialnya. berguna banget nih

    BalasHapus
  9. Bagaimana menggunakan/membuat read more kalu kita biasa posting pada windows live writer..?

    BalasHapus
  10. Terima kasih sekali boss, baru kali ini nemu tutorial yg bener-bener ngasih pencerahan....

    BalasHapus
  11. Arghhhh... kaga ada yg bisa di blog gw... knapa ya

    BalasHapus
  12. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  13. makasih banyak tips-nya mas, langsung saya praktekin di blog saya.

    kunjung balik mas, sekalian minta sarannya

    BalasHapus
  14. thanks infonya, akhirnya nemu jg bwt bkin read more hahaha .. :)

    BalasHapus
  15. wah... makasih atas info-nya... btw, bisa ga' "read more"-na itu dijadiin pilihan.

    semisal, kalo mang postingannya dikit.. kita bisa milih ga pake tambahan "Read More" dibawah post kita...

    Hehehehe.. skali lagi makasih info-nya...

    BalasHapus
  16. Terima Kasiiiiiih.. Amat Sangat Membantu Sekali!!
    Semoga web/blog anda jadi lebih ramai karena berbagi ilmu..
    (Ilmu yang bermanfaat)

    BalasHapus
  17. sukses selalu dengan infonya sangat menarik sekali dan mantap.lam kenal aja kunjungan perdananya.maju terus........

    BalasHapus
  18. dua kata untuk agan=termia kasih

    BalasHapus
  19. woy gan, ngasih tutor yg jelas donk.. koq gak ada ??itu dibagian mana ?? clo disuruh nyari githu doank sama aja nyari jarum ditumpukan jerami..

    BalasHapus
  20. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  21. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  22. wah abgus panduannya..detail banget..saya cb udah jalan readmore nya..cmn yg jadi masalah kok open new window ya..harusnya khan didalam tab itu sendri..kayak kita wktu klik judul postingan..
    kl g percaya cek aja boz..skalian kasih masukkan...mo ksh duit jg blh...hehehehhe

    http://infokesehatan2012.blogspot.com

    BalasHapus
  23. saya cb udah bisa boz...tp kok wktu dklik read more..malah open new tab baru..kok g di tab blog itu sendiri...seperti wktu kita klik judul posting...

    kalo g percaya bisa dicek di blog saya...tolong skalian masukkannya boz...

    http://infokesehatan2012.blogspot.com

    thanks

    BalasHapus
  24. Makasih, mas...
    Ini nih yang saya cari. ;)
    Nice post, berguna sekali.
    Sekalian saya coba nyari untuk nambah 'reply' pada comment.
    Makasih mas....

    Kalo ada waktu boleh mampir di blog saya... hehehe
    http://igoroyoroyo.blogspot.com

    BalasHapus
  25. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  26. ini yang kucari.. makasih yah..

    BalasHapus