Cara Membuat Read More di Blogspot (Versi Baru)

oleh Heryan Tony dalam Blogging Tips pada 25-05-2009 jam 12:26 pm

Tags: , , , ,

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!

Dapatkan Update Terbaru via Email DAFTAR SEKARANG!



Comments:

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 :)

tq mas infonya,slm knal….mampir mas http://adissa-online.blogspot.com

idem ama atas ane…. gmana tuh nasib posting terdahulu???

aku kesulitan buatnta.. sering gagal.
tolong donk..

aku kesulitan buatnya.. sering gagal.
tolong donk..

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

sulit cara kodenya soale, kodenya ada yng g sama????gmn mhn tong bgt pak???tak cb gagal trs.trmksh

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.. :)

lagi nyari ini bang …tq

http://kakindra.blogspot.com/

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

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?

Susah banget…!!!

Suuuusaaaaah hehe..
http://beta-sando.blogspot.com

lumayan susah!!!
http://newsandstyles.blogspot.com/

wah gannn mantab gan ane suka ente gan postingan jempolan

siip dah gan…
smoga bisa update terus gan..

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 :)

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 :)

ghostaneh.blogspot.com

kasih trik tapi kok gak boleh / gak bisa klik kanan copas… gimana dong…

sip deh,
http://blogaam18.blogspot.com

sepp

nice article,. numpang blog http://whathefuuuuuck.blogspot.com/ hehe

pak di template saya gak ada yg
gimana pak solusinya

Wah gan…langkah-langkahnya udah tak cobain semuanya, pi koq g bisa juga ya…

Thank,,,,
but in my blog there arn’t full sript ur purpouse,,,

please seem my blog…

http://harppy-phoenix.blogspot.com/

Join and Visit It,,,,,,,,,,,,,…………….!!!!!!!!!!!

ane masih bingung gan..help

kunjungi jg ya puisir3maja.blogspot.com/

Kok gagal total yah? Untung udah download template sebelum nyoba…

sip sip, thank agan atas infonya :)

artikel yang sangat mnarik sob… ditunggu yg slanjtnya…

Mohon Tinggalkan Komentar, Terima Kasih