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.

Tag : membuat read more pada blog, how to make read more on blogspot, make more in blogger, membuat more dalam blog.

22 pemikiran pada “Blogger : Adding Read More to Your Post

  1. 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..

    Suka

  2. 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

    Suka

  3. Subject : menambahkan Readmore
    Permasalahan :
    1. Posting 1 dan ke 2 Read more udah bisa, kalo di klik read more kan jd fullposting, nah koq pas fullposting kata read morenya msh ada kan seharusnya
    < << Hoeme doang
    2. posting2 berikutnya ada kata read more, tapi koq dalam keadaan fullposting, maksudnya saya lom klik read morenya koq udah fullposting

    apa ada yang salah?

    Mohon untuk dijawab secepatnya!! hehehe

    ato mampir ya mas, bentar ke blogku (minta di cek)

    —terimakasih—

    Suka

  4. 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… :]

    Suka

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

    • 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.. 😀 ]
    makasi mas agus..

    Suka

  6. Mas cuma mw sedikit kasih tw.

    Ko yang link “baca selengkapnya” dikasih ‘display:none’ sih,, berarti link ini ga bakal keliatan dunks?

    Suka

  7. 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 🙂

    Suka

  8. Oke ! aku dah bisa ! thanks ya infonya.. sangat membantu 🙂

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

    Suka

  9. 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

    Suka

  10. 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?

    Suka

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

    Suka

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s