-

Membuat Jump Link Read More

Blogger telah mengaktifkan ringkasan postingan untuk blog kita, berarti kita dapat menambahkan "Read More" dalam posting kami, setelah itu yang terlihat hanyah bebrapa baris dari postingan tersebut. Didalam template bawan blogger script untuk membuat read more, berarti ita harus menambahkan code kedalam HTML template Blog Anda. Pada postingan ini, saya akan memberikan tip betapa mudahnya membuat Read More.


Blog sekarang memiliki "Jump Link" yang diaktifkan secara default dalam template Blogger kita, ada beberapa trik yang berguna dan menarik kita dapat melakukannya untuk membuat Read more.
Berikut adalah beberapa ide untuk Anda laksanakan ;

  1. Masuk ke Blogger
  2. Klik Template - Edit HTML
  3. tekan " Shift + F " ketik " </head> "
  4. lantas Copy kode dibawah ini dan Paste ke atas Koe </head> ....                                                                                                                                                                                                                 <script type='text/javascript'>
    var thumbnail_mode = "float" ;
    summary_noimg = 275;
    summary_img = 275;
    img_thumb_height = 120;
    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>                                                   
                                                                                                                                  
  5. Find ( Shift+F )lagi Code yang kedua " <data:post.body/> ", atauitemprop='description articleBody Copy kode di bawah ini paste ke " <data:post.body/> " setelah kode itemprop='description articleBody "                                                                                                                                                                                                                                                                                                   <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>
    <div class='readmore-link'><span class='arrow'>›</span> <a expr:href='data:post.url'>Read More</a></div>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> 
       
  6. Simpan dan lihat hasilnya ...
sebelum melakukan aksi di atas tolong script di BackUp ke wordpad dulu, saya tidak bertanggung jawab nanti bila template terjadi hal-hal yang tidak diinginkan ....

0 Response to "Membuat Jump Link Read More"

Post a Comment

No Spam ! No URL aktif ! pasti akan saya publish, matur nuwun :) ...

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel