Kamis, 26 Mei 2011

Cara Memasang "Readmore" Otomatis Pada Blogspot

P
ada postingan kali ini, saya akan membahas bagaimana membuat "Readmore Otomatis", seperti yang Anda lihat pada halaman pertama blog saya ini. Pada dasarnya penggunaan "readmore" ini bertujuan untuk meringkas artikel pada setiap postingan dan dimunculkan pada halaman pertama blog. Dan lebih menariknya lagi dalam ringkasan tersebut kita bisa tambahan image thumbnail untuk memberikan kesan menarik dan elegan yang diletakkan di awal paragraf.

Bukan hanya itu saja, disini kita dapat pengatur jumlah karakter yang akan ditampilkan dalam ringkasan. Ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image thumbnail yang ikut ditampilkan dalam postingan dan yang kedua jumlah karakter tanpa image thumbnail. Dan Anda bisa juga mengatur lebar dan tinggi image thumbnail yang akan di tampilkan.

Oke.. untuk lebih jelasnya, langsung saja kita pada pembahasan inti tentang bagaimana cara memasang "Readmore Otomatis" dalam template blog kita. Berikut langkah-langkahnya :

[1]. Silahkan Anda login dulu ke Blogger
[2]. Masuk ke "Rancangan/Layout" dan klik "Edit HTML"
[3]. Jangan lupa centang "Expand Template Widget"
[4]. Cari kode </head> kemudian letakkan script di bawah ini di atas kode </head> tadi.
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
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>
Jika sudah silahkan klik "Simpan Template" untuk mengamankan script di atas.

[5]. Langkah berikutnya, silahkan Anda cari kode berikut ini : <data:post.body/>
[6]. Ganti kode <data:post.body/> dengan script berikut 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'><span style='font-style:italic;'> &gt;&gt; read more.. </span></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
[7]. Kemudian "Simpan Template" dan silahkan lihat hasilnya.

Catatan :
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; (banyak karakter akan ditampilkan di ringkasan tanpa gambar/thumbnail)
summary_img = 250; (banyak karakter akan ditampilkan di ringkasan dengan gambar/thumbnail)
img_thumb_height = 120; (tinggi gambar/thumbnail)
img_thumb_width = 120; (lebar gambar/thumbnail)

Bagaimana, mudah bukan..??
Yahh, mudah-mudahan postingan kali ini bisa membantu Anda dan membuat blog Anda jadi lebih menarik dan elegan seperti yang Anda inginkan.

Selamat mencoba dan semoga bermanfaat..

14 komentar:

  1. Sip bro, tulisannya mantap-mantap. Spesialis ngajarin blogspot, pasti akan semakin banyak blogger-blogger di tanah kalimantan ini. Semangat...

    BalasHapus
  2. @ Dwi Wahyudi
    Matur tengkyu mas bro..
    Beberapa tulisan di blog ini juga dari teman-teman blogger yang coba saya aplikasikan/terapkan di blog saya, kemudian saya share/bagi buat temen-temen blogger semua..
    Yahh, mudah-mudahan blog ini memberikan manfaat bagi para blogger Indonesia, khususnya Kalimantan Barat, hehe5..
    SEMANGAAATTT...!!!

    BalasHapus
  3. contoh nya kaya diriku ini bloger juga hoho
    tes langsung yo bos, di juajal

    BalasHapus
  4. @ an99a
    Sudah pernah saya coba mas bro..
    Sekarang saya cari teks berjalan dgn animasi seperti diketik gitu..
    Kalo ada informasikan ke saya..
    Hehe5..

    BalasHapus
  5. wah baru tahu kalo blogspot bisa di otomatiskan gini readmorenya, trims bro :)

    BalasHapus
  6. @ blackberry
    Oke..sama-sama, mas bro..
    Selamat mencoba yaa..
    Oiya..satu hal yang perlu diketahui disini, pemasangan readmore otomatis ini juga berpengaruh terhadap laman baru..

    BalasHapus
  7. Berhasil Bos...
    Thanks Sangat... ^_^d

    BalasHapus
  8. @ Cory Senjaya's Blog
    Alaheemm...
    Setelah sekian lama akhirnya kamu berhasil juga, alhamdulillah..
    Semangat, nduk..!!!

    BalasHapus
  9. @Hario Pamungkas
    Weheheee..... sedih bacanya... "sekian lama" gkgkggk....

    Iya nih... baru sekarang... soalnya kemarin readmore-nya
    manual.. hheeee....
    Pokoke....
    MATURNUWUN YOO MAS... :D

    BalasHapus
  10. @ Cory Senjaya's Blog
    Yaa sama-sama..
    Selamat atas keberhasilannya, hehe5..
    Semangat...!!!

    BalasHapus
  11. Ok thank you banget mas,, Aq dah coba hasilnya Wow,,, tokcer..
    cuma Q msh Bingung mas mslh,,,

    1. Kenapa Di blog aq Readmore Hanya berfungsi pada halaman utama atau hanya pada menu HOME aja, terus pada halaman menu menu yg ada disidebar semua malah gak muncul readmore.

    2. klo q buat tulisan di laman baru,, redmore sich muncul tapi klo di klik gak bisa,, alias g bs muncul semua tulisannya,,
    maklum msh NEWbie, mohon pencerahannya,, Thank's...

    BalasHapus
  12. @ Rama Wijaya
    [1]. Readmore pada hakekatnya hanya terpasang pada "post-body" saja, jadi yaa hanya di halaman postingan aja readmore itu bisa bekerja..
    [2]. Jujur saja masalah readmore pada laman baru juga jadi masalah buat saya sampai detik ini, seringkali saya tanyakan sama "ahlinya" pun tidak ada jawaban. Itulah kenapa saya tidak memunculkan laman baru di blog saya ini, hehe5.. Jadi yaa maaf saya belum bisa bantu, hihi5..

    BalasHapus
  13. `wa blog nya mirip punyaQ....
    gk mirip amat c....
    tapi lumayan mirip...

    BalasHapus
  14. @ Khamz TheKhamz
    Wekekekekekk...
    Iyaa kah..?? Jadi penasaran ingin liat blog lo, hehe5..
    Hhmmm.. pantesan aja sama boss, lha wong sama-sama pake template dasar blogspot kok, wekekekekekkk..

    BalasHapus


Facebook Comment Box : "Silahkan berikan komentar Anda mengenai tampilan dan isi blog saya ini untuk membangun blog ini jadi lebih baik lagi . . ."