Header Ads

Cara Buat Read More


Asalamulaikum...hari ini Apiez ingin kongsikan dengan anda semua bagai mana cara nk buat Read More atau Baca Selanjutnya di Blog anda. tujuan kita buat read more adalah untuk menyikatkan post kita dimuka utama, dan meringgankan halaman utama post jika satu post anda tu sudah panjang, tentu sekali lambat untuk membuka halaman utama blog anda. untuk membuat read more senang sahaja ikut langkah-langkah ringkas seperti dibahwa :

1. Pergi keDashboard
2. Klik Layout
3. Klik Edit HTML
4. Klik Expand Widget Templates ( contohnya seperti gambar dibawah)

5. Cari Kod  ]]></b:skin>
6. Salin Kod dibawah ini :
<script type='text/javascript'>
 summary_noimg = 330;
 summary_img = 285;
 img_thumb_height = 100;
 img_thumb_width = 100;
</script>

<script type='text/javascript'>
/******************************************
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(&quot;&lt;&quot;)!=-1)
    {
        var s = strx.split(&quot;&lt;&quot;);
        for(var i=0;i&lt;s.length;i++){
            if(s[i].indexOf(&quot;&gt;&quot;)!=-1){
                s[i] = s[i].substring(s[i].indexOf(&quot;&gt;&quot;)+1,s[i].length);
            }
        }
        strx =  s.join(&quot;&quot;);
    }
    chop = (chop &lt; strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=&#39; &#39; &amp;&amp; strx.indexOf(&#39; &#39;,chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+&#39;[...]&#39;;
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = &quot;&quot;;
    var img = div.getElementsByTagName(&quot;img&quot;);
    var summ = summary_noimg;
    if(img.length&gt;=1) {   
        imgtag = &#39;&lt;span style=&quot;float:left; border: 1px dotted #fff; height: 113px; width: 113px; margin-top: 10px; margin-right: 20px; &quot;&gt;&lt;img src=&quot;&#39;+img[0].src+&#39;&quot; width=&quot;&#39;+img_thumb_width+&#39;px&quot; height=&quot;&#39;+img_thumb_height+&#39;px&quot;/&gt;&lt;/span&gt;&#39;;
        summ = summary_img;
    }
   
    var summary = imgtag + &#39;&lt;div&gt;&#39; + removeHtmlTag(div.innerHTML,summ) + &#39;&lt;/div&gt;&#39;;
    div.innerHTML = summary;
}
</script>


7. Paste Kod Kat atas ni di bawah code ]]></b:skin>
Langkah Yang terakhir 

1. Cari Kod <data:post.body/> 
 2. Salin Kod dibawah : 


<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'>--&gt;Baca SelanjutNya...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

3. lepas anda Salin Kod diatas
4. gantikan kod yang anda cari td iaitu  <data:post.body/>  dengan kod diatas
5. Akhir Sekali Save Template

Dan Tengok Hasilnya.. Sila tinggalkan Comen anda Selepas mencuba toturial disini. Selamat Mencuba :)


9 comments:

  1. slm,tutorial ini sememangnya mbantu...tq... t,utama kmi yg bru nak bjinak2 dgn blog...thanks alot

    ReplyDelete
  2. sama2 segala ilmu bukannya datang bergolek drp langit, atau ilham sendir, semuanya dtg dripada bantuan Allah s.w.t.. insyallah segala ilmu yng ada sama2lah kita kongsi..

    ReplyDelete
  3. SALAM...tq tutorial mmg sngt2 mbantu...nie kak ura.mcm mne nak chat di blog apiez ek?.....

    ReplyDelete
  4. ooo kak ura, babkpo tok sing in dengan akaun googel (akaun blog nilah, pasword dan emil blog kak ura bruleh tahu sapoo.. ingat sapo anonymous tu..

    oo tu chat duk tepi tuh, klik jelah button kuning alik kanan tuh hok ada gambar robot yang ada tulisan "jom Chat".. klik tuh tubik ar chat box..
    :b:

    ReplyDelete
  5. thx, n3 yg amat membantu..
    thx again

    ReplyDelete
  6. info yg sgt berguna..
    tengs eh ?
    :)

    ReplyDelete

Powered by Blogger.