Cara Membuat Read More Otomatis

Read More Otomatis – Read more dalam blog sangat berperan penting bagi tampilan halaman depan blog tersebut. Pemasangan read more dapat meringkas kalimat dalam satu postingan yang panjang menjadi lebih pendek. Sehingga, dengan adanya read more yang meringkas tulisan ini dapat membuat halaman depan blog kita menjadi lebih rapi dan nyaman dilihat.


Jika kita memiliki blog yang menggunakan template bawaan dari blogspot, kita tentu tidak akan memiliki template yang dilengkapi fungsi read more di dalamnya. Blogspot memang tidak menyediakan fasilitas read more dalam template blognya. Sehingga, jika kita ingin menggunakan fasilitas read more ini di dalamnya maka kita perlu memasangnya secara manual. Read more memiliki banyak fungsi seperti meringkas tulisan dari sebuah postingan yang muncul di halaman depan blog, meningkatkan pageviews dan durasi berkunjung di blog, hingga manfaat utamanya yaitu membuat tampilan halaman depan blog menjadi lebih ringkas dan rapi ketika dilihat.

Untuk memudahkan dalam proses penggunaannya, kita dapat memasang read more yang bersifat otomatis. Pemasangan read more otomatis ini berbeda dengan read more biasa karena read more otomatis akan meringkas dan melakukan fungsi read more dalam setiap postingan di halaman depan blog kita tanpa perlu memasukan kode HTML tertentu ketika menerbitkan postingan blog secara manual. Sehingga, pemasangan read more otomatis ini tentu lebih mudah dan menguntungkan daripada read more biasa.

Pemasangan read more otomatis di blog ini juga mudah dilakukan. Kita hanya perlu memasukan javascript dan kode lainnya dalam template blog kita. Adapun cara untuk memasang read more di blog selengkapnya adalah sebagai berikut:

Pertama, masuk ke dalam akun blogger kita masing-masing.

Klik rancangan.

Klik edit HTML.

Klik expand template widget.

Cari kode berikut.

</head>

Masukan kode berikut di atasnya.

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 300;
summary_img = 170;
img_thumb_height = 150;
img_thumb_width = 250;
</script>
<script src='http://panduanbelajarblog.googlecode.com/files/readmore-otomatis.js' type='text/javascript'/>

Cari kode berikut.

<data:post.body/>

Hapus dan ganti dengan kode di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more</b></a></span>
</b:if>
</b:if>

Klik simpan template dan selesai.

Keterangan:

  1. Download template terlebih dahulu sebagai backup jika kita mengalami kegagalan dalam proses editing.
  2. Gunakan tombol Ctrl+F pada keyboard untuk mempercepat proses pencarian kode yang kita inginkan di dalam template blog.
  3. summary_noimg merupakan jumlah karakter yang ditampilkan tanpa menggunakan gambar dalam postingan blog.
  4. summary_img merupakan jumlah karakter yang ditampilkan ketika dalam postingan blog terdapat gambar.
  5. img_thumb_height merupakan tinggi gambar yang ditampilkan.
  6. img_thumb_width merupakan lebar gambar yang ditampilkan.
  7. Kita juga dapat mengganti tulisan Read more sesuai keinginan kita.


Pemasangan read more dalam blog juga bermanfaat untuk meningkatkan jumlah pageviews. Jika blog kita sudah terpasang read more tentu setiap pengunjung tidak bisa membaca artikel di halaman depan blog kita secara tuntas karena ada fungsi read more yang hanya menampilkan sepenggal tulisan awalnya saja. Sehingga, untuk bisa membacanya sampai selesai pengunjung tersebut harus klik read more untuk membuka halaman artikel secara keseluruhan. Nah, alasan inilah yang kemudian membuat jumlah pageviews atau jumlah halaman postingan blog kita yang dibuka oleh pembaca menjadi bertambah banyak.

Manfaat lainnya dari pemasangan read more adalah kita dapat menampilkan jumlah postingan yang lebih banyak di halaman depan blog karena setiap posting yang ditampilkan merupakan hasil ringkasan dari fungsi read more yang membuat postingan tersebut menjadi semakin pendek. Ketika postingan yang tampil di halaman depan menjadi lebih banyak maka pengunjung akan memiliki lebih banyak lagi pilihan untuk membuka dan membaca artikel dalam blog kita.

89 komentar:

  1. Hebat masbrow...
    Makin caem aja nih tipsnya...
    langsung bungkus...

    BalasHapus
  2. @imamblogger:

    silakan dicoba dan digunakan bro. :)

    BalasHapus
  3. @Uc Herawati:

    trims kembali untuk kunjungan dan komentarnya.
    trims juga untuk apresiasinya ya. :)

    BalasHapus
  4. terima kasih mas . sangat membantu, masalahnya untuk read more yg mas pernah posting dulu d template sy g bisa. g tw yg salah saya atw apa hehehe maklum baru bljr .

    BalasHapus
  5. saya malah udah copot readmore nya sob, tadinya pake juga, hehe, thx udah berbagi :)

    BalasHapus
  6. @bangyus:

    coba gunakan read more ini, siapa tahu bisa membantu. :)

    BalasHapus
  7. @Rama88:

    kenapa dihilangkan bro? :)

    BalasHapus
  8. sejak blog saya di hack orang saya pindah wp mas karena nggak ada pilihan lain

    BalasHapus
  9. @Rizkyzone.com:

    dihack bagaimana bro?
    mungkin bisa share. :)

    BalasHapus
    Balasan
    1. ini blog saya dulu mas sebelum ganti wp >> htt://rizky2009.blogspot.com

      Hapus
  10. @Windows Blog:

    semoga bermanfaat bro. :)

    BalasHapus
  11. Sekarang blog saya malah menggunakan judul saja,biar hemat :)

    BalasHapus
  12. itu juga salah satu solusi untuk menghemat dan merapikan halaman depan blog bro. :)

    BalasHapus
    Balasan
    1. kalu itu gmna caranya gan?

      Hapus
  13. saiia masii bingung kang.. setelah dipasangi readmore otomatis... kenapa pada bagian page (halaman) malah gag bisa di klik (halaman tujuan gag keluar).. any suggest kang?!?! :( plis kang iia ;( kasii kabar ke saiia kang :(

    BalasHapus
  14. bukannya blogger sudah menyediakan read more otomatis dengan cukup satu kali klik tanda read more yah?
    saya rasa itu lebih mudah penggunaannya sob.

    BalasHapus
  15. @Belajar Photoshop:

    mungkin templatenya tidak kompatibel bro.

    BalasHapus
  16. @Kevin Yo:

    dalam template default blogger tidak disediakan bro.

    BalasHapus
  17. aku dah coba masukin edit html tp kog ga ada menu simpan ya mas?thanks

    BalasHapus
  18. itu bukan menu, tapi tombol simpan template berwarna orange yang terletak di bawah kode HTML template kita.

    BalasHapus
  19. Masbro.. kalo data " " ada 2 itu gimana maz ?

    mohon bantuannya..
    thx

    BalasHapus
  20. maksud saya itu data post:body nya ada dua, nah itu ditaruh sebelah mana.. ?

    hehe..
    thx sblumnya..

    BalasHapus
  21. makasih tutorialnya mudah difahami buat saya yang sangat newbie :)

    BalasHapus
  22. ok, dah ketemu bos, thanks :)

    BalasHapus
  23. @Amin subekti:

    semoga bermanfaat ya. :)

    BalasHapus
  24. @sang pemimpi:

    silakan digunakan bro. :)

    BalasHapus
  25. makasih ... mas bro... banget

    BalasHapus
  26. @Anonim:

    trims juga ya sudah berkunjung. :)

    BalasHapus
  27. @kua mustikajaya:

    semoga bermanfaat ya.

    BalasHapus
  28. punyaku ok gak ada data:post body ya

    BalasHapus
  29. lagi nyari, ternyata ini yg paling oke...
    trims info mas'

    BalasHapus
  30. Ini yang PAs BUAt Gue!!!
    ThanKS

    BalasHapus
  31. @Ahmad yahdiani:

    coba dicari kode yang mirip dengan kode tersebut.

    BalasHapus
  32. @SemutonlinE 46:

    trims juga untuk apresiasinya. salam kenal.

    BalasHapus
  33. @Wildz Edogawa:

    semoga bermanfaat ya. :)

    BalasHapus
  34. mantab gan... sip berhasil.. tamks ya gan..

    BalasHapus
  35. Keren Om, tapi saya nemu 3 kode sekaligus, kode yang mana yang harus diganti? Trims sebelumnya.

    BalasHapus
  36. maaf kk, kok saya nggak berhasil-berhasil yah..... salah dimananya saya ini.....

    BalasHapus
  37. kk ko punya saya gk ada data:post.body atau
    tolong pencerahan....
    kunjunggi juga blog saya www.yuga09.blogspot.com

    BalasHapus
  38. aduh ....
    ane belum mudeng
    nyimak aja ya.

    BalasHapus
  39. mantap gan...udah gue coba
    saya sudah join gan, saya akan berterima kasih jika mas juga demikian thx

    BalasHapus
  40. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  41. kok pas saya cari data:post.body gak ada ya'
    apakah ada solusi lainnya?

    BalasHapus
  42. izin copas yaa :)) di tampilkan hasil inspirasinya kok :) makasiihh!!

    BalasHapus
  43. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  44. visit http://toufikhidayat.blogspot.com

    BalasHapus
  45. keren gan,,, scriptnya nempel di blog..

    BalasHapus
  46. info yang sangat menarik blog ane jadi makin cantik admin nya juga semakin ganteng hehehe kutas-s

    BalasHapus
  47. Gan saya Udah berhasiL buat read more otomatis tetapi kenapa stiap saya membuat postingan, postinganny gak bisa di kasih paragraf, apa ada yg salah dg penempatan kode ini <'P'> atau tag paragraf . Minta Solusinya dong, maklum newbie..
    jawab ke email saya : sevillege_mannlich@yahoo.com

    BalasHapus
  48. blogwalking on your blog.. waahhh... makasih kak.. membantu banget... :D

    BalasHapus
  49. makasih banyak ya gan buat infonya

    BalasHapus
  50. kok yang muncul cuma 2 postingan aja ya?

    BalasHapus
  51. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  52. gan kok pya q tetep gak bisa ya?
    tkong dong bantuannya..
    ini blog q.
    http://thephatar.blogspot.com

    BalasHapus
  53. Maaf Nih Admin ,, Saya Belum Ngerti Gimana Kalau Bisa Tolong Sama Fotonya Dong

    BalasHapus
  54. Klik rancangan.

    Klik edit HTML.

    Klik expand template widget.
    Maksudnya apa masbrow saya taunya tampilan blog yang sekarang kalau yang dulu gk tau ,, mohon bantuannya masbrow kalau bisa pake foto Thanks

    BalasHapus
    Balasan
    1. Maaf, itu langkah ketika blogspot belum berubah user interface seperti sekarang.
      Langkahnya: masuk akun blogger>dasbor>template>edit HTML.

      Hapus
  55. gan, kodenya saya search kok gak ada ya? mohon jawaban

    BalasHapus
    Balasan
    1. Download template blog yang berekstensi XML, lalu buka dengan program notepad. Jika masih belum ditemukan, mungkin kode tsb tidak ada ditemplate blog.

      Hapus
    2. kalo ngak ad di template nya bikinnya gmna?

      Hapus
  56. mantap dah artikelnya kawan

    BalasHapus
  57. menarik ini gan, setiap kalo posting kita ga usah bikin read more manual, karena dengan settingan ini, halaman read more sudah otomatis ada

    BalasHapus
  58. terimakasih banyak bro tutorialnya sangat membantu

    BalasHapus
  59. Terima kasih sob, akhirnya bisa juga

    BalasHapus
  60. Terima kasih sob, akhirnya bisa juga

    BalasHapus
  61. Bang.. kok ga work ya? Malahan nya ilang -_- ngaruh gak ya

    BalasHapus
  62. Bang.. kok ga work ya? Malahan nya ilang -_- ngaruh gak ya

    BalasHapus
  63. makasih sob, sangat membantu, ini yang saya cari-cari terus, pas kesangkut disini jadi dapat deh dan mudah bangettidak ribet thanks gang....

    BalasHapus
  64. terimakasih ya.,, berhasil dilakukan :)

    BalasHapus
  65. info yang sangat bermanfaat nih,,,keren mas

    BalasHapus
  66. Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
    Jika ya, silahkan kunjungi website ini www.kbagi.com untuk info selengkapnya.

    Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

    BalasHapus
  67. Informasi yang sangat bagus dan berguna. Ditunggu untuk informasi berikutnya. Thanks gan

    Silahkan berkunjung di intanqq

    BalasHapus