Cara Membuat Read More Otomatis

RMO Pada postingan sebelumnya sudah pernah saya bahas tentang cara membuat read more atau baca selengkapnya. Hampir sama dengan postingan saya kali ini, namun read more otomatis memiliki kelebihan yaitu postingan akan terbagi menjadi 2 bagian secara otomatis.

 

Untuk read more otomatis ini, dibutuhkan kode javascript yang sebenarnya bisa sobat simpan sendiri di tempat biasa sobat menyimpan file secara online. Namun kali ini script read more diletakkan langsung di template tanpa menggunakan hosting untuk mencegah errror saat hosting yang kita gunakan untuk menyimpan kode script-nya sedang down. 

 

Buat blogger baru, saya sarankan menggunakan read more otomatis saja ketimbang read more yang biasa. Karena tentunya sobat tidak akan repot membagi 2 postingan sobat dengan kode manual.

 

Berikut langkah – langkah dalam membuat read more otomatis :

  1. Silahkan login ke blogger terlebih dahulu.
  2. Klik Tata Letak
  3. Kemudian klik Edit HTML.
  4. Centang Expand Template Widget
  5. Letakkan kode berikut ini tepat diatas kode </head> :

    <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </script>

    <script type='text/javascript'>
    //<![CDATA[
    /******************************************
    Auto-readmore link script, version 2.0 (for blogspot)

    (C)2008 by Anhvo

    visit http://en.vietwebguide.com to get more cool hacks
    ********************************************/
    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(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>

  6. Untuk yang sudah pernah menggunakan read more versi lama (manual), sebaiknya sobat kembalikan dulu kodenya seperti semula. Hapus kode yang saya tandai dengan warna biru di bawah ini, sesuaikan dengan template sobat, karena setiap template berbeda - beda :
    <div class='post-header-line-1'/>
    <div class='post-body'>
    <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'>Readmore</a>
    </b:if>
    <div style='clear: both;'/>    
    sehingga sekarang hanya ada satu <data:post.body/>
  7. Kemudian hapus kode : <data:post.body/> atau <p><data:post.body/></p>
  8. Ganti kode tersebut dengan kode berikut ini :

    <b:if cond='data:blog.pageType != "item"'>
    <div expr:id='"summary" + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
    <span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read More … <data:post.title/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

     

  9. Kemudian Simpan Template.

 

Keterangan :

  • summary_noimg = 450 –-> untuk tinggi postingan tanpa gambar.
  • summary_img = 360 –-> untuk tinggi postingan dengan gambar.
  • img_thumb_height = 120 –> tinggi gambar.
  • img_thumb_width = 150 –> lebar gambar.
  • Read More… –> bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.

 

Silahkan sobat atur sesuai template sobat. Selamat berkreasi. Happy

Berlangganan artikel terbaru via Email
Artikel Lainnya :

65 comments

15 September 2009 09.03

wah...akhir'a nemu juga..
thx..like this..likr this..

16 September 2009 05.54

Miscah emang jago dalam mengulik java script
salut
thanks sob atas tutorialnya

17 September 2009 13.59

Hehe.. mantep Gan..

29 September 2009 13.34

sip.. dah. Keep posting bro..

9 November 2009 21.06

waaah,,makasihhh,,bgdz,,udh bisa read more neh blog akhu,,,

11 November 2009 10.18

keren mas..saya dah coba. saya ada masalah sedikit mas, bisa bantu kan? kalo pengen posting mengenai pribadi untuk tidak tampil di menu bar 'home', tapi tampil di menu bar 'about' gimana caranya. trus contact form yang saya bikin juga tampil di home bukan di menu bar 'contact' gimana mengakalinya yaa? makasih mas....sukses yaa!

11 November 2009 12.52

@Bullirus : maksudnya mgkn About Me yg tampil di sidebar kali ya..coba pd halaman dasbor klik Edit Profil, trus u/ menampilkan di halaman sidebar klik Tata Letak -->> Elemen Halaman -->> Tambah Gadget -->> klik Profil trus Simpan...mgkn itu maksdnya ya, jd About Me jgn di posting sob tp di Edit Profil aja masukkan ket tentang dirimu..

20 Desember 2009 22.27

Om..http://miskahiper.fileave.com/read-more-otomatis.js gak bs diakses, jd readmore otomatisnya gk jalan, ada alternate link buat didownload om...thx

25 Desember 2009 18.16

iya mas,,
read moreQ juga gak aktif,,

didownload scrptnya kok jadi format HTML?
pengennya Q simpen di online storageQ

10 Januari 2010 19.23

cara hapus read more gimana yaaaaaaaaa?

11 Januari 2010 01.22

@ Gisela : hapus aja kode yg sdh gisela tambahkan sebelumnya..

18 Januari 2010 14.55

ooh oke, trimss

2 Februari 2010 19.58

kalau membuat tautan otomatis bisa ga mas?

maksudnya, misalkan kita ngetik "sesuatu" pada postingan truss langsung menuju link yang kita mau. bisa ga ya ?

thanks

3 Februari 2010 00.58

@ atman : mgkn maksud mas atman, buat link dlm postingan ya, kan ada di menu postingan blogger dgn tab tautan

25 Februari 2010 20.39

trimakasih saya dari dulu nyari yg kaya gini.ternyata manjur.....makasih ya sob

8 Maret 2010 16.07

mas, kalau pake kode diatas berlaku gag sama readmore gambar ?

8 Maret 2010 16.34

mas, pada html template saya ga ada kode


yang ada kode seperti berikut...



kode itu ga bisa dihapus... setiap kali dihapus psti gagal mengedit templatenyaa... jadi bagaimana solusinya ?

8 Maret 2010 16.35

@ Fajri Alhadi : klo mo buat read more otomatis gambar saja yg ditampilkan pada halaman depan, silahkan cari kode summary_img = 360 ganti angka 360 dgn angka NOL, maka yg akan muncul hanya gambar saja pada halaman depan

12 Maret 2010 14.00

Makasih buanget boosss....

12 Maret 2010 16.30

terimakasih infonya sangat bermanfaat

13 Maret 2010 09.24

mas kalo postingannya dikit tetep otomatis keluar readmorenya sich,,,
jadi agak ribet caranya gimana ya,,, yang sedikit ga pake read more tapi kalo yang banyak/panjang baru pake read more

24 Mei 2010 14.12

Bos Q kok gagal pasang readmorenya, padahal Q pake tamplate hasil donload dari sini

20 Juni 2010 15.56

Beh....hebat-hebat para senior ini...
Masih bbbuuuuaaaanyaaaakkkk yang belum saya tahu. tapi setelah liat blog ini jadi bingung, banyak banget infonya. Mulai dari mana ini. tapi jadi lebih tahu dari sebelumnya...kayaknya betah belajar disini. Perkenalkan, saya orang kampung tapi suka internetan..biar gak gaptek2 amat.
terima kasih infonya...

5 Juli 2010 03.23

mau tanya dunk mas..

saya sudah berhasil buat read more automatis, tapi kok di menu navigasi halaman saya ada read morenya juga, dan anehnya tuh halaman gk bisa kebuka walaupun sudah di klik readmorenya.

jadi solusinya harus gimana mas ?

silahkan mas liat blog saya di bagian halaman :

http://www.sukses-one.co.cc/p/blogroll.html


mohon pencerahannya mas

6 Juli 2010 07.21

@ArhiezOne : coba km ganti kode no.8 dengan kode berikut :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>

6 Juli 2010 13.12

@dody : tetep gk bisa tuh, malah lebih parah lagi, gk ada tulisannya di stiap page blog saya ..

kok bisa gitu yah ??

6 Juli 2010 13.44

@dody : tetep gk bisa mas, malah tambah aneh, gk ada tulisan di stiap page blog saya.

masalahnya dimana yah ??

sungguh aneh -_-"

6 Juli 2010 18.38

oke dech postingannya.
sudah saya coba dan akhirnya berhasil dan sesuai dengan yang saya ingikan.

terima kasih banyak,salam kenal sesama blogger ya

6 Juli 2010 18.46

@dody : tetep gk bisa mas, malah lebih parah, gk ada tulisannya di stiap page.

jadi harus gimana lagi nih ..

7 Oktober 2010 23.29

ass. mas mau nanya nih..gimana tuh caranya buat halaman baru tanpa ada readmorenya, soalnya templateku ada readmore otomatisnya?

28 Oktober 2010 06.59

bagus artikelnya mas.,,terima kasih

18 November 2010 11.23

readmore berfungsi untuk memendekkan artikel.nice tips.

hhaahahaaa... !! cuma mao bilang ,..wueeh Muanteebbb ne blognya..thxs..

10 Desember 2010 15.51

Terima kasih atas infonya, sangat membantu sekali khususnya untuk saya seorang newbie

23 Desember 2010 19.26

mkasih info'ny,, sangat bermanfaat,, sudah saya coda dan ternyata berhasill,, thanks,,
mampir k blog saya,,
http://zonabebasberekspresi.blogspot.com/
maaf acak"an,, newbie jd msih bingung,, :D

6 Januari 2011 09.01

om saya mau nnya nie, template saya kan ga ada sintaks seperti tulisan om yg No 7, klu saya mau bikin read more gimna donk om ??
mohon pencerahan nya

3 Februari 2011 16.02

http://kiyute80.blogspot.com/

8 Maret 2011 14.53

tq my brother ^^

16 Maret 2011 18.48

kok gabisa sih ? kenapa yaaaa ? pas ditulis di atas kode headnya kok gabisabisa sih ?

monggo ke blog saya maap saya masih pemula hehe http://bellasinakamurariko.blogspot.com/

17 Maret 2011 15.19

Waaah...mantab banget mazzz....singkat dan jelazzz...matur suwun...

15 April 2011 21.18

Cara membuat read more otomatis udh lama sy praktikkan dr tutorialnya mas dody n sukses akan tetapi setelah tulisan Read more.... Yang sy tanyakan, bagaimana cara menghilangkan tulisan judul artikel yang menyertai tulisan Read more...tsb ?
Maklum nyubie..mohon ditengok di http://ellalayla.blogspot.com.

16 April 2011 22.14

@Ella Layla : coba perhatikan kode dibawah ini

<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read More … <data:post.title/></a></span>

hapus kode yg sy tebalkan

19 April 2011 15.41

@Dody FariaL
,,,resepnya emang tokcer abis. Kmudian iseng2 "left" sy ganti mjd right dan setelah tulisan read more tanda ... sy gnti dg >>>, eh sukses jg, krg tampilan blog sy jd terlihat lebih manis hehe...
Trims yo mas dody.

25 April 2011 02.46

kereeeeenn,,,....
top top top,, haaahaa
thank u brooo..

30 April 2011 09.08

punya saya sudah bisa tapi,gak kepotong malahan tetep fullpost tlus tulisan read moreny masi ada di gimain caranya?

kalo mau ngecek lengkapnya coba liat di
http://rizky1997.blogspot.com

30 April 2011 11.44

http://www.smamardiutomo.co.cc/

8 Mei 2011 20.17

mas, mau nanya nih,,,gmna cara mengubah warna pada tulisan baca selengkapnya,,,soalnya gak bisa dibedain warnanya...sebelumnya thx atas tutornya,,sangat bermanfaat

Kenapa ada Normal 0 false false false IN X-NONE X-NONE ... ??

Mohon dibantu mengatasinya !

29 Mei 2011 17.05

Trims atas panduannya pak, kini blog saya sudah bisa dipasangi read more...tutorial di sini sangat sangat bermanfaat bagi saya dan pemula seperti saya..update terus ya pak...
salam sukses

Disini memang tempat Surganya para Blogger, thanks gan

Anonim
10 Juni 2011 18.32

tengkyu tengkyu...udah berhasil...

16 Juni 2011 23.17

ada yg berhasil..tp ada artikel yg ga da summary-nya, tertulis: 12.00 Normal 0 false false false IN X-NONE X-NONE MicrosoftInternetExplorer4 ...ada lg: v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} Normal 0 false false false false IN X-NONE X-NONE MicrosoftInternetExplorer4 ...
ada lg :Normal 0 false false false IN X-NONE X-NONE ...

21 Juni 2011 11.15

sib, sukses dicoba

22 Juni 2011 17.06

Makasih info.a!

17 Juli 2011 13.30

Kode yang ada di langkah nomor 7 tuh ada dimana sih? Nggak ketemu-ketemu, emosi aku -____-

13 September 2011 18.12

klo kita punya laman, khan lamannya jga kena read more otomatis, tp pas mau dbka readmore nya gag bsa kok malah ke readmore lgi ?

18 September 2011 00.43

makasih mas toturialnya...tapi ada sedikit masalah.."read more" nya ada doubel sama "baca selengkapnya" tadinya ganti template yg udah include read more otomatis...tapi hasilnya jadi double...gimana mengatasinya mas?

oh..iya ...template yg sy pake tamplina lama bukan fitur baru...mohon pencerahan...

coba cek di http://aa-yudisa.blogspot.com

Makasih mas

18 September 2011 06.22

terima kasih mas, tips read more otomatisnya sudah dimanfaatkan nih.
http://iwankusnawan.blogspot.com

26 September 2011 16.28

saya sudah mempraktekannya dan berhasil tetapi kok yang anehnya di bawah tulisan read more nya tulisan yang lengkapnya ada dibawah read more ?
jadi maksudnya, dibawah read more langsung tercantum tulisan lengkapnya...
kenapa ya ?
mohon bantuannya

monggo mampir dlu mas untuk cek
http://jodyciu.blogspot.com/

27 Februari 2012 12.25

Myanmar Housing!

The Biggest Real Estate Web Portal in Myanmar !

5 April 2012 18.58

coba pake textarea sob,, biar lbih gmpang copasnya
Tp, mkasih lah tipsnya, sy coba dulu, mudah2n
berhasil

13 April 2012 16.13

makasih infonya gan

30 Juni 2012 12.46

Sob, kode data post bodynya ada dua. Kode no. 8 tu ditarok ke yang ke 1, 2, ato dua duanya?

24 Juli 2012 08.40

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

Terimakasih banyak sudah share. Sangat membantu sekali ;)

Poskan Komentar

Reader Community

Recent Comments