Pages

cara membuat auto read more dengan thumbnail

auto
hi, pembaca setia depermana12 kali ini saya akan membagikan tutorial cara membuat auto read more di post blog, auto read more merupakan salah satu cara memperindah tampilan blog sobat agar tampilan blog sobat lebih menarik dan juga auto read more membuat loading blog sobat lebih ringan dan terasa cepat, tanpa panjang lebar ini dia tutorialnya:
  • login keblogger
  • pilih template -> edit html
  • centang expand template widget
  • cari kode </head> untuk mempermudah gunakan ctrl+f
  • copy paste kode dibawah ini tepat dibawah kode diatas
<!-- Automatic read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-with picture,no-without picture
summary_noimg = 430;
summary_img = 340;
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");
    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>
<!-- Automatic read more script End -->
  • cari <data:post.body/> biasanya kode tersebut ada lebih dari satu oleh karena itu cari kode <data:post.body/> yang kedua kemudian ganti dengan kode dibawah ini

<!-- Automatic read more script Start -->
<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 style='text-align:justify;' 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'><div style="text-align: right;"><img border='0' src='http://i1307.photobucket.com/albums/s597/depermana/bluish_zps515fdacf.pnghttp://i1307.photobucket.com/albums/s597/depermana/bluish_zps515fdacf.png'/></div></a>
</b:if>
</b:if>
<!-- Automatic read more script End -->


keterangan.
kode warna merah : letak thumbnail read more RIGHT: kanan LEFT: kiri

kode warna biru:  icon read more, mungkin sobat ingin menggantinya dengan icon punya sobat.

Share it:
Sobat sedang membaca artikel tentang cara membuat auto read more dengan thumbnail . Silahkan baca artikel bloger sejati Tentang yang lainnya.
Anda baru saja membaca artikel yang berjudul cara membuat auto read more dengan thumbnail .Anda boleh copy paste artikel ini dengan menyertakan link http://lisaariyansyah.blogspot.com/2013/03/cara-membuat-auto-read-more-dengan.html?m=0 sebagai sumbernya.Dan Jika Anda ingin berlangganan Artikel dari blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel terbaru setiap ada artikel yang terbit di blog ini.

0 comments:

Kode Smiley Untuk Komentar


:a :b :c :d :e :f :g :h :i :j :k :l :m :n :o :p :q :r :s :t

Post a Comment

 

bloger sejati Copyright © 2008-2009 | Edited By : arieadie