Untuk Post Kali Ini Sy Akan Berkongsi Cara Untuk Membuat Auto Readmore pada blogspot. Dengan mengenakan coding ini pada blogspot, semua post anda akan automatic membuat auto readmore tidak kira untuk post baru ataupun lama. Untuk module sebelumnya sy telah berkongsi cara membuat Readmore pada posting. Untuk membuat auto readmore pastikan anda telah membuang semua readmore effect yang dikenakan pada post2 sebelum ini.

1 Pergi Dashboard > Design > Edit HTML.
2 Back up template.
3 Klik "Expand Widget" check box.
4 Cari coding </head>. (Ctrl + F untuk memudahkan perncarian)
5 Letak coding Read More dibawah selepas </head>
<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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(thumbnail_mode == "yes") {
 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>
<!-- Auto read more script End -->

6. Selepas itu cari koding <data:post.body/>
7 Gantikan coding tersebut dengan coding dibawah

<!-- Auto read more Start -->
<!-- http://www.syoknyerblogging.blogspot.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

8. Klik preview, Jika tiada sebarang masalah,tekan save.

Menukar effect

Untuk menukar effect auto readmore sila tukar pada bahagian berikut

1. thumbnail_mode – tukarkan = "no" jika mahu memaparkan text sahaja yakni tanpa gambar.
2. summary_img – jumlah character yang ingin ditunjukkan bersama gambar sebelum auto readmore.
3. summary_noimg – Jumlah character yang ingin ditunjukkan jika tiada gambar.
4. img_thumb_height and img_thumb_width - Tukar kelebaran dan ketinggian gambar dalam pixels.

Diharapkan tutorial ini membantu anda. Selamat mencuba.. (^^,).










Share Gadget
Stumble
Delicious
Technorati
Twitter
Facebook
Blog
Gadget


Jika anda sukakan article ini,linkkan kembali...



Dicatat oleh Thalhah Amir on Khamis, 2 Disember 2010

1 Responses to Module 11: Cara Membuat Auto ReadMore Pada Blogspot

  1. hanafi kill Says:
  2. Cmne nk wat mcm blog admin ni?? "Kongsikan! Jika anda Suka Post ini"....

     

Catat Ulasan

Cari Blog Ini

Pengikut

Pengikut Facebook

Informasi

SyoknyerBlogging adalah sebuah blog tutorial untuk bloggers yang menggunakan platform blogspot. Semua tutorial disini adalah daripada pengalaman sy berblogging selama 3 tahun. Sy bukan untuk mengajar tetapi lebih kepada berkongsi. Harap anda gembira disini. (^^,)

Mengenai Saya

Foto saya
Sy sangat sukakan web. Seorang Programmer. Pemilik Syoknyerblogging
Copyright 2010 | SyoknyerBlogging | Belajar Blogging Dalam Bahasa Melayu
Zengard Template designed by the Jinsona Design and XML coded by CahayaBiru.com