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.


79 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. 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
  12. @Politisi : SIlahkan baca updatenya aja biar lebih gampang. Atau klik disini

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

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

    BalasHapus
  15. 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
  16. 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
  17. Ikut belajar. Terima kasih

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

    BalasHapus
  19. 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
  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. 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
  22. waduh ga bisa mas error...
    tapi thanx bwat tipsnya !
    http://fickyfauzie.blogspot.com

    BalasHapus
  23. 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
  24. 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
  25. q kok gak bisa ya boss

    T_T


    http://jogjamalam.blogspot.com

    BalasHapus
  26. makasih infonya Om, berguna banget

    http://musikumusiku.blogspot.com/

    BalasHapus
  27. 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
  28. 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
  29. thank bangget buwt tips-tips nya...

    BalasHapus
  30. Terima kasih ilmunya.

    Oh iya ni ada tutorial gratis juga di YUPOCOM.COM

    semoga bermanfaat.

    BalasHapus
  31. YANG MW TW CARA NGEBLOG DAPET DUIT DISINI

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

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

    mohon bantuannya
    thanks before...

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

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

    BalasHapus
  35. Saya tunggu postingan yang lain.....


    http://denithul.blogspot.com/

    BalasHapus
  36. kok..gak da mas?

    pa blogku yang aneh yo?

    :(

    BalasHapus
  37. 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
  38. 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
  39. Makasih banyak.... setelah pusing mencari kesana-kemari akhirnya dari anda yang saya temukan yang paling cocok.. God Bless you.. keep be blessing

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

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



    http://kammi-tasik.blogspot.com

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

    skalian ijin ambil link blognya
    trims...

    BalasHapus
  43. 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
  44. mas kok HTML saya ga ada kode div class='post-header-line-1'/>
    div class='post-body entry-content'>
    gmn ya?

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

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

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

    BalasHapus
  48. nggak bisa jalan di mozila.. hiks

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

    Silakan kunjungi di....

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

    BalasHapus
  50. Tararenkyou... Aku mo coba aaahh...

    BalasHapus
  51. 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
  52. Makasih bro....berkat bro semua nya jadi lancar tukran link y...newbie sih aku

    BalasHapus
  53. 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
  54. artikel saya ilang terus..bagaimana ya?

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

    http://hapelaris.blogspot.com/

    BalasHapus
  56. makasiiiiiiii kaka..akhirnyaaaaaaa..:D

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

    BalasHapus
  58. ini baru wong pinterrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

    matur suwuuuuuuuuuuuuuuuuuuuuuuuuun

    BalasHapus
  59. 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
  60. agak bingung gan...

    susag,hhee

    tapi tetep nice info...

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

    thanxx

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

    BalasHapus
  62. 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
  63. Mantap...!!! thanks atas infonya....

    BalasHapus
  64. 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
  65. thanks yg mas....

    komikblaze.blogspot.com

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

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

    BalasHapus
  68. gagal....

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

    BalasHapus

blogger