Cara Membuat Read More di Blogspot (Versi Baru)

Read more atau baca selengkapnya adalah fasilitas untuk menyembunyikan tulisan yang panjang dan hanya menampilkan bagian abstrak dari artikel tersebut. Dan keseluruhan posting akan tampil ketika link read more diklik. Tips cara membuat readmore berikut ini adalah versi baru, sebenarnya sudah lama. Maksudnya bila kita klik tulisan Baca selengkapnya tidak perlu memanggil seluruh halaman, namun cukup bagian bawah saja dan tentunya akan menjadi lebih ringan.

Update 2 Maret 2010: untuk lebih mudah tanpa edit template, silakan lihat di sini.

Tips membuat read more ini Saya ambil dari blognya Kang Rohman. OK, langsung saja kita ikuti langkah demi langkah pembuatan post summary.

  1. Silakan login ke halaman dashboard Anda di Blogspot.
  2. Klik menu layout/tata letak.
  3. Pilih Edit HTML.
  4. Sebelumnya backup terlebih dahulu template yang Anda gunakan dengan memilih Download Template Lengkap. Tunggu sampai penyimpanan template Anda selesai.
  5. Beri tanda centang pada tulisan Expand Template Widget, tujuannya agar keseluruhan template Anda ditampilkan.
  6. Salin kode di bawah, kemudian letakkan di atas kode </head>.
  7. Selanjutnya, tambahkan kode berikut ini pada kode template Anda, yang berwarna hitam adalah kode asli dari kode template dan berwarna merah adalah kdoe yang harus ditambahkan.
    <h3 class='post-title'>
    <b:if
    cond='data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    <div class='post-header-line-1' />
    <div class='post-body'
    expr:id='"post-" + data:post.id'>
    <b:if
    cond='data:blog.pageType == "item"'>

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

    <b:else/>
    <style>#fullpost {display:none;} </style>
    <p><data:post.body/></p>
    <span id='showlink'>
    <p><a expr:onclick='"javascript.showFull (\"post-" + data:post.id + "\");"'href="javascript:void(0);'>[+/-} Selengkapnya...</a></p>
    </span>
    <span id='hidelink' style='display:none'>
    <p><a expr:onclick='"javascript:hideFull (\"post-" + data:post.id + "\");"'href='javascript:void(0);'>[+/-] Ringkasan saja...</a></p>
    </span>
    <script type='text/javascript'>checkFull ("post-" + "<data:post.id/>")</script>
    </b:if>

    <div style='clear:both;'/> <!--clear for photos floats-->
    </div>
    </div>
    .... rest of template code ....

Langkah selanjutnya adalah:

  1. Klik menu Pengaturan.
  2. Klik menu Format.
  3. Salin kode berikut ini, kemudian letakkan pada kolom kosong yang disediakan.
  4. <span id="fullpost">

    </span>

  5. Klik tombol Simpan Setting, dan selesai.

Selanjutnya, cara posting artikel:

Ketika kita sedang menulis artikel, buka menu Edit HTML, jangan pilih yang menu Compose, tujuannya agar kode tadi bisa terlihat, yaitu kode:

    <span id="fullpost">

    </span>

Untuk artikel yang akan ditampilkan di atas tulisan Read More, maka letakkan tulisan di atas kode <span id="fullpost">, dan artikel sisanya agar tidak terlihat letakkan di bawah kode tadi dan sebelum kode </span>.

Jika Anda memiliki artikel yang pendek, sebaiknya dihilangkan saja tulisan Baca selangkapnya dengan menghapus kode tadi:

    <span id="fullpost">

    </span>

Selamat mencoba, semoga berhasil!

81 thoughts on “Cara Membuat Read More di Blogspot (Versi Baru)

  1. aizi

    mas lo halaman pada wosdpress gmn cara buat readmore di”halaman” byar kya di”home” bisa ga?
    bles lwat coment diblogku ya?
    jagan lupa blogu dilink di blogroll mas ya/
    thanks………..

    Balas
  2. Ping-balik: Cara Membuat Read More di Blogspot (Versi Baru) « Smkbitek's Blog

  3. Lye

    sudah pernah coba cara ini liat di blog Kang Rohman,tapi ga bisa, cuman keluar [+/-] Selengkapnya…
    tapi saya coba klik ga bisa keluar posting selengkapnya.
    eh ternyata setelah baca ulang tutorial di blog ini ada yang kurang penambahan kode template yang:

    Terimakasih banyak….

    Balas
  4. Heryan Tony Penulis

    @Ilham G.
    Ada kode html yang kurang mas. Sepertinya </a>, coba dicek jika sebelumnya ada <a> maka harus ditutup dengan </a> mungkin salah satu elemen html tsb ada yang kurang.

    Balas
  5. Riyadi Rodriguez

    ko ga bisa ya,,???
    malah ada tulisan ky gni??

    Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: Element type “a” must be followed by either attribute specifications, “>” or “/>”.
    .
    .knp ya??

    Balas
  6. Ridardon DC Ricardo

    read more
    (lanjutkan)
    saya pernah coba pi ga bfungsi, tulisan “lanjutkan” ada, semua text pun ada!!

    Balas
  7. hafidz

    sy udah coba tp g berhasil” juga, malah tampilan blog sy jdx berantakan n sy udah coba kembalikan ke settingan awal tapi g bisa” juga..
    tolong kunjungi blogq dong kira” apa yg harus sy lakukan.

    Balas
  8. yati rachmat

    Salam kenal buat the owner. Pasti karena aku gak punya pengetahuan IT jadi ya susah banget buat ikutin langkah2 gimana caranya bikin Read More, pdhal buat mereka2 yang pahan IT gampang2 aja tuh.

    Balas
  9. hasanman

    readmore di atas bikin kode dulu baru bikin artikel ya, klo artikelnya sudah di terbitkan truss gimana.. saya binggung nih, koq gagal terus ya ampe frustasi nih..
    help me..

    Balas
  10. Pemula Lagi Jalan

    seph markosep infonya,, tp ada ga ya yang lebih mudah dan kinclong πŸ˜€

    oia nanya lagi pak,, kalau kita mau posting gitu tuh kan caranya,, trus gimana nasib postingan terdahulu,, apa perlu di edit lagi ato sudah otumatis sebagian aja yang keliatan? thank πŸ™‚

    Balas
  11. pandu

    udah coba .. v sering gagal , katanya

    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type “b:if” must be terminated by the matching end-tag “”.

    -_______________-” tolooooooongg !!!

    please….

    Balas
  12. Mahmud Amma Rizki

    Waah.. Mantap nih mas.. langsung bisaa..
    Mampir keblog saya ya mas..
    kalo bisa kasih saran juga.. hehe

    http://inginsukses19.blogspot.com

    Makasih mas atas infonyaa.. πŸ™‚

    Balas
  13. Ihsan

    udah coba .. v sering gagal , katanya

    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type β€œb:if” must be terminated by the matching end-tag β€œβ€.My Blog

    Balas
  14. brink

    hhhhhmmm susah,, udah saya coba nyari <div class='post-body' itu susah amat,,
    lalu saya coba find pke ms word sama notepad jg ndak ktmu juga,,,,,,,,

    apa ada cara lain yg lbh fresh, ato cara yg lebih mudah gan?

    Balas
  15. conded golongan putih

    yang belum berhasil, kemungkinan besar anda menggunakan template dari pihak ketiga.

    nah setelah saya baca help dari blogger, ternyata bagi yg menggunakan template dri pihak ketiga maka harus menambahkan sedikit script.

    langsung saja cari kode berikut:

    .

    jika sudah ketemu copy dan paste kan kode berikut.

    ingat, copy dan paste kan DI BAWAH kode , BUKAN DIGANTI.

    saya sudah mencoba dan berhasil, selamat mencoba kawan πŸ™‚

    Balas
  16. conded golongan putih

    wah ternyata gak bisa muncul ya, tak ulang ni. mudah2an berhasil πŸ˜€

    yang belum berhasil, kemungkinan besar anda menggunakan template dari pihak ketiga.

    nah setelah saya baca help dari blogger, ternyata bagi yg menggunakan template dri pihak ketiga maka harus menambahkan sedikit script.

    langsung saja cari kode berikut:

    <data:post.body/>

    jika sudah ketemu copy dan paste kan kode berikut.

    <b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
    <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
    </div>
    </b:if >

    ingat, copy dan paste kan DI BAWAH kode , BUKAN DIGANTI.

    saya sudah mencoba dan berhasil, selamat mencoba kawan πŸ™‚

    Balas

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *