Cara Memasang Widget Read More Otomatis Di Blogspot | Komputer & Internet SEO | @ PubliserAdsense.Blogspot.Com Cara Memasang Widget Read More Otomatis Di Blogspot

Selasa, 07 Oktober 2014

PUBLISER ADSENSE

 cara membuat widget read more otomatis di Blogspot yang menurut saya yang paling bagus adalah yang akan saya lampirkan kode script widgetnya di bawah ini., setelah saya lama mencari-cari kode script yang cocok maka script ini yang bisa pas dengan blog saya. Pada tampilan default homepage, artikel-artikel yang terpublish akan terpampang memanjang ke bawah. Berkat adanya widget readmore otomatis, tampilan blog  akan kelihatan lebih rapi dan enak dipandang.  
Nah, untuk memasang widget read more ini pun tidak terlalu sulit. Seperti biasa, sobat harus melakukan Login di Blogger,kemudian pilih menu Template. 

cara membuat read more otomatis
Selanjutnya pilih Edit HTML dan selanjutnya karna tampilan blogger sekarang terupdate jadinya gak ada expand widget langsung saja sahabat Cari kode script </head>. Untuk mempermudahkan pencarian, gunakan selalu Control+F atau tombol F3. 
Setelah ketemu, ganti kode tersebut dengan kode script di bawah :  
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; 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>  
 </head>

Langkah selanjutnya adalah cari kode <data:post.body/>, lalu ganti kode tersebut dengan kode yang ada di bawah ini. Perhatikan, kode script <data:post.body/> dalam sebuah template, mungkin terdapat dua atau tiga buah kode script yang seperti ini. Sobat bisa mencoba untuk mengganti secara satu persatu. Dan pada template blog yang ini, kode scrip <data:post.body/> yang saya gantikan adalah yang kedua. 
<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;padding-top:20px;'>
<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>
Setelah selesai, sobat bisa mencoba mengklik Pratinjau untuk melihat hasil editannya. Dan jika berhasil, sobat bisa menyimpan hasil editannya dengan mengklik Simpan Template
Ditulis oleh: Muhammad Ridwan
Komputer PC, Updated at: Selasa, Oktober 07, 2014
Bagikan Artikel :
Categories:

IKomputerpc
Anda sedang membaca Artikel tentang Cara Memasang Widget Read More Otomatis Di Blogspot, jika Anda menyukai Artikel ini, silahkan klik IKUTI untuk dapat berlangganan gratis lewat email, dengan begitu Anda akan mendapat kiriman artikel terbaru. Ikuti Sekarang! feed