Halaman

Blogger : Adding Read More to Your Post

Seakan diingatkan oleh Mbak Hanan karena di blog saya belum pernah menulis tentang bagaimana membuat link read more disetiap postingan blog, akhirnya kesempatan kali ini saya gunakan untuk membahasnya.

Saya percaya bukan satu atau dua kali ini saya dipertemukan dengan pertanyaan ini, mungkin dari sekian banyak pengguna blog yang memiliki kegemaran mengutak atik blog dari layanan Blogger,tips ini paling sering digunakan.Bukan tidak mungkin pula dari beberapa pengguna Blogger yang sudah akrab dengan layanan ini,pertanyaan ini juga masih sering ditanyakan.

Maka tak heran banyak sekali referensi untuk menemukan jawaban ini.Dari mulai pihak penyedia layanan Blogger yang menyertakan tips ini,hingga penggunanya seperti Mbak Melapun pernah menulisnya.Namun senyampang berkunjung ke blog ini lebih mudah mengikutinya dari sini.Paling tidak tak perlu buka browser lagi kan ;).

Mungkin ada baiknya pula bagi yang baru berkenalan dan sedang membuat blog untuk menggunakan tips ini agar nanti menemukan kemudahan dalam menentukan panjang dan pendeknya postingan yang akan ditampilkan, atau sekedar mengelola tampilan blog agar lebih rapi dan indah dipandang.

Ada dua tahapan awal yang dibutuhkan, yakni memasukan tag CSS di bagian style sheet dan pada bagian HTML.Kedua langkah dibawah memerlukan pengeditan di bagian Template.

1.sertakan sintak CSS berikut dalam style sheet (lebih baik diletakkan dibawah informasi nama template agar mudah ditemukan):

a.more{display:none;}
<MainOrArchivepage>
span.fullpost {display:none;}
span.fullpost + a.more{display:inline;}
span.fullpost + div + a.more{display:inline;}
</MainOrArchivePage>
<ItemPage>
span.fullpost {display:inline;}
</ItemPage>


2. menambahkan sintak CSS berikut di bawah <$BlogItemBody$> :

<a class="more" href="<$BlogItemPermalinkUrl$>"title="baca lebih lengkap..."> baca lengkapnya</a>


setelah itu kita save Template kita, dan jangan lupa untuk memPublishnya.

Langkah selanjutnya kita perlu mengedit postingan yang kita kehendaki untuk ditambatkan link "read more". Hal yang perlu diperhatikan dibagian ini adalah mode yang digunakan saat kita mengedit postingan kita.Pastikan kita berada dalam posisi Edit Html (bukan mode Compose).Setelah yakin dengan peringatan ini, selanjutnya kita perlu menyertakan sintak <span class="fullpost"> dan </span> diantara postingan kita.Sintak <span class="fullpost"> bisa kita sertakan di bagian tengah postingan dan tag </span> dibagian paling akhir.Lalu save postingan kita.

Ada baiknya pula sebelum kita memasukan tag diatas, terutama di bagian edit Template, kita sudah memiliki back up template kita yang berisi kode-kode tadi sebelum memulai.

Setelah itu kita uji dengan membuka blog kita.Apabila tidak menemukan perubahan, coba refresh beberapa kali untuk menghilangan cache lamanya.

Pada beberapa kasus, pengeditan ini tidak berpengaruh karena dalam postinganya memiliki banyak sintak yang saling bertolak belakang.Ini banyak ditemukan pada penulis blog yang terbiasa menuliskan artikelnya terlebih dahulu dengan menggunakan editor lain semisal Microsoft Word yang apabila artikelnya dipastekan di dalam Blogger beberapa sintak akan muncul.Ini akan lebih mudah terdeteksi apabila kita selalu menggunakan mode Edit Html dalam setiap postingan kita.

Masih belum mendapatkan hal yang diinginkan di blog Anda? silahkan klik tombol Online di bagian gambar Yahoo Messenger samping ini untuk berbagi cerita.

Info terkait:
- Menambahkan "read more" pada Layout Blogger ada di : http://edittag...beta-version.html.
- Pasang "read more" di wordpress/blogsome.
Tag : membuat read more pada blog, how to make read more on blogspot, make more in blogger, membuat more dalam blog.




25 komentar:

  1. Anonim5:43 AM

    Nimbrung ahh... untuk pengguna blogdrive, bisa gunakan cara ini:
    http://goldenpen007x.blogdrive.com/archive/269.html

    BalasHapus
  2. aku dah coba trik ini di blog ku tapi kok nggak mau yaaa. apa pengaruh dari template yang akau pake. aku pake templat dari http://blogger-templates.blogspot.com/

    bahkan bukan itu aja. kalo aku mau ngepost comment aku di situ nggak mau nampil di dalam postingan tapi kalao dihalaman comment milik blogger mau. Coba mas lihat comment dari postingan Intepreter, disitu terlihat ada dua comment (comment (2)). tapi kalo dibuka cuma satu, tapi kalo dilihat dari halaman comment blogger kelihatan ada dua comment.
    tolong dong kasih saran....

    makasih ya..

    BalasHapus
  3. Anonim1:26 AM

    tips ini bisa diterapkan di blogsome nggak? ajarin dunk!

    BalasHapus
  4. Akhirnya...hari terakhir diktr, malah ndilalah2i dapet tips bikin 'read more'..

    Lebih alhamdulillah lagi waktu bener2 bisa terpasang...

    Yg bikin binun, tampilan di IE dan Firefox koq bisa beda ya?
    Apa yg di IE kurang direfresh?
    Pasangan 'read more'nya kliatan blum kepake di IE.

    Eniwe, Sukron Jazakallah ya...
    Sering2 muat tips2 buat kita2 yg blogger begginner :))

    Salam dari Semarang

    BalasHapus
  5. utk IE memang tidak mendukung CSS ini...hanya di IE versi 7.0 yang mampu...untuk itu aku juga menulis tipsnya agar di IE muncul
    baca : http://edittag.blogspot.com/2006/06/html-read-more-on-internet-explorer.html

    BalasHapus
  6. kang agus... kalo pake blogger baru gimana?? udah coba ngikutin yg dari help blogger nya (yg buat layout) tapi ga mau di save template html nya..? lieurrrr euyy... nyungkeun bantosanna.. nuhun saacanna... :]

    BalasHapus
  7. utk gian, coba trik abstraksi di blogger baru dengan melihat kodenya di : http://edittag.blogspot.com/2006/11/blogger-read-more-on-beta-version.html

    BalasHapus
  8. Anonim5:08 AM

    sekedar nambahin mas agus (soale br make blogspot lg selain wp.com..gratisan ajah.. :D )

    • utk membuat kode XHTML blogspot valid saat make ul, li, <blockquote><p> di dlm 'read more style', sebaiknya <span class="fullpost">..&lt/span> diganti <div class="fullpost">...</div>

    • kode <div class="fullpost">...</div> dpt dimasukkan ke settings » formatting » salin-tempel di post template

    [maap kl dah pada tau.. :D ]
    makasi mas agus..

    BalasHapus
  9. terima kasih dani untuk sarannya.....patut dicoba...

    BalasHapus
  10. Anonim6:51 PM

    Mas cuma mw sedikit kasih tw.

    Ko yang link "baca selengkapnya" dikasih 'display:none' sih,, berarti link ini ga bakal keliatan dunks?

    BalasHapus
  11. Aku kok ngga ketemu ya style sheetnya ? padahal dah di Expand Widget ?

    Apa karena versi beta ?

    Taunya beta atau baru itu gimana ya ?

    Waduh.. maap nih. pertanyaannya borongan :)

    BalasHapus
  12. kalo ada expand widget itu artinya blogger baru yang menggunakan layout..untuk itu bisa ikuti petunjuk ini di sini

    BalasHapus
  13. Oke ! aku dah bisa ! thanks ya infonya.. sangat membantu :)

    Sebagai Tanda Terima Kasih aku dah pasang banner edittag tuh di blogku ^_^

    BalasHapus
  14. Mas Agus dan Rekan-rekan sekalian
    kok untuk readmorenya di Blog saya di Http://erwinarianto.blogspot.com engga bisa jalan ya.. mohon penjelsan yang lebih rinci maklum pendatang baru nich

    BalasHapus
  15. pro erwin : ini biasa terjadi saat penyuntingan teks menjadi berwarna warni dengan bantuan div. untuk aman biasanya kita mewarnai teks dengan HTML standar seperti <font color=red> atau bisa juga gunakan span daripada div untuk memotongnya, info ada di sini

    BalasHapus
  16. duh mas di template saya kok ga bisa buat read more nya yah, dah di ikutin petunjuk nya....

    bisa bantu ngga...!

    BalasHapus
  17. Terimakasih banyak mas! Sangat membantu!
    Salam.

    BalasHapus
  18. terima kasih juga rahadian.....:)

    BalasHapus
  19. mas, saya ingin bertanya.
    selama ini kan mas hanya memberikan informasi cra membuat read more pada blog di blogger.com
    yang saya tanyakan, bagaimana cara membuat read more pada blog di friendster saya?

    BalasHapus
  20. mas, info nya donk
    tentang cara membuat read more pada blog di friendster
    gimana caranya yach?
    tolong di jawab ya mas, klo bisa lewat email saya saja di ijoe_girl@yahoo.com
    sebelumnya, terima ksaih ya mas...

    BalasHapus
  21. di friendster repot nih, karena sistemnya tak terbuka, jadi sekedar untuk edit html dan melihat variabelnya belum tahu nih gmana caranya..

    BalasHapus
  22. Ok nih, bakal gw coba.
    semoga tmbh sukses. CAYO !!!

    BalasHapus
  23. Anonim7:25 PM

    lumayan tambah pengetahuan..
    kakasih...

    =======================================
    Download/Baca Tutorial Lengkap Seputar:

    1. AdSense
    2. AdBrite
    3. Advertising
    4. SEO Optimalization
    5. Blogging Tutorial
    6, Blogging Tips N Trick
    7. Keyword untuk meningkatkan Traffic

    kunjungi aja:
    http://easymoneyboy.blogspot.com
    =======================================

    BalasHapus
  24. Anonim11:43 PM

    Waduh,
    saya coba koq g bisa ya?
    Gimana mas?
    ada ga yang read more otomatis?

    Thx

    BalasHapus
  25. aduh bingun nih tulisan read more.. nya gak ada, cuma naskahnya saja yg terpenggal.

    BalasHapus

Kamu bisa dapetin ilustrasi wajah yang sesuai dengan wajah kamu di moselo.com/Bikingemeys. Jangan lupa ada promo jika pesan dari aplikasinya langsung.