Cara Membuat 'Read More' pada Artikel

Pada umumnya, artikel yang dipajang di halaman depan akan ditampilkan secara penuh. Jika pada halaman depan ditampilkan 5 artikel, maka halaman depan akan menjadi panjang. Hal ini akan mengurangi kenyamanan para pembaca. Ada langkah mudah untuk memecah isi artikel menjadi 2 bagian. Bagian pertama, bagian kecil dari artikel yang ditampilkan di halaman depan. Bagian kedua adalah bagian lainnya yang akan ditampilkan bila artikel dibuka/diklik.

Contohnya:

Keutamaan Membaca Al-Qur'an

Segala puji bagi Allah. Shalawat dan salam semoga tercurahkan kepada junjungan dan kekasih kita, Rasulullah, keluarga beserta para sahabat beliau, shalallahu 'alaihi wasalam. Al-Qur'an adalah kalam (firman) Allah. Keutamaannya atas segala perkataan seperti keutamaan Allah atas seluruh makhluk-Nya. Membacanya adalah amalan yang paling utama dilakukan oleh lisan... Read More

Cara membuatnya tidaklah susah. Saya mendapatkan beberapa refernsi untuk membuat link ini. Referensi dari blog tips n trik menurut saya lebih mudah digunakan. Secara garis besar, pembuatannya dilakukan dalam 3 tahap, yaitu pada bagian layout, setting, dan pada bagian post.

Langkah-langkah pada bagian layout adalah:
  1. Anda harus login terlebih dahulu.
  2. Pada halaman dashboard, klik link layout.
  3. Selanjutnya klik link Edit HTML.
  4. Cari checkbox 'Expand Widget Template', centanglah (cek).
  5. Pada kolom HTML itu, carilah kode ini:

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

  6. Hapuslah kode itu, lalu ganti menjadi:

    <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>
    <a expr:href='data:post.url'>Read More......</a>
    </b:if>

  7. Tulisan 'Read More' dapat diganti menjadi 'Baca Selengkapnya' atau dengan tulisan lainnya.
  8. Pengeditan HTML telah selesai, diakhiri dengan menyimpannya, klik tombol save.

Langkah selanjutnya adalah membuat template/pola untuk setiap artikel yang akan kita post, yaitu:
  1. Masuklah pada bagian/menu Setting - Formatting.
  2. Cari kotak 'Post Template'. Isi kotak itu dengan kode:

    <span class="fullpost">
    </span>

  3. Simpan/save.

Langkah terakhir adalah membuat artikel postingannya, yaitu:
  1. Masuklah ke bagian New Posting.
  2. Antara 2 tab, 'Compose' dan 'Edit HTML', pilihlah Edit HTML.Akan terlihat kode template yang telah kita simpan sebelumnya.
  3. Pecahlah artikel menjadi 2 bagian. Bagian pertama, yang akan terlihat di bagian depan, letakkan di atas kode <span class="fullpost">. Bagian kedua diletakkan setelah kode itu dan sebelum kode </span>.

    Contoh kodenya menjadi:

    Segala puji bagi Allah. Shalawat dan salam semoga tercurahkan kepada junjungan dan kekasih kita, Rasulullah, keluarga beserta para sahabat beliau, shalallahu 'alaihi wasalam. Al-Qur'an adalah kalam (firman) Allah. Keutamaannya atas segala perkataan seperti keutamaan Allah atas seluruh makhluk-Nya. Membacanya adalah amalan yang paling utama dilakukan oleh lisan...<span class="fullpost">
    Al-Khaththabi mengatakan: "Disebutkan dalam atsar bahwa jumlah ayat al-Qur'an adalah sesuai dengan jumlah tingkatan dalam surga. Dikatakan kepada pembaca (al-Qur'an), 'Naiklah dalam tingkatan sesuai dengan ayat al-Qur'an yang sebelumnya kamu baca (di dunia).' Karena itu siapa yang membaca dengan sempurna seluruhnya al-Qur'an, maka ia menempati tingkatan surga yang paling atas di akhirat. Sedang siapa yang membaca sesuatu juz darinya, maka kenaikannya dalam tingkatan surga sesuai dengan bacaannya itu. Dengan demikian, akhir pahalanya adalah pada akhir bacaannya. </span>

  4. Publish

-- Selesai -- Alhamdulillah --

Lihat tutorial lainnya di Azzahrah Design


55 komentar:

Anonymous said...

makasih tutorialnya, lebih mudah dipahami

dyaneethamr said...

salamulaikum.. blog nya bagus, link2 an gimana?saya udah link. oh ya, ini artikel yang saya cari2..tp saya stuck di langkah pertama, kok ga ketemu yaa... caranya biar gampang ketemu kode itu gimana?makasih.wasalam

Anonymous said...

Assalamu alaikum wr wb
Jazakallah khoron akhi, ana muter-muter nyari tutorial 'read more' , bahasanya 'mbuuulet', muter kemana-mana, sulit d praktekkan. Ehh hasilnya juga nol :). tP ALHAMDULILLAH ana dapatkan tutor d blog antum, syukron jazakallah kher, ana bisa mempraktekkannya. Trs berkarya akhi, syukron
wassalamu alaikum wr wb

Rini said...

@diane.
yuk, tukeran link, blog anti yang mana? Mencarinya pake bantuan pencarian aja, caranya tekan keyboard Ctrl+F Trus masukkan coding yan gmau dicari.

@balyta
Wa'alaykumussalam warrahmatullah, waiyyaka. Oh ya, afwan nih, ana masih wanita .. :D

dyaneethamr said...

waaahhh, makasih sekali lagi.. saya udah mubeng2.. cariin satu persatu.. ternyata bisa cepet ya.... saya udah link di www.dyaneethamr.blogspot.com..

Dyaneetha said...

mbak rini, makasih ya. blog saya jadi bisa read more.. tp mbak mau nanya lagi, kan saya mau coba ke blog saya yang lain,, pas saya ctrl+f, kok phrase not found ya, padahal udah di expand.. maksih lagi.. ditunggu jawabannya..wasalam RAMADHAN MUBARAK

Dyaneetha said...

oh ya, saya tuh diane yang diatas.. n saya pake XML bukan HTML. makasih

Rini said...

@diane.
Kadang template yang sudah dimodifikasi memiliki code yang berbeda dari aslinya. Mungkin code template yang anti pakai sudah berubah dari code asli yang ditampilkan di sini. Cara lain, coba cari <data:post.body/>

Agsis14 said...

Assalamu alaikum wr wb
salam kenal dari newbie.
mau tanya gimana caranya membuat readmore tapi tidak ngelink ke link lain. Yg saya maksud kalo diklik readmore-nya langsung lengkap di halaman itu (seperti blog-nya dcblog.net). gitu aja maklum masih buta masalah blog

abu quba said...

assalamua'alaykum warohmatullohi wabarokatuh

syukron.
insyaAlloh saya akan banyak ngopi file dari sini,maklum awam.

terus berkarya...

abu quba said...

assalamua'alaykum warohmatullohi wabarokatuh

orang awam saya.
perlu banyak belajar (ngopi file) dari anda.
terus berkarya.
(bangga memiliki kawan seagama seperti anda)

jazaakalloh khoiron...

daanii said...

assalamualaikum....

makasih mbokde....

tutorialnya ampuh dan manjur

terima kasih, kalo sempat mampir ke tempat saya

wassalam

al-brangi Online said...

sy tak jumpa pun

"p data:post.body//p"

al-brangi Online said...

data:post.body saya tak jumpa tapi data:post.message adalah.

yg mana satu? untuk membuat readsmore

LSF said...

Waah...
langkah pertamanya susah..

udh dicari ampe bolak-balik ga ada.
ada sih post body tapi tulisannya bkn spti yg diatas.
like this : post-body

nah.. itu gmana y?
mohon bantuannya, kak! >.<

Anonymous said...

Terima kasih artikelnya mas. Mau nanya yang lain nih, aku dapet template (xml) yg mirip2 punya mas ini tapi kok tanggalnya gak keluar ya? mohon pencerahannya dung.

Anonymous said...

Assalaamualaikum..
salam kenal mb rini..jazakillah atas artikelnya,, jadi gampang utak-atik blog..oya,, sekali2 kunjungi blog saya di nutgarden.blogspot.com yah..hehehe

Anonymous said...

assalamu'alaikum wr. wb.
terima kasih ya mbak...untuk READ MORE nya...salam ukhuwah juga dari saya...
wassalamu'alaikum wr. wb.

Anonymous said...

( p data:post.body/ /p )

tulisan itu letaknya tepatnya sebelah mana ya
ko ga kujung ketemu
afwan ukhti mungkin kurang teliti,,
bisa tolong di detailkan lagi..

Anonymous said...

SYUKRON ATAS ARTIKELNYA...KLO RADIONYA GIMANA CARA DAPETNYA?

Anonymous said...

AssaLAmuaLAikum,,,,
sbelumx syukran dah dikasih tau ttang info read morenya....
tp ukhti,ktika saya coba simpan kok da masalah,yang muncuL maLah
kata2 bX-btce2j....
biza dijeLasin ga dg kata2 itu,,,
syukran sebeLumnya^^
AfwaN....

Dmoon said...

Nyari Code Read More mbak Punya q terhapus ,, bole yah Di Pakai
:d

- Keluarga Elkis Liyunita Riyadi - said...

i like your blog. thanx for sharing...

Anonymous said...

Duuuh koq udah dicoba masih gagal terus ya.... Bingung juga nie... hehehe

Anonymous said...

Assalamu alaikum,.... Thanks atas artikelnya yang sangat berharga bagi saya

Lily Ferlinsyah said...

kalau buat wordpress gimana caranya......

Anonymous said...

Assalamu'alaikum

Wah, saya berterima kasih atas info yang sudah Mbak Rini berikan, berguna sekali...

Syukron katsiro.

Wassalamu 'alaikum Wr.wb.

Kunjungi juga blog saya
http://newhanigoesblog.blogspot.com

maoels said...

Alhamdulillah ukhti syukron buat tips nya. udah 5 kali sukses gagal bikin read me alhamdulillah tips di blog ukhti mantef... sekali lagi syukron ya...


afwan ana minta visit balik dunk di
http://maoels.blogspot.com

Anonymous said...

tok...tok...tok....
assalammu'alaikum...
numpang lewat,,,eh ternyata artikelnya baguss....
sangat bermanfaat,, emmm...
minta izin ne pake artikel na buat blog ku, tapi sedikit di edit....
boleh ya....???

o iya....
liat juga ya blog sederhana ku...

rudibutz.blogspot.com

maksih.... assalamu'alaikum.....

PutrAtjeh said...

assalamualaikum,wr.wb. salam kenal, bagi saya info2nya sangat bagussss trutama untk blogger pemula seperti saya...syukran ya

soutulmujahid.com said...

widget saya tidak boleh dilihat dengan internet explorer setelah buat 'read more'.

ariwahju said...

waduh boleh juga nih tks.wass

sekedar berbagi said...

ma kasih ya artikelnya !

tegal laka laka said...

ternyata gampang juga ya ?

pakar bisnis online said...

informasinya bagus dan bisa membuat bangsa ini pintar

suprihatna said...

mbak yang langkah kedua aku bingung sekali padahal sriptnya pendek tpi malah bingung tenan!!!
www.suprihatna-supelman.blogspot.com

suprihatna said...

wah mbak itu cara bisane di edit HTML tpi klu dipake di edit tulis biasa malah gak karuan

heri said...

assalamualaikum
syukron ya artikel2y ni sangat bermafaat sx, apalg saya newbloger.
mbak gmn sih caranya agar blog kita bisa ngelink ke tetangga atau mudah dicari orang r ketika kita ketik judul atau kata2 yg berrkaitan dgn blog kita bsa dimuncul dmbah google ?
saya masih bingung, ada tutorialnya g?

Berita Teknologi Terbaru said...

kok susah ya!!!

Turfa said...

Assalamualaikum. Saya tidak menemukan kode "p data:post.body//p". Apakah karena saya menggunakan template klasik? Kunjungi blog saya di http://akudisini-turfa.blogspot.com http://turfa-a.blogspot.com

onny said...

Ass. Wr. wb.
blog bagus, saya sudah mengganti tmplate klasik menjadi template baru. saya tidak menemukan kode seperti tertulis pada blog mbak. bisakah membantu saya. blog saya http://www.seojaguar.blogspot.com

terima kasih atas pencerahannya.

farhan said...

assalamualaikumm..
saya minta tlg dunk..
saya kesulitan dalam buat nie.
oa kalau dimasukain radio roja spt web antum gimana.
tlg y jawabannya di
http://farhansweetz.blogspot.com/

Rini said...

wa'alaykumussalam warrahmatullah

sudah pernah dibahas, coba ke sini http://blogger-skin-resources.blogspot.com/2008/12/live-streaming-radio-islam.html

Ummu Fatih said...

Assalamu'alyk ya Ukht!
Jazakillah khairan atas ilmunya ya Ukht, saya banyak mengambil manfaatnya. Semoga menjadi amal sholih. Salam kenal!

Wahyu Widodo said...

Assalamu'alaikum Wr Wb
Berkali kali saya mencoba kode ini p -data:post.body//p> tapi nggak berhasil menemukannya. Adakah kode lain sebagai gantinya?
Atas penjelasannya sebelumnya saya ucapkan terima kasih.

Rini said...

wa'alaykumussalam warrahmatullah.
Tidak ada kode lain. Coba pastikan, apakah kolom kode sudah di-expand?

'Expand Widget Template' , centangin, agar keluar semua kode-kode

RGTW team said...

ijin copas ya kak

madridista said...

gue copy juga ya postingnya....
btw.. blognya sdh gue masukin jg ke daftar link di blog gue...

salam kenal...

azzam said...

syukron..
udh lama di cari caranya, baru kali ini yang berhasil. benar2 bermanfaat insyAllah

Admin (DA) said...

mantep deh infonya....walaupun ada yang sedikit berbeda dalam html saya tapi bisa diatasi...thanks

Rohis Delapan said...

assalamu'alaikum wr. wb..

saya cuma ingin sedikit membantu bagi yang kesulitan menemukan langkah pertama...
caranya gampang...
1. pastikan widgets sudah terexpand...
2. tekan "ctrl+f",
3. klo tidak ketemu seperti yang diatas, carinya text ini saja "data:post.body"...
krna, ada template yang memberikan enter setelah tag paragraph ..

sekian terima kasih...

ass wr. wb


buat yang bikin blog, tukeran link yuk...

rohis8pku.blogspot.com

itu link "kami"

Andri Gun said...

jazakillah mba

soutulmujahid.com said...

bagaimana ingin membuang 'read more' pada single page? 'read more' pada single page nampak tidak kemas

tq

muhammadandruandru@yahoo.co.id said...

wah subhanallah. . . an a sekarang paham .. . sukrom kasir ya... saya tunggu di andrusarungan.blogspot.com

MA'HAD RAUDHATUL QUR'AN said...

ku cari cari
ku cari cari
ku cari cari

T_T belum juga ketemu....

yang ini loh teh rin,,,

(p></p)

susah banget.... mohon petunjuknya... jazakillah

-- -- --

Copyright © 2008 - Free Islamic Blogger Templates - powered by Blogger