Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat "read more" Yang Praktis

Space atau ruang di blog kita sangat terbatas, jika kita menampilakan semua isi dari postingan atau entri maka akan memakan banyak space (tempat). Bayangkan saja orang melihat halaman yang luas, maka orang akan sulit untuk memfokuskan diri.

Sebenarnya ini sama dengan membuat read more, tapi lebih praktis, karena kita tidak perlu menambahkan sesuatu kode HTML saat memposting artikel kita. Read More yang akan kita buat akan membuat kita gampang atau mudah dalam memengal isi dari postingan kita. Beberapa kalimat akan muncul dan jika dalam postingan kita ada gambarnya juga akan disertai thumbnail (gambar diperkecil)

Ada yang memberi nama read more yang akan kita buat ini dengan nama read more liberal, oleh kang Jaloe. sekarang kita bersiap untuk mempraktekanya :z Perhatikan dan baca seksama langkah-langkahnya.

Cara Membuat "read more" Yang Praktis
1. Login ke Blogger
2. Pilih Tata Letak kemudian pilih Edit HTML
3. Beri tanda cek (centang) pada “ Expand Widget Templates “
4. Cari kode di bawah ini

</head>

5. Jika sudah ketemu taruh kode berikut ini di bawahnya

<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://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

6. Cari kode di bawah ini

<data:post.body/>

7. Ganti kode yang telah kita temukan di atas dengan kode berikut 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'> read more &#8220;<data:post.title/>&#8221;</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

8. Simpan Template Kalau sudah beres

Silahkan kamu coba sekarang, tapi berikut ini catatan yang juga perlu kita ketahui:
summary noimg= 430 adalah tinggi artikel terpenggal tampa image
summary img=340 adalah tinggi artikel terpenggal dengan image
Jika kamu kesulitan mencari kode-kode tersebut baca tipsnya di sini

58 komentar untuk "Membuat "read more" Yang Praktis"

  1. wah aku bisa belajar banyak dong dari mas kurnia
    ajarin aku ya.... :D
    salam kenal

    BalasHapus
  2. huhu.. memang praktis bangeut ngga perlu cape dua kale...

    oh iye.. ttg sitemap untuk wp sy beloem pernah nyoba boss

    BalasHapus
  3. wahhh
    tips yang keren neh keknya

    BalasHapus
  4. Read more yang dulu, lansung saya ganti dengan yang baru ini :)
    lebih praktis, lebih cepat, lebih rapi :))

    BalasHapus
  5. Keren maksih bos ilmunya.....:-/

    BalasHapus
  6. ini kan kalo di blogger,

    lha kalo di dagdigdug.com gmn?

    BalasHapus
  7. ane pake tips ente brooo..thanx brat..

    BalasHapus
  8. ajarin dunk cara layout pliss kirim ya bang ke gie.saiko@gmail.com

    BalasHapus
  9. omm....tulongin dung..
    aku ne mau buat kotak komentae di bawah entrian
    ko g bisa bisa ya...
    kasih solousinya dunk...
    aku butuh tutorial nya
    makasih ya om..

    ne imail aku
    FaiLlinGLuvH@gmail.com
    john_polo23@yahoo.co.id

    BalasHapus
  10. ehh sala kotak komentar...

    BalasHapus
  11. minta ijin nge"link" ke blog sampean ya kang!
    soale kadang ada yang tanya soal tutorial blog, and aku banyak gak bisa nya!
    mending langsung tak tunjukin suruh kunjungi blog ini aj!

    BalasHapus
  12. THANK YA...gw dapet banyak masukan dari mas septa

    BalasHapus
  13. Thankz tipsnya mas. Minta izin posting di blogku ya...:D

    BalasHapus
  14. -x(
    kakak yang baik..
    thank bwt segala informasinya..
    kita mu ikutan lomba antar blog di kota kami..
    kalo bikin read more ada cara di buku..
    tapi bikin pusing,terus jadinya blog kita rusak parah..
    thank ya kakak !!
    :)

    BalasHapus
  15. Mantap bos,Trim's

    BalasHapus
  16. Sudah tak jajal bos...lihat aja blogku...trims ya boss.

    BalasHapus
  17. kiri, ke palembani.blogspot.com ;) " :-t heheh aduh b-(

    BalasHapus
  18. thank bozz za... from http://massyaifur.blogspot.com

    BalasHapus
  19. mampir yukk,

    blognya ga kreatif, maklum baru belajar

    uchealavdiv.blogspot.com

    BalasHapus
  20. terimakasih read more nya sangat bermanfaat bagi saya

    BalasHapus
  21. MANTAP .....
    Hahahha... ^____^

    BalasHapus
  22. Subhanallah, syukron.
    ini yang slama ini ana cari..... :))
    Jazakallahu khair....

    BalasHapus
  23. syukron, tutorialx lengkap..... ;)

    BalasHapus
  24. makasih banget,,

    www.aristokrat-scienza.blogspot.com

    BalasHapus
  25. Trims infonya. Tapi kenapa di dalam kolom Expland Template Widget blog saya tidak ada kode ini : yaaaa??? Sudah saya cari menggunakan Ctrl + F, tapi tetap tidak ada. Di bagian manakah kode itu??? Trims...

    BalasHapus
  26. NB : yang saya maksud kode ini ialah kode data:post.body/ trims...

    BalasHapus
  27. thank mas kurnia,,,,, keren bgt blognya,,,,,,,,,,,,,,sukses brooootherr

    BalasHapus
  28. disertai thumbnail (gambar diperkecil),.
    kok gambar na msh besar yha gan??
    ngk da thumbnail na?
    :((

    BalasHapus
  29. Makasih banyak ye bang atas ilmunye .... ;)

    BalasHapus
  30. om kurnia ,, gmn ya klw mau hapus readmore nya ...

    BalasHapus
  31. om, gimana caranya agar halaman pertama muncul beberapa postingan yg ada readmorenya ????

    @mohon bantuannya :)]

    BalasHapus
  32. sorry nih bro....gue coba dulu baru komen.....soalnya gue udah prnah coba dari yg lain tapi gagal.....pas gue coba dri punya bro ternyata berhasil thanks ya bro^_^

    gue akan belajar trus dri bro....mohon bantuannya....:D

    BalasHapus
  33. mksh kang ats infonya na

    BalasHapus
  34. Ma kasiiiiiiiiiiih :) udah berapa hari ini gak bisa2 ngutak atik read more. Maklumlah newbie :D pas liat artikel ini, dicoba, daaaan bisaaaa. Sekali lagi ma kasih ya ^_^

    latifahsaja.blogspot.com
    sophieparisonlineshop.blogspot.com

    BalasHapus
  35. kok gak ketemu ya? nya?

    mohon pencerahannya

    BalasHapus
  36. Makasih mas kurnia, Tips ini sangat membantu blog saya yang begitu sederhana... hahahaha :))

    BalasHapus
  37. kak, dari dulu pusing, dimana ya kata "expand widget template" ? (di www.blogger.com)

    BalasHapus
  38. kak, dari dulu pusing, dimana ya kata "expand widget template" ? (di www.blogger.com)

    BalasHapus
  39. gan, saya dulu pernah buat read more juga..
    tapi sudah skitar 5 bulan tiba tiba readmore nya ga berfungsi lagi.
    itu knapa ya?
    cara memperbaikinya gmn?
    bls ya gan ke sini sheila_cut3@yahoo.com
    thx

    BalasHapus
  40. makasih petunjuknya bang..
    kini read more-nya sudah terpasang dengan baik..
    tapi..
    saya ingin thumbnail yang ada di posting saya sebelum di klik read more, dipotong, bukan di ubah ukurannya (dipipihkan) kira2 caranya gimana ya?
    mohon bantuannya..

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

    BalasHapus
  42. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  43. Terima kasih atas infonya gan
    Sangat berguna sekali, caranya pun mudah dan praktis

    BalasHapus
  44. mas kurnia, udah ane coba dan berhasil. tapi kok halaman utamanya cuma muncul satu post nya yah.. kalau mau munculin lebih gimna ??

    BalasHapus
  45. kok udah dicoba tetp aja read more-nya ngga nongol apa ada yang salah yak ......
    :-/

    BalasHapus
  46. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  47. Tutornya bermanfaat banget gan ..

    BalasHapus

Berlangganan via Email