Cara Auto Read More Blogger

Read More Blogger


Cara Membuat Read More di Blogger Blogspot secara manual dan otomatis. Memberi Read More atau Baca Selengkapnya pada artikel posting di blog kita itu perlu terutama kalau artikel kita cukup panjang, lebih dari 2 paragraf. Read More di Blogger Blogspot disebut juga dengan Jump Break, Baca Selengkapnya atau Baca Selanjutnya.
Oleh Tim Multimedia Ponpes Al-Khoirot

DAFTAR ISI

  1. Tujuan Memasang Read More
  2. Cara Membuat Read More Manual di Blogger
  3. Cara Membuat Auto Read More di Blogger dengan Javascript
  4. Cara Bikin Auto Read More di Blogger Tanpa Javascript


TUJUAN MEMAKAI READ MORE

1. Agar halaman utama tampak rapi dan tidak terlalu panjang.
2. Waktu loading (waktu pengunjung membuka blog) juga lebih singkat. Ini bisa menambah SEO.
4. Agar pembaca blog kita betah berlama-lama di situs kita. Minimal mereka dua halaman blog kita yaitu halaman utama dan halaman setelah "Read More".
5. Sebagai teaser (penggoda) supaya pembaca lebih penasaran.


CARA MEMBUAT READ MORE MANUAL DI BLOGGER
Ada dua cara.

Cara pertama, waktu menulis artikel klik Edit HTML di kanan atas. Tambahkan kode <!--more-->. Artikel yang akan disembunyikan taruh di bawah kode, sedang artikel yang akan ditampakkan di halaman utama letakkan di atas kode.

Supaya mudah, simpan kode tersebut di notepad dan taruh di Desktop. Sewaktu-waktu diperlukan tinggal copy/paste.

Cara Kedua

Kotak posting dalam keadaan "Compose". kemudian klik menu Jumpbreak yang berada di samping menu Video. Lihat gambar bawah:

Kalau Anda sudah mengikuti kedua cara tersebut, tapi "read more"-nya tidak muncul, maka lakukan setting/setelan "Pilih Editor Entri yang Dimutakhirkan."

Caranya, ikuti tip berikut:

1. Caranya, masuk ke Blogger.com -> Pengaturan -> Dasar -> Setting Global (paling bawah) ->
2. Centang / kasih tanda tik pada "Editor yang dimutakhirkan."
3. Jangan lupa klik Simpan Setelan.

Kelebihan cara manual adalah lebih fleksibel. Artinya, untuk artikel pendek yang cuma satu atau dua paragraf tidak perlu memakai Read More.


CARA MEMBUAT AUTO READ MORE DENGAN THUMBNAIL DI BLOGGER DENGAN JAVASCRIPT

Pertama yang harus dilakukan adalah klik Rancangan -> Edit HTML -> tanda tik/centang Expand Widget Template. Setelah itu ikuti panduan di bawah.

Penting: coba dulu di blog eksperimen. Jangan di blog utama.

1. Cari kode </head>
2. Letakkan kode berikut di atasnya kode no. 1 (klik View plain untuk mengcopy)

<!-- Auto read more script -http://www.alkhoirot.net/- Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script -http://www.alkhoirot.net/- End -->

Catatan: angka-angka di atas dapat dirubah sesuai selera.

3. Cari kode berikut: <data:post.body/>
4. Ganti kode tersebut dengan kode di bawah
<!-- Auto read more -http://www.alkhoirot.net- Start -->
<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>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- Auto read more -http://www.alkhoirot.net- End -->

5. Klik Simpan Template. Selesai.


CARA MEMBUAT AUTO READ MORE DENGAN THUMBNAIL DI BLOGGER TANPA JAVASCRIPT

Memakai auto read-more yang dilengkapi dengan thumbnail (gambar kecil) di halaman muka atau homepage blogger tanpa javascript membuat loading blog/website akan lebih ringan. Caranya sebagai berikut:

1. Masuk/login ke blogger.com
2. Klik Template -> Lanjutkan -> Edit HTML
3. Beri tanda tik/centang pada Expand Widget Template
4. Cari kode </b:skin>
5. Taruh kode berikut sebelum atau di atasnya kode nomor 4:
.thumb img {
float: left;
margin: 0 10px 10px 0;
}

6. Cari kode berikut: <data:post.body />
7. Hapus kode nomor 6 dan ganti dengan kode di bawah:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Lihat contoh pemasangan kode dalam gambar di bawah:

Auto read more thumbnail tanpa javascript

Contoh live lihat http://www.alkhoirot.net/

PERHATIAN:

1. Kalau kode <data:post.body /> lebih dari satu, maka coba kode yang kedua. Kalau tidak berhasil, coba kode yang pertama atau ketiga.

2. Kelemahan dari auto read-more tanpa javascript ini adalah snippet/post-summary atau kata yang tampil sebelum read-more sangat sedikit. Sekitar dua baris. Ini berbeda dengan auto read more dengan javascript yang jumlah kata dalam snippet dapat diatur.

Untuk langganan artikel Alkhoirot Net via Email gratis, klik di sini!

78 comments:

  1. tambah read more pada blogger 2011

    ReplyDelete
  2. aku udah coba tapi kok tulisannya jadi gini:
    Read More..
    Baca selengkapnya »
    Baca selengkapnya »
    jadi ada 3 untuk read more, plis help??

    ReplyDelete
  3. cara membuat readmore di blogger lama

    ReplyDelete
  4. @widya: kesalahan ada di template. Edit aja templatenya di design -> edit html -> expand widget template

    ReplyDelete
  5. cara nulis Readmore di blog 2011

    ReplyDelete
  6. membuat readmore di blogger

    ReplyDelete
  7. membuat read more

    ReplyDelete
  8. cara membuat read more di blog 2011

    ReplyDelete
  9. membuat kolom read more pada blogger

    ReplyDelete
  10. cara menampilkan tulisan di blog sebagian

    ReplyDelete
  11. Alhamdulillah, saya berhasil, makasih ya

    ReplyDelete
  12. keren gan, ane bner2 kebantu..
    thnx..

    ReplyDelete
  13. wah,,ternyata caranya gampang ya,,,saya sudah coba dan berhasil

    ReplyDelete
  14. terima kasih mas, ternyata cara yang mas terangkan, lebih mudah dipraktekkan, Q coba-coba cara yang lain malah kgak bisa.
    Terima kasih sangat bantuannya !!!!

    ReplyDelete
  15. mantap gan....
    akhirnya berhasil juga di blog saya "andika212.tk"
    he..he.

    ReplyDelete
  16. siiip...........
    Berhasil sob....
    Terimakasih....

    http://twokanggrafis.blogspot.com/

    ReplyDelete
  17. ada reaksinya segala ya sob....keren2....

    ReplyDelete
  18. Oh makasih buangettt akhirnya bisa juga dah cari kemana2...thank ya..!!

    http://zhafranahmad.blogspot.com

    ReplyDelete
  19. wah mantabs ni tutorial ... salam..

    ReplyDelete
  20. masa ga ada tulisan di edit html nya -___-

    ReplyDelete
  21. mantap gan nii ifnonya sangat bermanfaat sekali bagi saya yang sedang belajar ini...mohon bingbinganya..

    ReplyDelete
  22. saya sudah tandai bagian editor yang dimutakhirkan, tapi kenapa masih semua postingan muncul di halaman depan yah. gak ada read morenya.

    apa karena postingannya kurang kali yah.

    ReplyDelete
  23. @cd kosong: harus diedit secara manual satu persatu

    ReplyDelete
  24. memberi readmore

    ReplyDelete
  25. gan cara menambahkan tulisan post kita lebih panjang lagi, maksdnya jgn terlalu sedikit.

    misalnya, post saya seperti ini.

    hari ini saya mau berbagi bagaimana cara meningkatkan page rank blog

    readmore

    nah maksud saya gmana untuk menambahkan kalimatnya sedikit lebih panjang jadi tidak terlalu sedikit.

    ReplyDelete
    Replies
    1. @James: ya readmore-nya taruh di tempat yg lebih bawahnya lagi.

      Delete
  26. thanks infohnya gan

    Free Full Version Software, Game, Movie

    http://rizky-freebies.blogspot.com

    Jual Jam Tangan Online

    http://olamarket.blogspot.com

    Pasang iklan disini tanpa daftar, langsung muncul di halaman depan

    http://iklan-juragan.blogspot.com

    ReplyDelete
  27. kunjungi jg eah http://puisir3maja.blogspot.com/

    ReplyDelete
  28. makasih admin..
    sangat bermanfaat..
    sukses

    ReplyDelete
  29. Bermanfaat ni gan informasinya, Jgn Lupa Maen Maen Ke blog Ku yah http://terselundup95.blogspot.com/ , Thx

    ReplyDelete
  30. Makasih bos... selama ini ga perhatiin aja rupanya... :p

    ReplyDelete
  31. MAKASIH GAN KUNJUNG BALIK YA.,

    http://verdian-smpn2.blogspot.com/

    ReplyDelete
  32. THx GAn, WorK KOdenYe di blOg ANe ... ANe PAke KOde YG AutO READ mORE, cuMA TUliSAN REAd MOrenYe ANe ILAngiN ... SOAlnyA Ane PAke urL SHorteNEr (Adf.LY) di JUduL pOStinGAn bLOg ANe

    ARMStrOng_prODucT@YAhOo.cO.ID

    ReplyDelete
  33. makasih atas infonya gan oke oke oke dan oke dech

    ReplyDelete
  34. mas read morenya udah bisa, tp postingnya yg muncul cmn satu aja ? gmn biar muncul post yg lainnya ? trims

    ReplyDelete
  35. mas readmore sdh muncul, tapi munculnya di akhir halaman, bukan ditengah-tengah, gimana gan...maklum masih pemula.thk's

    ReplyDelete
  36. makasih atas infonya..
    berguna bgt :)

    sekalian mampir jg ke blog ane.

    http://trialnewbie.blogspot.com

    ReplyDelete
  37. thanx info nya dan salam kenal ya semua.
    jangan lupa ya mampir di blog ku http://jalanbersamalimare.blogspot.com

    ReplyDelete
  38. Demak, 25 Pebruari 2010, Jam : 10.30 WIB

    Saya sudah mencoba membuat Read more.....dengan menggunakan yang cara ke dua dan berhasil.
    Selanjutnya tak lupa saya ucapkan terima kasih.

    Salam action,
    BRAM IRIANTO.
    rockyblank@gmail.com
    http://www.kencangratis.blogspot.com

    ReplyDelete
  39. Demak, 25 Pebruari 2010, Jam : 10.30 WIB

    Setelah Saya mencoba membuat Read more.....dengan cara ke dua dan berhasil, maka dengan demikian dapat saya simpulkan bahwa cara yang ke dua lebih mudah dibandingkan dengan cara yang lainnya.

    Selanjutnya tak lupa saya ucapkan terima kasih.

    Salam action,
    BRAM IRIANTO.
    rockyblank@gmail.com
    http://www.kencangratis.blogspot.com

    ReplyDelete
  40. makasih ya mas admin...

    saya rquest read more manual yg pake gambar la..

    kalo pake readmore otomatis, lamannya ga bisa dibuka...

    http://iniblogane.blogspot.com

    ReplyDelete
  41. Thanks infonya bro...bermanfaat banget.
    online cash lihat di;
    http://www.chatcanes.com/

    ReplyDelete
  42. mantef bos, thank atas infonya, salam kenal

    ReplyDelete
  43. Nice info ... :)Baru tau ane fungsi intu Gan hwhwh :) salam kenal

    ReplyDelete
  44. siiiiiipppppmas bro.....

    ReplyDelete
  45. mas read moreku ko ada linknya yah?cara ngilanginnya gmna?

    ReplyDelete
  46. Sekali coba langsung berhasil. Akhirnya blog aku tambah cantik :)
    Terima kasih.

    ReplyDelete
  47. Bang..

    Ko kode ini

    Tidak ad di Tamplate saya..?

    Mohon Di Balas..

    ReplyDelete
  48. sip dah readmore ku jadi mantap tenan oi thanks bagi admin

    ReplyDelete
  49. infonya mantap gan.. thanks alot :-D

    ReplyDelete
  50. terima kasih sebelumnya... tetapi setelah saya coba kok, halaman blog nya ada read more dan itupun tidak bisa dibuka secara penuh, mohon bantuannya

    ReplyDelete
  51. amazing,, saya sangat baru di dunia blog tp sekali coba langsung bisa,, makasi banyak (:

    ReplyDelete
  52. tutirialnya bagus sekali n berhasil saya terapkan diblog saya.trims

    ReplyDelete
  53. manfaat banget gan,...
    ane berhasil
    thanks

    ReplyDelete
  54. makasih gan infonya dah dicoba dan hasil ok

    ReplyDelete
  55. manfaat banget info nya
    cara pertama mudah, kedua apalagi...ane jadi bisa

    visit : http://greatengh.blogspot.com/ buat yang nyari materi kuliah bahasa inggris

    ReplyDelete
  56. saya udh bisa buat read more, tp kok gk bisa muncul beberapa postingan gmn ya, mohon bantuanya

    ReplyDelete
  57. terima kasih sahabat atas ilmunya yang bermanfaat, semoga sukses selalu

    ReplyDelete
  58. makasih gan ntar mo ane coba

    ReplyDelete
  59. Kok,, ReadMorenya paling bawah?

    ReplyDelete
  60. Salam kenal,Terima kasih banyak,akhirnya nemu juga cara yang pas buat nambahin read more...:)
    Dan sudah sukses nangkring di postinganku

    ReplyDelete
  61. makasih bang atas info readmorenya. aki dah jadinih. Alhamdulillah

    ReplyDelete
  62. wah, ada yg salah. apa yang harus di benerin gan??
    Element type "b:if" must be followed by either attribute specifications, ">" or "/>".

    ReplyDelete
  63. Terima kasih petunjuknya mas :)

    ReplyDelete
  64. sukses 100% gan trimakasih, klo ane lihat cara di blog laen gk brhasil, tapi di blog ini brhasil makasih ya gan

    ReplyDelete
  65. untuk menentukan panjang kata nya gimana ya? misal di buat 20 kata itu

    ReplyDelete
  66. makasih ya tutorialnya sanagat bermanfaat untuk newbi seperti saya :)

    ReplyDelete
  67. saya mencoba berhasil makasih gan tutorialnya, tapi kalau mau menmpilkan thumbanil dan judulnya aja gmna gan?? (tanpa summary?
    maksih sebelumnya

    ReplyDelete

Kirim konsultasi Agama ke: alkhoirot@gmail.com Cara Konsultasi lihat di sini!