Rabu, Januari 28, 2009

Cara membuat Readmore pada Blogger

Buat teman-teman yang baru mulai membuat blog mungkin sering melihat di blog-blog ada tulisan "Read More", "Baca Selanjutnya", "Selengkapnya" atau atau istilah yang sejenisnya. Mungkin ada yang bertanya apa kegunaannya.

Readmore adalah pemenggalan kalimat pada posting suatu halaman, Pemenggalan halaman posting biasanya ditandai dengan "Read More", "Baca Selanjutnya", digunakan sebagai penanda (pengarah) bahwa kalimat pada postingan masih mempunyai kelanjutan,Read More dan juga berguna mempersingkat halaman posting yang panjang dan mempercepat waktu loading halaman web. Hal ini sangat terasa efeknya jika halaman yang dipenggal panjang dan berisi banyak gambar atau video.

Untuk membuat readmore ikuti prosedur berikut: (script di artikel ini bersumber dari www.o-om.com) namun sedikit saya ubah redaksinya agar sesuai dengan script template default blogger.

1. Login ke dashboard =>Tata letak => Edit HTML , centang pada "Expand widget template"

2. Untuk menghindari kesalahan edit script atau tidak kompatibenya script, lakukan backup template. Klik "downlnad template lengkap" untuk backup template

3. Cari kode dibawah ini:

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


Untuk memudahkan pencarian script di atas gunakan fasilitas Find pada browser firefox
Pada menubar pilih Edit => Find

Di bagian bawah browser akan muncul kotak find, masukkan kode di atas
Tekan Next untuk memulai pencarian

4. Tambahkan kode script 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>



Hasilnya tampak seperti di bawah ini

<div class='post-header-line-1'/>
<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>



5. Cari kode berikut:

<data:post.body/>

Tambahkan kode script berwarna merah, (tulisan Readmore dapat anda ganti dengan Baca Selengkapnya, atau kata sejenisnya)

<a expr:href='data:post.url'>Readmore </a>
</b:if>


hasilnya tampak seperti di bawah ini

<data:post.body/>

<a expr:href='data:post.url'>Readmore</a>
</b:if>


Klik Tombol Simpan template

6. Kembali ke Dashboard, pilih Pengaturan => Format
Pada bagian "Template Posting" masukkan kode berikut
<div class="fullpost">
</div>

Lihat gambar di bawah ini, Klik tombol Simpan Setelan

7. Secara default script di atas akan dibuat secara otomatis pada saat membuat postingan baru, Untuk melihatnya Pada bagian atas kotak teks postingan, pilih "Edit Html", jika memilih "Tulis" atau "pratinjau" script tidak muncul (hidden).
Contohnya bisa dilihat di bawah ini:

Tekan saja enter pada saat membuat postingan, nanti setelah semua teks dalam postingan lengkap, tinggal cut saja script <div class="fullpost">
ke bagian teks yang akan dipenggal.


Hasilnya setelah dipublish akan tampak seperti di bawah ini:


Ada beberapa template yang tidak sesuai dengan script di atas, anda bisa mencoba menggunakan script untuk membuat readmore versi 2 (Versi 2 ini telah saya ujicoba di template denim dan minima dan sukses)

Update nov 2009

Saat ini untuk membuat readmore di blogger (blogspot) sudah tidak perlu menggunakan script lagi, anda cukup menggunakan/mengaktifkan new editor blogger, dan menggunakan toolbar read more, paduannya bisa dilihat disini membuat readmore di blogger (blogspot)






Artikel Terkait :



25 komentar:

ATDS corp mengatakan...

salam kenal
kunjungi www.atds.co.cc

deathwish mengatakan...

tengkyu bleh,

tp pa penggunaan template juga berpengaruhkah??

soalnya dtemplate gue ga ada code yg u bilang:

div class='post-header-line-1 ..dst

mohon bimbingannya..

baru belajar ngeblog bleh.. :):)

Artikel Komputerku mengatakan...

Jika di dalam source template anda codenya tidak sama, saya sarankan sebaiknya script di atas jangan dipasang, karena bisa mengakibatkan konflik antar script, fatalnya biasanya postingan tidak muncul.
Sebaiknya coba mencari contoh membuat read more di blog yang lain yang scriptnya sama dengan source template anda.
Script di atas berfungsi dengan baik di beberapa blog yang saya buat.

alun mengatakan...

oke tengkyu banyak buat penjelasanya :):):)

T3CHN0 & S41n5 mengatakan...

terima kasih atz infonya......

T3CHN0 & S41n5 mengatakan...

terima kasih

T3CHN0 & S41n5 mengatakan...

Bagaimana bisa menambahkan sub bab pada blog????,, terima kasih atas informasi bwt readmorenya

Artikel Komputerku mengatakan...

@T3CHN0 &S41n5
Jika maksud anda sub bab adalah Label (kategori arikel), maka bisa tambah gadget label ke sidebar
Dibagian blog saya bisa dilihat contohnya di sidebar:

Kategori Artikel
* Adsense PTC Lokal (6)
* Antivirus (7)
* Cara buat email (11)
* Data dan password recovery (2)
* Dll

Panduannya bisa dilihat disini:
http://artikelkomputerku.blogspot.com/2008/12/004-menambah-gadget-label-pada-sidebar.html

vitaminstobody mengatakan...

mas saya sudah ganti tamplete trus d tampelate saya yg sekarang tidak ada tulisan
div class='post-header-line
div class='post-body entry-content
truz gmna mas mengatasinya,,
makasih sebelum na,,

RemaLiendha mengatakan...

Good... sgt mmbantu skalii .

free download mp3 mengatakan...

Wah,,, terimakasih mas..!! keren banget artikelnya...

Taopik Kurrohman mengatakan...

kok gak jalan ya!!!

SYAFRI mengatakan...

ko postingannya malah ilang smua....????????????????????????????????????????????????

pas d'amis mengatakan...

http://aucunaccompagnement.blogspot.com
yang otomatis ada ngak

anto freax mengatakan...

kalo bikin read more buat artikel yang kita bikin di side bar dengan menggunakan gadget java script/html gimana? thank's yak buat info dan ilmunya

Artikel Komputerku mengatakan...

@vitaminstobody,Taopik Kurrohman,SYAFRI
Coba pakai readmore untuk new editor blogger, tidak perlu pakai script, cukup klik tombol readmore (mirip di blog wordpress)
bisa dilihat disini
http://artikelkomputerku.blogspot.com/2009/11/membuat-readmore-di-editor-baru-blogger.html
@pas d'amis
Saya sekarang hanya pakai tombol readmore tanpa script , kalo auto readmore tidak ada, coba dicari di google pakai keyword auto readmore
@anto freax
Kalo maksudnya readmore yang sidebar seperti di recent post pada blog www.komputerseo.com
Saya hanya pakai gadget blogger : recentpost, maka otomatis readmorenya akan muncul.

anto freax mengatakan...

mas biar simpel dengan pertanyaan yang saya maksud dengan read more side bar sebelumnya, coba buka www.wartaone.com. dia situs berita tapi layoutan templetenya dengan menggunakan blog

dsev Ngopian mengatakan...

mas klo postingnya udah kebuka kok masih ada read more...knp yach?

Artikel Komputerku mengatakan...

@anto freax
Kalo lihat websitenya, script yang diubah bukan disidebar tetapi di bagian posting.
Di bagian bawah wartaone ada link untuk download templatenya versi wordpress, kalo ingin template untuk blogger bisa dicari di situs penyedia template gratisan, cari di google pakai keyword blogger template, anda bisa preview per template biasanya ada contoh/demo dicari yang mirip layoutnya
@dsev Ngopian
mungkin script readmorenya terulang 2 kali, coba di cek di script templatenya
Saat ini untuk membuat readmore bisa menggunakan tolbar readmore tanpa menggunakan script, coba dihapus saja script readmore, kembalikan ke keadaan standar, kemudian di saat membuat postingan gunakan toolbar readmore bisa dilihat disini:
http://artikelkomputerku.blogspot.com/2009/11/membuat-readmore-di-editor-baru-blogger.html

Salon Oyah mengatakan...

Met siaaaangngng... makasyih infonya, bro... sgt bermanfaat, cuma mo melanjutkan pertanyaan anto freax... gimana mengaktifkan Recent Posts yaaa?
Btw, please follow me jgaa yaaa... di http://salonoyah.blogspot.com ... tengkyuuuuu

Artikel Komputerku mengatakan...

Ada beberapa template yang mungkin mirip seperti yang anda cari,
Coba dilihat disini
http://visionwidget.com/showcase/graphics/334-free-magazine-blogger.html

Ida Ayu Sutarini mengatakan...

wah kok postingan saya semuanya ilang ya??
padahal codenya cocok lo ??
mohon bimbingannya :D

Artikel Komputer mengatakan...

Kalo postingannya hilang, coba ganti template mbak, Untuk membuat readmore sekarang tidak perlu pakai kode, sudah ada tombol readmore blogger di toolbar teks editor, coba dilihat panduannya disini
membuat readmore di blogger (blogspot)

gina istiqomah mengatakan...

sebelumnya makasi banget buat tips nya.
tapi, ak udah ikutin semua step* nya, tapi gk berubah, sm aja.
gk ada readmore nya juga ? jd apanya yah yg salah ?

Jadwal Resmi MotoGP 2012 mengatakan...

makasih bnyak bro ud share,lumayan nambah wawasan saya :)