Movies Aggregator http://mizwar.com

Membuat Readmore di Blogger

By , Thursday, January 17, 2008 (klik +1 diatas jika artikel ini bermanfaat)

Membuat readmore atau menyingkat tulisan di blog, maksudnya memberikan tanda “Read More…” Atau “Baca Selengkapnya…” atau cukup “Selengkapnya…” di bawah tulisan kita yang dipersingkat. Agar tulisan yang panjang tidak seluruhnya tampil biar tidak memakan tempat.

To the point saja, di bawah ini merupakan langkah-langkah cara menyingkat tulisan atau memasang readmore di Blogger baru (layout template):

  • Klik layout -> template -> edit HTML. Lalu beri tanda ceklis pada “Expand Widget Templates”.
  • Karena masing-masing struktur template berbeda maka pada kotak Edit Template cari salah satu kode berikut:

<div class='post-header-line-1'/>
atau <div class='post-header-line'>
atau <div class='post-body entry-content'>

Untuk mencari kode tersebut, jika Anda menggunakan browser firefox cara mencarinya cukup mudah tinggal copy salah satu kode yang akan dicari tersebut, tekan CTRL + F di tempat pencarian (di edit html blog Anda) lalu paste kode yang akan dicari di area Find: yang akan muncul setelah menekan CTRL + F dan otomatis kode yang Anda cari jika sesuai akan langsung ditemukan. Jika belum menggunakan firefox silahkan download dulu disini.

  • Kalau sudah ketemu; Tahap pertama (ada dua tahap) kita copy-paste kode berikut,

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

Paste dibawah salah satu kode berikut yang ada pada template blog Anda,

<div class='post-header-line-1'/>
atau <div class='post-header-line'>
atau <div class='post-body entry-content'>

  • Tahap kedua, copy kode berikut,

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

Paste dibawah kode <p><data:post.body/></p>

  • Kalo petunjuk di atas sudah dilakukan, maka hasilnya akan seperti ini: (perhatikan warna biru sebagai kode tambahan)

<div class='post-body entry-content'>

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

<p><data:post.body/></p>

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

<div style='clear: both;'/> <!-- clear for photos floats -->

  • Jika sudah klik SAVE TEMPLATE.
  • Dari menu TEMPLATE kita pindah menu; klik Settings (Pengaturan) >Formatting (Format). Dibagian bawah ada tulisan Post Template (Template Posting), isi kotak dipinggirnya dengan kode berikut:

<span class="fullpost">

</span>

Klik SAVE (Simpan Pengaturan).

  • Terakhir, setiap akan mempublish postingan, klik Edit HTML dan sisipkan kode tersebut diantara postingan yang akan ditampilkan dan disembunyikan. Contoh,
  • Ini merupakan paragraf pertama isi postingan Anda. <span class="fullpost"> dan ini merupakan paragraf selanjutnya postingan Anda yang tidak akan terlihat kecuali link read more di klik oleh pengunjung blog Anda.</span>

  • Kode </span> tersebut disimpan paling akhir tulisan (postingan) Anda!.

Silahkan dicoba!
________________

Masih pake template classic…?!? Klik disini cara membuat readmore untuk template classic.

PS: Saat akan mempublish postingan usahakan tidak ada tag </span> lain selain </span> readmore berikut <span class="fullpost"> dan </span>, jika ada akan mengakibatkan terjadi kecelakaan dahsyat readmore tidak berfungsi dengan baik. Caranya edit postingan pada edit html jangan di Compose.

Popularity: 7% [?]

25 Responses to “Membuat Readmore di Blogger”

  1. Yudhistira says:

    Jujur aja. saya mmasing amatir dalam halblogger, and you’ve done such an immense help for me by putting these tips. THANKS A LOT! smoga makin maju dan jaya. Sukses!

  2. Hakimtea says:

    Sama2 mas yud, saya juga masih belajar, kita belajar sambil berbagi saja, blogging dan berbagi :) Amien do’anya!

  3. <b>Iman Fauzi</b> says:

    Makasih ya…….
    saya jadi bisa buat read more……
    walaupun saya masih smp…..
    sekali lagi terimakasih..
    Sukses slalu!!

    Wassalam :)

  4. Hakimtea says:

    Sama2 dek Imam :) Belajar ga ngenal usia kan meski masih smp tapi kode2 sprt itu juga mesti bisa walau ga perlu dihafal ^_^ Makasih! Sukses juga, wasalam :)

  5. adi says:

    Alhamdulillah nemu lagi ( eh salah ya. he he he)
    link ‘klik disini’

    | yang ini juga oke :)

  6. wa boss, kok katanya gini siy.. :

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “cond”.

    what hepen aya neon tuh bos ?

    *gelapgapahambloondotcom*

  7. @mix says:

    Wah, ini ni yg saya cari-cari… :razz: :wink:

    Thx yah…

  8. Hakimtea says:

    Edited post.

    Silahkan dicoba! :wink:

    Kalo masih ada kesulitan silahkan beri komentar disini!

  9. istifajar says:

    oh ya, katanya kode bisa diganti jadi …apa bener? thanks ya :wink:

  10. cak dh1k4 says:

    Muanteb…… top Markotop……………..

  11. Antho says:

    Assalamu alaikumm….

    Ni aku lagi,, skdr info aku baru saja berkelahi dengan kode2 htmlnya seperti instruksi yang mas Hakim contohkan di atas,,, pokoknya seru banget deh… dan sekarang aku sudah punya readmore2 gitu, tapi aku ubah jadi ‘seterusnya…..”. ya… mirip2 punya kang hakim lah, tapi aku pake titik2 di belakangnya bukan tanda panah….

    oh ya… main2in html itu asyik juga, asyik skali malah…. ini smw atas jasa mas hakim…. thx dan sukses always

  12. Untuk Redmore…nya sudah jadi tapi comment dibawah posting belum jadi Bos…coba lagi ach

  13. didi says:

    mas makasih banyak atas tutorialnya,cmn kenapa ya ketika step by step langkah-langkah diatas dah q lakukan kok postingan di blog ku sebelumnya malah hilang semua?..trs sewaktu q mo posting lagi, saya dah lakukan seperti yang mas katakan,jd kata “Ini merupakan paragraf pertama isi postingan Anda” saya taruh seblum sintak dan kata “ini merupakan paragraf selanjutnya postingan Anda yang tidak akan terlihat kecuali link read more di klik oleh pengunjung blog Anda.” saya taruh diantara sintak ” dan sintak ” “. Mohon bantuan,terima kasih :neutral:

  14. duwin says:

    info yg sangan berguna.
    kunjungi du-spot.blogspot.com & klik adsnya.
    thx

  15. Zegala says:

    Kang Hakim…Sebelumnya terima kasih…saya udah ikuti langkah2 tuk membuat “read more” setetelah disave template terjadi error….mohon bantuannya kang hakim.terima kasih.(http://zegalainformasi.blogspot.com)

  16. mryuwono says:

    jujur saya sudah mempraktekan semua resep termasuk dari Mas Hakim tapi nggak pernah berhasil. Kalaupun berhasil ada read morenya postingan masih nongol di halaman depan. Sekarang malah postingan nggak nongol. Mas Hakim atau siapapun tolong saya di yeye.thok@gmail.com. Saya dah pusing, pusing sudah lebih dari sepuluh jam tapi nggak berhasil. Siapapun please

  17. andy says:

    kok pada hilang semua postingan nya ya kang?

  18. milas99 says:

    Duh mas iki cek pintere rek

  19. desti says:

    Haiii… nanya donk..koq di ‘edit html’ ku ga ada :

    atau
    atau

  20. Santos says:

    Emang info ini yg sdg q cr, mksh mz… Semoga sukses sll

  21. cacvra.com says:

    bagus banget artiklenya… sangat membantu saya…
    thanks banget….

    Cacvra.com latest post How to Clean History in Internet Explorer

  22. Risty says:

    Di wordpress untuk bikin read me lebih gampang yah. Saya pikir di blogger juga gampang, ternyata agak ribet.

  23. pena says:

    kenapa setelah saya coba semua tulisan di blog saya tidak dapat muncul. walaupun saya klik item yang ingin saya lihat.

    mohon koreksi, mungkin langkah saya ada yang salah………….

Leave a Reply

Panorama Theme by Themocracy