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:

saya dulu udah coba tapi malah artikelnya gak bisa muncul semua, yah, akhirnya pake yang lama aja. T.T
improve your traffic with join to aggregator

Teruslah berbagi sobat
Terus! πŸ™‚

WAH…… JADI PINGIN COBA,BIAR NGAK RIBET POSTINGAN PANJANG..

wah keren amat blognya

Nifan Sunandar’s last blog post..Wolfram Alpha Vs Google

numpang baca2 aja dah!

Rakyat Tekaje’s posting terakhir..Cara Membuat Blog di Blogger

terima kasih tutorialnya

Mas…kalo blog bahasa inggris..dalam kode html ada tulisan SELENGKAPNYA dan RINGKASAN SAJA…perlu di ganti kata apa…thanks ya

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

@Maniez
read more…
Read the rest of entry…

@Aizi
iya, mas

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

ok bro…, ntar ta coba ya! thx 4 ur suggest

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

Terimakasih………………….

Mantabbb…
aku berhasil nich pake read more versi ini πŸ™‚
Thanks

alhamdulillah read more ku udah berhasil. mantap abiz. kang, link anda udah terpasang di blog aku, banner aku dipasang ya….

thanx ya

keren… nice post.

blogwalking nih… top tips nembak keyword pake google insight

gak berhasil… kode2 htmlnya gak ada di html template aku… mohon bantuannya…

Thanks, triknya. sukses selalu

betulllllllll…..aku ngak ketemu kode html nya…………..body:post aja ngak ketemu…

trims ya..atas infonya..akn saya cba..krn sya pndatang baru..di dunia blog..

makasih tipsnya sukseeeeeeeeeeeeees bro…..

Pesan error XML: Element type “a” must be followed by either attribute specifications, “>” or “/>”.

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

lumayan buat arsip blogger, copy dulu ah(belum ada waktu buat praktek). trims.

salam kenal dr pendatang baru blog,www.ismuromdhoni.co.cc

Yang penting berkunjung dulu neh, praktek mah urusan belakangan,hehe…

terus berbagi…

salam persahabatan..
biat semuanya berkunjung k blog ana ya di armer-islamic.blogspot.com

Kalo template blogernya pake yang bukan standar bisa ga ya??

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

@Riyadi Rodriguez
Ada elemen ‘a’ belum ditutup. Sekarang dah diperbaiki, silakan coba kembali πŸ™‚

Makasih, tutorialnya ngga’ bikin pusing tinggal salin.

thanks tutor nya..
.sudah saya coba dan berhasil ^_^

tengkyu banyak bro,,

TES DULU AH…. MAMPIR BALIK YA BRO

kok gak bisa ya??

Hmm.. kalau dipikir-pikir bener juga ya …

terimakasih banyak….

salam kenal…

di template saya tidak ada kode
……

adanya kode .post-h3

trs bagaimana sy hrs membuat read more nya?

mantab neh,
hrus d coba

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

sama gx berfungsi jg . . .!

udah di coba2..gak bisa2…
elemen ‘a’ nya udah ditutup ..tetep gak bisa juga..
tolongin donk..

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.

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.

Sweeeerrr………gak nemu tuh kode html-nya……….pusing3x! Wis lah give up wae and cari mentor pendamping, hehehehe………..

masih gak berhasil gak ada kode boleh tuh berkunjung ke blog saya anekarupa50.blogspot.com

belum berhasil mas… html yang disuruh cari gak ada.. thanks…

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

sory bro kayaknya terlalu ribet, mendingan yang pake otomatis deh kyknya. thx

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