Pasang Script Auto Read More di Blogger

Senin, 07 Februari 2011

Read more (baca selengkapnya) biasanya sering kita jumpai di postingan-postingan pada homepage atau halaman utama suatu blog yang tujuanya untuk menampilkan sebagian isi postingan pada halaman utama saja dan akan menampilkan keseluruhan isi jika kita mengklik link readmore tersebut.

Blogger sendiri sebenarnya telah menyediakan fasilitas readmore tetapi pada kali ini saya akan memberikan trik untuk memasang fasilitas ini secara otomatis tanpa harus menambahkan suatu kode pada tiap postingan yang kita buat (readmore versi lama).

Cara Pasang Script Auto Read More

Penting!!! jika sebelumnya anda telah memasang readmore versi lama (.fullpost), sebaiknya hapus dulu kodenya.

1. Masuk ke account Blogger anda. Pilih Rancangan->Edit HTML
2. Centang pada "Expand Widget Templates"
3. Cari kode </head> kemudian letakan script dibawah ini tepat diatasnya.

<script type='text/javascript'>
var thumbnail_mode = "no-float" ; 
summary_noimg = 400; 
summary_img = 325; 
img_thumb_height = 100; 
img_thumb_width = 120; 
</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(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>

4. Masih dalam tab Edit HTML, cari lagi kode <data:post.body/> atau <p><data:post.body/></p> lalu ganti dengan kode dibawah ini.

<b:if cond='data:blog.pageType != &quot;item&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:right; '>
<a expr:href='data:post.url'>&#187;&#187; Readmore </a></span> 
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> 
</b:if>

5. Simpan template kemudian lihat hasilnya.

Tips:
  • var thumbnail_mode = "no-float"; -> Menetapkan gambar / thumbnail tidak di float.
  • summary_noimg = 400; -> Banyaknya karakter yang akan ditampilkan tanpa gambar / thumbnail.
  • summary_img = 325; -> Banyaknya karakter yang akan ditampilkan dengan gambar /thumbnail.
  • img_thumb_height = 125; -> Tinggi gambar / thumbnail.
  • img_thumb_width = 125; -> Lebar gambar / thumbnail.
  • &#187;&#187; Readmore -> Text untuk link readmore, silahkan ganti sesuai keinginan anda.
Demikianlah Tutorial auto read more dari saya dan jika ada yang kurang jelas, jangan sungkan untuk bertanya dengan memberikan komentar. Selamat Mencoba !

Dapatkan update terbaru:
* Cek email konfirmasi untuk berlangganan yang telah dikirimkan ke email anda

15 komentar:

Wati mengatakan...

hebat nih script Auto Read Morenya.. makasih ya.


15 Februari 2011 17.35
Vista 84 mengatakan...

mkasih mas bro tutorialnya :)


14 Maret 2011 10.38
Abu Hz - Belajar Bisnis mengatakan...

Kalo readmore versi lama (.fullpost) dihapus, bagaimana dgn postingan yg sdh ditambahkan dgn script (span id fullpost) itu, apa hrs dihilangkan juga? wah rada repot nih yg sdh punya banyak postingan...


26 Maret 2011 20.42
Fahri mengatakan...

hebat kang, dari semua yang saya coba, baru ini yang berhasil ..... makasih kang.


22 April 2011 12.53
Gulali mengatakan...

bang mau nanya...
kan blog saya fontnya courier... nah pas dipasang script ini.. fontnya jadi default.. ada cara buat mengatasinya ga ? makasih sebelumnya..


25 Agustus 2011 16.28
DJENDRAL BERBAGI mengatakan...

Mantab postingannya, ditunggu postingan berikutnya.

http://dewabumitercinta.blogspot.com


16 September 2011 12.33
Tabloid Blogger mengatakan...

Pakai script ya,,mendingan gak pakai scrpt kak,, soalnya jika javasript dibrowsernya gak aktif makin panjang tuh postingaannya.
Tapi blog saya sih cukup judulnya saja gak pake readmore segala.
salam kenal kawan..


15 Oktober 2011 04.38
Blog Kabar Pendidikan mengatakan...

kok gak berhasil ya.. apa ada cara lain??


15 Oktober 2011 19.45
Supllier Tas mengatakan...

Mantap bro script nya.. Salam kenal ya gan.

Kalo berkenan berkunjung juga ke web ane ya.
Pabrik Tas Jakarta


20 Desember 2011 16.01
SEO tools mengatakan...

Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.


13 Januari 2012 20.34
obat herbal liver mengatakan...

gagal mulu saya, masih harus banyak belajar


30 Mei 2012 08.14
atasi jerawat dengan obat alami mengatakan...

di html q kok script data:post.body atau p data:post.body p nya gak ada gimana donk??


14 Maret 2013 16.01
putri mengatakan...

Informasinya sungguh sangat menarik sekali...
Banyak pelajaran yang saya dapatkan...
Makasihnya... Semoga sukses...


23 Agustus 2013 09.00
bwin agenjudi mengatakan...

============================

Keep sharing gan, kunjungi balik yaa..

Bwin368 Agen Judi Terpercaya
Bwin368 Agen Judi Online

Bwin368 Agen Bola Terpercaya
Bwin368 Agen Judi Terbesar

Dewa Bola Online
Dewa Bola

============================


11 Mei 2014 19.06
Mobile App Developers mengatakan...

That is an extremely smart written article. I will be sure to bookmark it and return to learn extra of your useful information. Thank you for the post. I will certainly return.


29 April 2015 15.31

Posting Komentar

 

Info

Pengikut

Earn Money ($$$)

© 2010 Tutorial Blog Gratis | Wordpress | Blogger All Rights Reserved Thesis WordPress Theme by Hack Tutors.info