Cara pasang Auto Read More terbaru

Fungsi Read More kali ini emang agak berbeda dengan versi Read More yang lama. Bila versi terdahulu kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas.


Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna kuning dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)
<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;'/>

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</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>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah




<data:post.body/>
Kalo sudah, ganti kode <data:post.body/> dengan semua kode 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: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>


silahkan disimpan dan lihat hasilnya :)

Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

(http://www.o-om.com)

24 komentar:

  1. layak dicoba walaupun nambah berat buat blog .....

    BalasHapus
  2. Ahlan wasahlan ya akhii, sory waktu ana coba kok g ada perubahan apa2 ya?cuma muncul read more plus judul posting doank yang nambah diakhir postingan, sebaiknya ditulis lebih teliti lagi agar kami semua dapat mengerti dan berhasil, makasi :l:

    BalasHapus
  3. akhirnya aq sukses pasang readmore

    BalasHapus
  4. Mas blog saya read morenya acak2kan gimana? tolong bantuannya

    BalasHapus
  5. Thanks ka!! Jadi read morenya!!!! :a:

    BalasHapus
  6. mohon ijin tukeran link yah...

    BalasHapus
  7. Makasih yah walaupun masih kurang sreg????!!1

    BalasHapus
  8. wah ide bagus tuh,,, okeh di coba

    BalasHapus
  9. buat mas ridho.. hasilnya sama kayak punya saya..

    BalasHapus
  10. Thanks kawan... Q sukses.. buat read morenya

    BalasHapus
  11. saya menyukai Blog ANDA. sungguh, lebih mudah diikuti. entah....

    BalasHapus
  12. terima kasih gan berhasil Read More nya di blog nya aku,terima kasih banyak...he3x,salam sukses selalu gan......@_^

    BalasHapus
  13. Weleh.... Weleh...

    Trimakasih banyak mas, baru kali ini saya berhasil pasang Read More.

    Huhuy.............!!!!!! :f:

    BalasHapus
  14. makasih atas infonya,,
    dengan read more, postingan yang lain jadi bisa terbaca...

    BalasHapus
  15. sebelumnya saya minta maaf & trimakasih nice share kang forantum...... nih buat para blogger kalo nggak jelas postingan nya yang di share Kang Forantum bisa masuk ke blog saya http://www.orizaman.co.cc/2011/05/cara-membuat-auto-read-more-terbaru.html

    BalasHapus
  16. wah mantap juga nih sob informasionya, aku langsung ijin ke tkp gan , makasih banyak ataaaas infonya

    BalasHapus
  17. thanks banget kang, saya ini yang bner" newbie jadi tertolong.,
    thanks before,.

    BalasHapus
  18. pinjam icon readmorenya ya,, buat blog ak...hehe

    BalasHapus

Mau tukeran link? silakan buka Link Sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.