Cara Buat Read More Otomatis

Cara membuat read more otomatis di blog, read more otomatis fungsi nya readmore otomatis adalah untuk membuka laman yang baru agar tampilan di laman posting tidak terlalu panjang dan pasti nya menghemat tempat posting agar terlihat rapi. Langsung saja tidak usah basa - basi lagi.

Menggunakan read more otomatis di blogger dapat mempercantik blog, terlihat agar susunan artikel lebih sedap dipandang mata jika menggunakan readmore otomatis di blog.

Ada 2 (dua) cara yang akan kita bahas, yaitu:

1. Buat read more otomatis tanpa javascript.

2.Buat read more otomatis menggunakan javascript.

Anda tinggal pilih mau gunakan javascript atau tidak.

Berikut caranya buat read more :

1. Readmore otomatis tanpa menggunakan java script.

Caranya:

• Log in blog anda, ke menu template > edit html
• Kemudian cari kode  ]]></b:skin>
• Lalu masukkan kode " .post-thumbnail{float:left;margin-right:20px} ". Letakkan tepat diatas kode ]]></b:skin> tadi.
• Kemudian cari kode <data:post.body/>
• <data:post.body/> biasanya ada 3 (tiga), pilih yang ke dua ketemu, coba satu-satu jika belum berhasil.
• Kemudian setelah kode tersebut ditemukan, ganti dengan kode di bawah ini.

<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <div> <b:if cond='data:post.thumbnailUrl'> <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/> </b:if> <data:post.snippet/> </div> <div class='jump-link'> <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a> </div> <b:else/> <data:post.body/> </b:if> <b:else/> <data:post.body/> </b:if>

• Save / simpan dan lihat hasil nya, di menu homepage anda.
• finish.

2. Readmore otomatis menggunakan java script.

Caranya:

• Log in blog anda, ingat harus blog anda, jangan blog orang lain :d
• Ke halaman template > edit html > chek list button expand widget
• cari kode </head> . gunakan CTRL + F agar pencarian cepat
• Copy kode script dibawah ini, dan letakkan tepat diatas kode </head> yang dicari tadi

<script type='text/javascript'> var thumbnail_mode = "no-float" ; 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'/>

• Kemudian anda cari kode <data:post.body/> . gunakan CTRL + F biar cepat, biasanya kode <data:post.body/> ada 3, coba saja satu - satu.
• lalu hapus kode tersebut dan ganti dengan kode script dibawah 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:right;padding-top:20px;'> <a expr:href='data:post.url'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYlog2am07eIPDmZXuUzMa482oNxtyxWTmHvLRX6erlIx_JYorwwOwWXTCGO0y-iOXaCO-iwzUG7wjtBoSKqV6psfpYGxrSi4yiCVp0O2HVnZfEhzfeu0iNaRP5NHpni-ZZp8w_SQOWaWi/s1600/readmor.JPG"></img></a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

• Selesai, simpan dan lihat hasil nya.

Keterangan :

-summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf

-summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar

-img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan

-img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan

-Anda juga bisa menrubah Icon read more letaknya di kode "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYlog2am07eIPDmZXuUzMa482oNxtyxWTmHvLRX6erlIx_JYorwwOwWXTCGO0y-iOXaCO-iwzUG7wjtBoSKqV6psfpYGxrSi4yiCVp0O2HVnZfEhzfeu0iNaRP5NHpni-ZZp8w_SQOWaWi/s1600/readmor.JPG" silahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja contohnya " >> Read more ", maka anda tinggal menghapus / mengganti kode menjadi tulisan ">> Read More" atau teks versi anda sendiri.

Anda juga bisa membuat read more secara manual tanpa harus edit html, silahkan baca artikel tentang Cara Membuat Read More Manual

Terima kasih telah berkunjung ke blog saya, mudah - mudahan anda tidak menemui kesulitan dalam memahami isi tentang artikel Cara Buat Read More Otomatis

Referensi:
Kode js diambil dari www.bamz.us
Title:(Cara Membuat Read More Otomatis Di Blog)
Author: Bamz
Date: Sabtu, November 12, 2011
Link: http://www.bamz.us/2011/11/cara-membuat-read-more-otomatis-di-blog.html

Thanks.