Share - Life - Techno

Lowongan Kerja Terbaru, Lowongan Kerja BUMN, Download Vector, Koran Gratis, Desain Grafis, Tips Blog, Tips IT, Artikel Pendidikan, Artikel Sejarah, Artikel Islam, Update Patch PES6, Dangdut Academy3

Panduan memasang Read More Otomatis pada Blogspot

Dear Blogger, pokok tulisan yang akan penulis ketengahkan sebenarnya bukan hal baru lagi di dunia blogger, master-master blogger yang sudah malang melintang di dunia per-Bloger-an sudah banyak memandu tentang cara memasang penggalan post di halaman utama pada blogspot/blogger.

Kali ini tentu saja giliran saya yang ingin sedikit berbagi tahu tentang cara memasang readmore otomatis, yang siapa saja sangat bisa untuk membuatnya hanya dengan beberapa langkah saja.

Simak langkah langkahnya berikut ini.

  1. Login menggunakan akun blogger anda.
  2. Masuk ke Menu Design/Perancangan dan pilih Edit Html kemudian centang Expand Widget Templates.
  3. Letakkan kode dibawah ini tepat diatas </head> 

  4. <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 301; img_thumb_height = 150; img_thumb_width = 150; </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");
    if(img.length<1) {
    imgtag = '<span style="float:left; padding:0px 0px 5px 10px;"><img src="http://3.bp.blogspot.com/-1QeBP11II70/TVzBDkKnOwI/AAAAAAAAArg/QZJJW2CE21A/s1600/daffy_use_blogger_shirt.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
    var summ = summary_noimg;
    }
    if(img.length>=1) {
    imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><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. Kemudian Cari <data:post.body/>
  6. align="left" background="#000000">
    <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:left'><a expr:href='data:post.url'><b>Read more &#187;</b></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><p><data:post.body/></p>
    </b:if>
  7. Selesai, dan simpan template anda
Ket:
  • http://3.bp.blogspot.com/-1QeBP11II70/TVzBDkKnOwI/AAAAAAAAArg/QZJJW2CE21A/s1600/daffy_use_blogger_shirt.jpg - Jika pada postingan anda tidak terdapat image di dalamnya maka secara otomatis akan tampil thumbnail dengan tampilan default seperti link gambar yang tampak diwarnai merah, nah untuk itu jika anda merasa kurang begitu berkenan, anda bisa menggantinya sesuai selera.
    Panduan memasang Read More Otomatis pada Blogspot Rating: 4.5 Diposkan Oleh: Abdul Muta'ali

    0 comments:

    Posting Komentar