Cara Buat Read More di blogger

Sebelum membahas bagaimana cara membuat readmore di blogspot, terlebih dahulu saya akan sedikit berbicara tentang read more itu sendiri. Read more adalah suatu fungsi yang dapat meringkas suatu artikel / postingan pada blog. Intinya dengan menggunakan cara read more ini, suatu postingan tidak akan tampil seutuhnya pada halaman utama blog (Home). Melainkan hanya berupa ringkasan saja. Setelah kata / tulisan read more itu di klik, barulah seluruh postingan akan tampil.

Cara Membuat Read More Tahap Kesatu

  1. Login di Blogger, kemudian masuk ke halaman edit html
  2. Kasih tanda checklist pada kolom expand template widget
  3. Cari kode html seperti ini :
    <div class='post-header-line-1'/> <div class='post-body entry-content'>
  4. Kemudian simpan kode berikut di bawah kode yang anda cari barusan:
    <b:if cond='data:blog.pageType == "item"'>
    	<style>.fullpost { display: inline; }</style>
        	<p><data:post.body/></p>
    <b:else/>
    	<style>.fullpost { display: none; }</style>
    </b:if>
  5. Selanjutnya, dibawah kode yang baru anda simpan barusan, terdapat kode seperti ini :
    <data:post.body/>
    <div style="clear: both;"></div>
    <!-- clear for photos floats -->

    lalu diantara kode

    <data:post.body/>

    dan

    <div style="clear: both;"></div>

    Simpan kode yang ini :

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

    Sehingga hasil dari perubahan kode html selengkapnya menjadi seperti ini :

    <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> 
        <p><data:post.body/></p> 
        <a expr:href='data:post.url'>Read More .. </a> 
    </b:if> 
    <div style="clear: both;"></div>
    <!-- clear for photos floats -->

Cara Membuat Readmore Tahap kedua

Setelah selesai melakukan edit kode html-nya, sekarang kita beranjak ke bagaimana cara melakukan posting artikel supaya fungsi read more tersebut bisa kita aplikasikan. Berikut petunjuknya :

  1. Silahkan buat postingan sampai selesai (jg dulu di publish)
  2. Tentukan bagian postingan yang akan di tampilkan (ringkasan), kemudian masukan kode berikut pada akhir bagian postingan tersebut :
    <span class="fullpost">
  3. Pada akhir postingan, masukan kode ini :
    </span>
  4. Selesai Jika temen2 masih bingung, berikut ilustrasi dari cara posting artikel dengan menggunakan read more :
ini adalah text ringkasan <span class="fullpost"> ini adalah text lanjutannya </span>

Jika tetep masih belum mudeng juga, silahkan ikuti cara mudahnya disini.


78 komentar:

  1. Makasih ya..
    baru nyoba2 ternyata disini yg plg pas..
    :)

    http://go-growth-up.blogspot.com/

    BalasHapus
  2. oh ya mas....

    Sekedar menambahkan aja mas.....tambahakan aja kode dibawah Garis ini /*pada bagian CARA POSTING */
    =================================
    Ini adalah text cuplikannya
    [span class="fullpost"]
    Ini lanjutannya
    [/span]
    =================================
    tanda [ dan ] adalah < > soalnya gak bisa kalo komen pakek tanda ini,,...

    Nah nantinya pas kita Posting kita gak usah buka HTML nya dech...

    tinggal di blok teks[Ini adalah text cuplikannya] terus ganti dengan tulisan cuplikan....[Ini lanjutannya] dengan artikel lengkapanya

    Jadi kita gak ribet mondar-mandir klik Tab Edit HTML.. tinggal isi aja di Tab Compose

    Makasih ya mas.. UDAH DI COBA kok di blog http://dunia-blogger.blogspot.com/;)

    BalasHapus
  3. Makasih banyak ya mas buat smua infonya, trus cara gampang bikin template blog sendiri gimana ya mas?

    BalasHapus
  4. Thanks atas petunjuknya, baru mau coba nih. bimbelonline.blogspot.com. ;;)

    BalasHapus
  5. wah...aku udah coba di blog aku kok ngak bisa di save ya mas...mohon di bantu donk mas,,,thanks

    BalasHapus
  6. @ Chaca : Kayaknya ada yang salah deh sama copy pastenya. Coba ulangin...ya.

    BalasHapus
  7. kok gag bisa muncul yah???? knp??????

    BalasHapus
  8. mas, saya da pasang dan berhasil. tapi mas, gmana neh caranya ga spy ga keluar tampilan 'read more' utk posting yg emang ga butuh 'readmore'?

    Trims!

    BalasHapus
  9. aduh gak bisa nih...kok malah error ya??bantuin dong

    BalasHapus
  10. thanks berat
    akhirnya saya menemukan cara Read More yang cocok bagi blog saya, dan ternyata sukses.

    BalasHapus
  11. Koq not working sih... :(

    BalasHapus
  12. Mas...
    di HTML saya engga ada kode yang copy pastenya di antaranya loh...yang di tahap satu.

    jd gimana dong ?

    www.politisi-online.blogspot.com

    BalasHapus
  13. @Politisi : SIlahkan baca updatenya aja biar lebih gampang. Atau klik disini

    BalasHapus
  14. makasih mas...
    saya udah bisa.
    nanti saya bikin link ke blog sini buat tutorial para politisi yang lainnya.

    BalasHapus
  15. terimakasih udah ngebantu bikin blogger buat saya yang pemula

    BalasHapus
  16. mas setelah saya coba sesuai dengan yg mas anjurkan, malah keluar gallatnya....trus gmn?
    saya dah coba buka di tempat lain, sampai copy paste lebih dari 10 x, tpi te2p ga bsa.....
    tlong ajarin detainya donk .mas...
    trim's

    from:

    www.miftakululum.co.cc

    BalasHapus
  17. thanks alot, informatif sekali dan skrng saya ga gaptek lagi. oh ya mau tahu rekan2 sekarang ada bisnis top 2009 paling heboh, silahkan mampir di blog saya http://bisnis-top-2009.blogspot.com

    waIt your visit ....

    BalasHapus
  18. Ikut belajar. Terima kasih

    BalasHapus
  19. Blog Gue Penuh dengan Animasi Flash Coyy sekedar info buat temen temen yang suka ngeblog

    BalasHapus
  20. Blog Gue Penuh dengan Animasi Flash Coyy sekedar info buat temen temen yang suka ngeblog
    http://tips-trick-seo.blogspot.com/2009/01/seo-starter-guide.html

    BalasHapus
  21. Blog Gue Penuh dengan Animasi Flash Coyy sekedar info buat temen temen yang suka ngeblog
    http://tips-trick-seo.blogspot.com/2009/01/seo-starter-guide.html

    BalasHapus
  22. Wah makasih banyak maz mizwar,setelah beberapa hari ini saya telah belajar banyak dr blog anda dan jadilah blog sederhana saya walaupu agak sedikit aneh sich.thanks banget maz mizmar atas ilmunya.http://info-onlinebisnis.blogspot.com

    BalasHapus
  23. waduh ga bisa mas error...
    tapi thanx bwat tipsnya !
    http://fickyfauzie.blogspot.com

    BalasHapus
  24. mantep boss

    aku coba nih ...

    BalasHapus
  25. Wah... sip banget infonya. thx juga buat yg laen... sebagai ucapan terimakasih, saya akan beri kejutan besar... silahkan kunjungi http://www.formulabisnis.com/?id=aridaryanto

    BalasHapus
  26. MAKASIH KANG, SAYA UDH COBA CARA BUAT READ MORE'Y...OKE BGT BOZ...! THANKS! SeX'AN saya mw izin copy paste caraya, bwt dipost di blog sy, sklain nerapin ilmu, hehe....(malez nulis)

    BalasHapus
  27. q kok gak bisa ya boss

    T_T


    http://jogjamalam.blogspot.com

    BalasHapus
  28. makasih infonya Om, berguna banget

    http://musikumusiku.blogspot.com/

    BalasHapus
  29. HUEHEHE... ada jalan terang juga, kudu nyoba nih.. dari kemaren ga ketemu ketemu tips kaya gini.

    thanks mas, atau kalo ga keberatan mas bisa adakan kunjungan ke bLog saya, tapi masih apa adanya, maklum baru lahir 2 hari yang lalu, pakai hp pula editornya ( ga punya pc apa lagi ke warnet?!)

    www.gen-sindutan.blogspot.com

    BalasHapus
  30. makasih banyak ya mas... emang semua tips disni jitu semua, saya baru buat blog dan saya masih blum ngertii.. tapi berkat blog ini saya jadi bisa..
    makasih banyak mas...
    keep bloging

    BalasHapus
  31. thank bangget buwt tips-tips nya...

    BalasHapus
  32. YANG MW TW CARA NGEBLOG DAPET DUIT DISINI

    BalasHapus
  33. sangat membantu gue yg sedang belajar membuat blog bisnis online gratis

    BalasHapus
  34. thanks a lot buat kang rohman

    BalasHapus
  35. kenapa sya coba ikuti tuntunannya gak berhasil...
    malah kode yang dicari gak dapet-dapet...

    mohon bantuannya
    thanks before...

    http://aseli-amatiran.blogspot.com/

    BalasHapus
  36. Mas, Terima kasih. Artikelnya sangat membantu saya yamg masih pemula

    BalasHapus
  37. Saya tunggu postingan yang lain.....


    http://denithul.blogspot.com/

    BalasHapus
  38. kok..gak da mas?

    pa blogku yang aneh yo?

    :(

    BalasHapus
  39. bang punya ku kq tetap cuma muncul read morenya tapi g' meringkas textnya?tolong donk bang coba liat di www.effendi09.blogspot.com sekalian ajarin ya?

    BalasHapus
  40. sumpahhhhhh..blognya keren infonya bener2 berguna,,semenjang aq kenal blog ini,,blog q yg g ada apa2nya,,jadi menarik,,aq jd lbh sering posting,,hehe,,thankz

    BalasHapus
  41. Makasih banyak.... setelah pusing mencari kesana-kemari akhirnya dari anda yang saya temukan yang paling cocok.. God Bless you.. keep be blessing

    BalasHapus
  42. Makasih Infonya. Saya izin ngopy yach. Sekali lagi Thanks Pisan...

    BalasHapus
  43. Oh yach, ada masalah dikit nih. tampil '>'
    gimana solusinya....



    http://kammi-tasik.blogspot.com

    BalasHapus
  44. Maturnuwun Boss
    setelah cari sana cari sini
    coba sana coba sini....
    akhirnya muncul jg tuh >>read more<<<

    skalian ijin ambil link blognya
    trims...

    BalasHapus
  45. Hadoh.....
    Entah harus terharu apa seneng..
    setelah puyeng cari cara buat readmore akhirnya disni yang paling pas...

    Thanks banget...
    Hooohooo... akhirnya bisa buat readmore...

    Oh,iyah buat para pecinta korea,taiwan dan jepang silahkan mampir di blog aku..
    Basecamp-asianfans.blogspot.com klik disini

    BalasHapus
  46. mas kok HTML saya ga ada kode div class='post-header-line-1'/>
    div class='post-body entry-content'>
    gmn ya?

    BalasHapus
  47. read more muncul mas. . .
    tapi sama sekali gak motong paragraf. . .
    itu mnculnya di akhir postingan

    BalasHapus
  48. mas, kok nggak dikasih search sih di blog nya. kan jadi susah kalo mau nyari nyari.... :-)

    BalasHapus
  49. thanks y tutorial y,,,
    oy gmn y cr agr post commentnya bisa kya gni,,,
    coz d t4Q musti nglink dlu,,,
    thanks,,,

    BalasHapus
  50. nggak bisa jalan di mozila.. hiks

    BalasHapus
  51. Terima kasih mas.....
    Blog saya jadi gak ribet....

    Silakan kunjungi di....

    http://campuraduknet.blogspot.com
    (Buatan anak SMP.... Maaf jika tidak memuaskan)

    BalasHapus
  52. Tararenkyou... Aku mo coba aaahh...

    BalasHapus
  53. Mas koq kodenya ga ketemu ya? apa karena template bawaan saya ya? coba deh mas liat template-nya http://kencring.blogspot.com
    (Maaf ya mas, soalnya saya pengen bgt pake readmore & sampai saat ini blom ada yang bs) makasih

    BalasHapus
  54. Makasih bro....berkat bro semua nya jadi lancar tukran link y...newbie sih aku

    BalasHapus
  55. Ih Sumpah Aku Mulai Bingung Sebenernya Gimana Sih Udah Bisa Ada Tanda read Morenya , Tapi Kok Udah aKU kasih kode Read morenya malah Tambah Ada Di bawah Ndiri ????

    BalasHapus
  56. artikel saya ilang terus..bagaimana ya?

    BalasHapus
  57. tengktu bro... tapi agak membingungkan juga, sebelum memahaminya dimpan dulu template nya biar klo salah udah ada backup nya.

    http://hapelaris.blogspot.com/

    BalasHapus
  58. makasiiiiiiii kaka..akhirnyaaaaaaa..:D

    BalasHapus
  59. terima kasih juragan.. punya gua langsung bisa.. :)

    BalasHapus
  60. ini baru wong pinterrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

    matur suwuuuuuuuuuuuuuuuuuuuuuuuuun

    BalasHapus
  61. Sekedar berbagi aja, sekarang di Blogger/blogspot sudaha ada fitur untuk READ MORE nya.....tinggal click "insert jump break" toolbar saja...kebetulan saya posting juga di blogku:

    http://fridianto.blogspot.com/2010/03/tips-blogger-fitur-baru-read-more-di.html

    Sekalian jalan-jalan di blog A perumahan blogspot milik Kang Mizwar...:D
    Thx

    BalasHapus
  62. agak bingung gan...

    susag,hhee

    tapi tetep nice info...

    kunjungi balik ya..
    http://ekodokcell.co.cc

    thanxx

    BalasHapus
  63. sudah coba2 di blog lain,,,tapi baru disini berhasilnya,,,thanks eaaaaaaaaaaaaa,,,,,,,,,,,,,,,,,

    BalasHapus
  64. IJAZAH PALSU

    Banyak sekali diantara kita semua yang terjebak dalam lubang pengangguran.
    Menyedihkan memang ketika kita berulang kali keluar masuk dari satu perusahaan keperusahaan lain namun hasilnya tepap sama,DITOLAK!!!.
    Mungkin juga diantara kita berfikir kenapa untuk menempuh jenjang pendidikan yang tinggi membutuhkan biaya yang tidak sedikit,bahkan cenderung makin menjerat.
    Sedangkan untuk memperolah pekerjaan yang layak baik di instansi pemerintah maupun perusahaan swasta selalu disyaratkan: MINIMAL D3 atau S1.
    Salah siapa?!
    Apakah anda ingin berubah?
    Atau ingin selalu dijajah?


    ANDA BUTUH IJAZAH UNTUK MELAMAR KERJA/MELANJUTKAN KULIAH/KENAIKAN JABATAN?!?!

    -SMU:3.000.000
    -D3:6.000.000
    -S1:8.000.000

    * AMAN, LEGAL, TERDAFTAR DIKOPERTIS, BISA UNTUK MASUK(PNS, TNI, POLRI).

    JUGA MELAYANI PEMBUATAN SURAT SURAT PENTING SEPERTI:SIM, STNK, KTP, REKENING BANK, SURAT TANAH, AKTE KELAHIRAN.BPKB, N1, SURAT NIKAH, DLL.

    SYARAT:KTP/SIM,FOTO BERWARNA DAN HITAM PUTIH,UNIVERSITAS YANG DITUJU,IPK YANG DIMINTA(MAX 3,50),TAHUN KELULUSAN YANG DIMINTA,ALAMAT PENGIRIMAN YANG DIMINTA.KIRIM KE:arief_gagah@yahoo.com

    BERMINAT?

    HUB: 085736927001.

    (HANYA UNTUK YANG SERIUS SAJA)

    Nb:Semua manusia berhak meiliki pekerjaan dan pendidikan yang layak,entah dari kalangan atas,menengah dan bawah.Maka dari itu kami ada untuk anda yang mebutuhkan ijazah atau surat-surat penting lainnya.


    .TERIMAKASIH.

    BalasHapus
  65. Mantap...!!! thanks atas infonya....

    BalasHapus
  66. wah masih belum bisa udah saya coba semua mas tapi masih ga bisa soalnya jadinya tidak seperti punya mas yang baris setelah
    line-1'/>
    dibawah nya tulisanya berbeda danbanyak sekali tulisannya nyang yang terakhir mulai dari -content'> sampai</div> udah urut..
    tu masalahnya apa mas udah ada readmorenya tapi ga kesingkat masih utuh

    BalasHapus
  67. wahhh,....mas tolongin aku donk,...
    semuanya udah di coba,..tapi tetep adja gag bisa,.....hiks,..hiks,...hiks,...

    BalasHapus
  68. Oke banget artikelnya. Wah comment yg ada di blog ini begitu banyak, benar2 blogger yg sukses. Follow and tukaran link yuk. Thanks

    BalasHapus
  69. gagal....

    ada cara laen g??
    follow http://sanjardesy.blogspot.com

    BalasHapus

blogger