305

Cara Membuat Read More Otomatis di Blog

Bisnis Berkah Halal
Cara Membuat Read More Otomatis di Blog
Cara membuat Read More otomatis di Blogspot dengan menambahkan kode javascript pada template blog. Kali ini yang akan saya bahas mengenai cara membuat read more di blogspot atau blogger. Kenapa cara membuat read more di wordpress tidak dibahas juga? wah kalao read more di wordpress tidak bisa dibuat secara otomatis, tapi dengan cara manual setiap postingan. Ok kita mulai bahasan mengenai cara membuat read more otomatis di blogspot.

Bagaimana Cara membuat Read More otomatis di blogspot?

Cara membuat read more otomatis di blogspot sangat mudah. Sebelum melangkah  ke cara membuat read more otomatis di blogspot lebih baik kita tahu apa itu read more? dan apa fungsi read more? Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Sekarang lanjut ke langkah cara membuat read more otomatis di blogspot.

Langkah-langkah cara membuat Read More Otomatis di Blogspot

  • Login ke Blog anda
  • Buka halaman design > Edit HTML > centang Expand template widget
  • Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
  • Paste kode berikut tepat dibawah </head>
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>
  • Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  ( seperti biasan gunakan CTRL + F untuk mempermudah pencarian. Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.
  • Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
  • Finish simpan template dan lihat hasilnya
Cara membuat Read More otomatis di Blogspot ini bisa anda rubah sebagian. Yang bisa dirubah adalah berwarna merah saja dan berikut ini adalah keterangannya :
  1. summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
  2. summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
  3. img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan
  4. img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
  5. Anda juga bisa mengubah Icon read more http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif silahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya " >> Read more ", maka anda tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.
Semoga artikel cara membuat read more otomatis di blog ini bermanfaat. Selamat mencoba dan semoga berhasil.
    Tweet

    305 comments:

    1. nyimak dulu gan, thanks sebelumnya :)

      BalasHapus
    2. monggo mz, sama sama dan terima kasih sudah berkunjung

      BalasHapus
    3. wah keren... dah dicoba, berhasil. Tq

      BalasHapus
    4. hehe.. alhamdulillah kalo gitu mbak. :)

      BalasHapus
    5. Berhasil......
      sudah beberapa trik yang sudah dicoba tapi hasilnya nihil.
      Thank's bgt yak...
      izin copas ke blogku boleh ga mas....???

      BalasHapus
    6. @Heni_malini alhamdulillah kalo sudah berhasil mbak.. silahkan kalu maucopy ke blognya, jgn lupa kasi referensi link yah hehehe . thanks sudah mampir disini

      BalasHapus
    7. Widy Apriyanto Hi NatsirNov 15, 2011 05:24 PM

      berhasil.... makasih yah...
      tapi artikel q udah semuanya trus ada read more ?
      bantuannya dong

      follow blog gua dong
      http://iandpryanto.blogspot.com/

      BalasHapus
    8. success sob

      makasih banyak atas infonya,,

      BalasHapus
    9. @Widy Apriyanto Hi Natsir
      mantab.. thanks ya dah mampir

      BalasHapus
    10. Peluang Bisnis OlineNov 19, 2011 06:10 PM

      makasih ya infonya...

      BalasHapus
    11. sama sama :)

      BalasHapus
    12. Aslmkm... mksh mas tutorialnya..tdk ribet dan saya praktekin langsung jadi. cuma bagaimana ko artikel yang brada di laman Read morenya ga bs dibaca tiap clik read more cuma cuma artikel yang sama munculnya..mhn pencerahanya

      BalasHapus
    13. riko dwi santosoNov 20, 2011 12:13 AM

      kak knapa laman saya juga ada readmore nya dan gak bisa di buka

      BalasHapus
    14. @greycoo: walaikum salam mz. kalau masalahnya itu mungkin salah penempatan kode. blognya yg mana mz?

      BalasHapus
    15. @riko dwi santoso: g bisanya knapa mz. barusan saya lihat blognya sudah bagus dan ada read more nyatuh :D

      BalasHapus
    16. Arit Nuansa PagiNov 20, 2011 06:01 AM

      bingung naruhnya di data post body, kaeknya lupa gak disebutin,

      BalasHapus
    17. @Arit Nuansa Pagi: bukan ditaruk mz, tapi di ganti :D

      BalasHapus
    18. waaahh kereeenn. thx banget infonya. nice!

      BalasHapus
    19. @Indradja: yup sama2 masbro :) thanks sudah mampir

      BalasHapus
    20. Toriv Blog&#39;zNov 21, 2011 02:14 AM

      tnk's gan udah ana coba , n suksess..

      BalasHapus
    21. seep berhasil gan

      makasih ya ....

      maju terus

      BalasHapus
    22. gak sukses brow artikelnya tetep panjang gimana nih???

      BalasHapus
    23. @Saplak: sampean sudah pakai readmore sebelumnya? kalo iya biasanya terdapat 3 kode . coba dikembalikan dulu ke kode standard

      BalasHapus
    24. @cobacendy: yup sama2 sob.. thanks sudah berkenan komentar dsini :)

      BalasHapus
    25. Blog&#39;e Cah MajenangNov 24, 2011 10:53 PM

      gan kaga ketmu yang data post nya

      BalasHapus
    26. @Blog'e Cah Majenang: coba juga cari yg
      <p><data:post.body/></p>

      BalasHapus
    27. Makasih banyak om..sunguh bermanfaat dan berhasil di praktekan..sebelumnya saya di buat pusing ama postingan sejenis tapi ga berhasil..dimana saya pemula.

      BalasHapus
    28. @panen uang: iyah sama2 mas...:) thanks juga sudah mampir

      BalasHapus
    29. Andrey KusanagiNov 25, 2011 12:50 PM

      thx sob atas infonya
      mampir sob di AndreyKusanagi.Com

      BalasHapus
    30. @Andrey Kusanagi: iyah, makasih sudah mampir

      BalasHapus
    31. Flaviana, Dude :]Nov 25, 2011 09:12 PM

      gotcha:D thanks a lot

      BalasHapus
    32. terima kasih,
      sangat membantu

      BalasHapus
    33. @mj_rock: iyah sama2 :)

      BalasHapus
    34. my name is AdheNov 26, 2011 03:37 AM

      waduh gan... makasi banyakkkkkkkkk........

      BalasHapus
    35. @my name is Adhe: iyah sama2..maaf linknya saya hapus,, :)

      BalasHapus
    36. RahmiFitriYantiNov 26, 2011 10:40 AM

      makasih ya, udah banyak artikel tentang reed more yang aku baca, cuma ini yang berhasil. thanks :D

      BalasHapus
    37. @RahmiFitriYanti: sama2 mbak. :) sudah malem masih lembur aja nih :D

      BalasHapus
    38. permisi om..saya mau tanya nih...di post saya berhasil membuat read more dari metode om, tapi kenapa di halaman saya muncul read morenya ga bisa terbuka...alias terpenggal tanpa ada kelanjutannya kalo dklik read morenya....mohon penjelasannya

      BalasHapus
    39. @panen uang: barusan saya lihat blognya sudah benar mz.. tidak pake gambar kan hehe.. mantab :)

      BalasHapus
    40. Salam.
      Terima kasih perkongsian ilmu ini.

      BalasHapus
    41. Maura Indria MeidianingNov 28, 2011 12:58 AM

      Makasih...
      berguna banget....
      jgn lupa mampir di mauraindria.blogspot.com ya.....

      BalasHapus
    42. Syukran akhi.....

      BalasHapus
    43. izin coba ya gan...
      Terima kasih atas infonya...

      BalasHapus
    44. @roha: iya sama2 thanks juga sudah mampir

      BalasHapus
    45. @dakwahmudah: heuhe apanya sukuran?

      BalasHapus
    46. @zankjex: silahkan mzbro

      BalasHapus
    47. @Maura Indria Meidianing: iya sama2 thanks juga sudah mampir

      BalasHapus
    48. Achmad SofyanDec 1, 2011 05:26 AM

      Halo mas lam knal nih.
      saya newbie, dah saya coba tapi postingnya malah hilang...mohon pencerahannya donk.
      ditunggu kunjungan balknya ya.

      BalasHapus
    49. coba di ulangi dan lebih teliti lagi.. kalau masih gagal laporan lagi :) biasanya yang bikin masalah penempatan kode yg salah :)

      BalasHapus
    50. thanks gan tutor nya berguna bngets

      BalasHapus
    51. @yudi s3ns3: iyah sama2 :)

      BalasHapus
    52. thanks gan

      BalasHapus
    53. @threerus_tm: iyah sama2

      BalasHapus
    54. Kerah LedrekDec 4, 2011 09:02 PM

      mangstab juragan, btw ane izin upload dulu script js di atas ke lampiran sitesgoogle ane ya gan, ntar ane link dari situ aja gan biar nggak ngrepotin he he

      BalasHapus
    55. @Kerah Ledrek: silahkan masbro :)

      BalasHapus
    56. Kerah LedrekDec 4, 2011 11:38 PM

      Tanya gan, kalo browsenya pake mozilla kenapa gak ngaruh ya?

      BalasHapus
    57. @Kerah Ledrek: g ngaruhnya gimana bro?

      BalasHapus
    58. Kerah LedrekDec 5, 2011 12:16 AM

      pagenya tampil penuh lagi gak kepotong ganz, sekarang malah pake chrome juga kembali kayak semula....apa gara2 barusan ane addurl ama webmaster ya :hammers

      BalasHapus
    59. Kerah LedrekDec 5, 2011 12:20 AM

      boleh cek lapak nubi ganz, kerahledrek.tk
      btw ane izin kopas dech bt belajar :Yb tapi ane cantumkan kok sumbernya disana :maho

      BalasHapus
    60. @Kerah Ledrek: add Url g ngaruh kok.. ini blog saya jg pake cara tsb.. :) salah penempatan kode pasti hehe. profil sampean g isa dibuka, redirect ke Google Plus

      BalasHapus
    61. Kerah LedrekDec 5, 2011 01:03 AM

      @BamZ:

      kemungkinan sih gitu mas padahal td dah ok kok, cara nyari kesalahannya gimana nih kira2 he he

      BalasHapus
    62. @Kerah Ledrek: caranya sama mas seperti anda memasangnya gimana, di paasang di sekitar kode apa,, atau kalau pakai Tulisan "read more" cari kata tersebut. atau link gambar readmorenya

      BalasHapus
    63. Kerah LedrekDec 5, 2011 01:28 AM

      weis betul ganz, salah kode he he sip dah tutorialnya ganz thx berat neh infonya. keep posting gan :Yb

      BalasHapus
    64. @Kerah Ledrek: yoa mas sama2 :)

      BalasHapus
    65. sudah berhasil. makasih banget tuto-nya ya.

      BalasHapus
    66. @nisa: sama2 mbak :)

      BalasHapus
    67. gan, ane dh coba tapi koq di halaman (page) readmore'y gak bisa ke buka. Tapi klo di postingan bisa. Gmn ya?

      BalasHapus
    68. Gan... yg ini kan, setelah diklik read morenya langsung loading web kita..
      ada ga yg langsung otomatis munculin full post tanpa loading gi..??

      Ty Gan

      BalasHapus
    69. @Anonim: iyah halaman page ngikut juga, masih belum ada solusi nih :) nanti kalo sudah ada saya posting :)

      BalasHapus
    70. @Ir. UjaNk: ya masbro saya juga masih cari cara biar read more kayak Spoiller modelnya. jadi tanpa loading .. doakan ada deh caranya hehe

      BalasHapus
    71. tanks infonya
      mohon dicek
      http://a-r-su-b.blogspot.com

      BalasHapus
    72. Kerah LedrekDec 8, 2011 12:59 AM

      @BamZ:
      Update ganz, ane nemu yang bisa tanpa script juga, it's work :Yb
      reff : http://blog.ahmadrifai.net/2011/04/membuat-read-more-tanpa-script.html

      BalasHapus
    73. gagal mulu saya gan,,,,coba aj mampir di http://k-popnewsix.blogspot.com

      BalasHapus
    74. Bro saya baru mau coba, tertarik dengan banyaknya yg berhasil, tapi nyari script ini : "data:post.body dan p data:post.body p" gak ketemu, gimana Bro, minta pencerahanya, tq

      BalasHapus
    75. @AullyARSA:di coba lagi hehe
      @Suhalim: di cari salah satunya saja mz :)
      @Kerah Ledrek: sip

      BalasHapus
    76. My Blogg DiaryDec 12, 2011 06:30 PM

      mkasih ya ,postingnnya ,sangat bermanfaat buat pemula seaperti saya ..
      janan lupa berkunjung ya do www.arhyblogger.blogspot.com

      BalasHapus
    77. Peluang bisnis bagi mahasiswa, klik disini untuk membacanya http://sejahterawithoriflame.blogspot.com/p/peluang-bisnis-modal-kecil-online.html

      atau untuk info bisa hubungi kami di independent_oriflame@consultant.com

      BalasHapus
    78. @Median: semoga sukses bisnisnya :)

      BalasHapus
    79. HASIL KARYAKUDec 14, 2011 08:23 PM

      Mohon bantuannya??blognya bagus sy sdh coba read morenya muncul tp kok g berubah.trim's...

      BalasHapus
    80. @HASIL KARYAKU: mungkin salah penempatan kodenya. coba di ulangi lagi dengan lebih teliti

      BalasHapus
    81. yah mudah - mudahan berhasil, thanknya...

      BalasHapus
    82. @andika: iyah,,, semoga berhasil

      BalasHapus
    83. KANTOR URUSAN AGAMA KECAMATAN KERINCI KANANDec 15, 2011 05:48 AM

      saya mencari kode dalam HTML blog saya gak jumpa padahal dah pake ctrl + f, gimana ni mas ....

      BalasHapus
    84. @KANTOR URUSAN AGAMA KECAMATAN KERINCI KANAN: semua blog pasti ada kode tersebut mz, karena kode tersebut adalah kode isi artikel atau posting

      BalasHapus
    85. indro haryo prabowoDec 15, 2011 08:18 AM

      mantep infonya ...

      BalasHapus
    86. @indro haryo prabowo: yup sama2 :)

      BalasHapus
    87. Maksih gan tutornya Berguna banget.....

      BalasHapus
    88. @BobS84: iyah gan sama :)

      BalasHapus
    89. Oki SatriyonoDec 18, 2011 12:19 AM

      ikut nyimak Gan

      BalasHapus
    90. @Oki Satriyono: kalo cuma nyimak g kira bisa :). harus praktek kwkkw

      BalasHapus
    91. gan, boleh nyedot gak?
      http://ronaldorico.blogspot.com

      BalasHapus
    92. @ricoronaldo: nyedot apanya

      BalasHapus
    93. Tips for Unlock Iphone 4 w Anyone who has access to an iPhone ought to happen to be disclosed to your account additionally they requires unlock iPhone 4 g ideas, ordinarily connected with specialized computer program that may be in addition protected.Then again, it may be rather frustrating for you to unlock someone's i actually cell phone if you refuse to find a very good completely new apple iphone4 detaching the shut at program.There are a variety in promotions in all places, yet, with no specific realizing that are available, entirely caught, therefore several options some vast hard cash relating to almost nothing. korvax

      BalasHapus
    94. @Anonim: sini kasih saya Iphone gratis kwkakwa

      BalasHapus
    95. Hojindo: Hospitality Job IndonesiaDec 29, 2011 05:15 AM

      tiap saya butuh sesuatu, googling trus nemu beberapa artikel yang saya butuhin dan nyoba, rata2 ga berhasil tapi kalo make caranya mas BamZ pasti berhasil...thanks utk ilmu2 nya mas Bamz Samson :D

      BalasHapus
    96. @Hojindo: Hospitality Job Indonesia: iyah sama2 mas. :) jangan lupa gabung di twitter sama FB fansclub :)

      BalasHapus
    97. pengen nyoba tapi kok susah ya
      http://puisir3maja.blogspot.com/ maen disini ya saya masih baru

      BalasHapus
    98. sang petualangDec 30, 2011 05:53 AM

      wah makasi banget mas atas infonyamampir ya http://dhe2-komputer.blogspot.com/

      BalasHapus
    99. imam asriningratDec 30, 2011 08:07 AM

      makasih atas sarannya

      BalasHapus
    100. @raive: apanya yang susah.

      BalasHapus
    101. @sang petualang: yah sukses promonya

      BalasHapus
    102. add media computerJan 1, 2012 04:37 AM

      Ane udah coba ternyata sukses gan...
      mksh gan...

      BalasHapus
    103. klo membuat readmore tanpa javascript gmn bos

      BalasHapus
    104. @add media computer: ok sama2 gan :)

      BalasHapus
    105. @Berita Aneh: wah enak tuh bisa lebih cepet loadnya

      BalasHapus
    106. Erla Ayu PertiwiJan 9, 2012 07:03 PM

      kok kode-kodenya aku cari gak ada yah? semua udah aku coba padahal. Mohon pencerahannya :)

      BalasHapus
    107. @Erla Ayu Pertiwi: kode yang mana mbak,, bisa lebih dijelaskan lagi

      BalasHapus
    108. gan ada yang tau mengatur gambar di home blog gak? mksdnya kan kadang ada gambar yang sebelum read more itu pasti tertera kan di home blognya. nah cara mengatur gambar itu agar kuran gambarnya lebih kecil di home agar post2 yang sebelum read more itu sama semua ukuran gambarnya. dan ketika kita read more baru muncul gambar dengan ukuran yang sebenarnya..
      please bantu ya para master..

      BalasHapus
    109. @Libas Habis: cari img_thumb_width , itu untuk ukuran lebar dan img_thumb_height untuk tinggi :D

      BalasHapus
    110. Mantab.......
      Berhasil, thnks informasinya.....

      BalasHapus
    111. @Joenoes: okeh mas sama2

      BalasHapus
    112. Lagi belajar.
      Bang saya udah pasang redmore otomatis dari tutor abang. tapi pas saya posting baru kenapa yang muncul kode2 gtu, coba liat di www.diz-net.blogspot.com
      tolong solusinya bang, thnx...

      BalasHapus
      Balasan
      1. barusan saya cek di blognya sudah bener tuh

        Hapus

    ◄ Posting Baru Posting Lama ►
     

    Copyright 2011 BLog Bamz Submit Artikel | About | Contact | Sitemap | Guest | Privacy