Berlangganan melalui Email Berlangganan melalui RSS feed Ikuti saya di facebook Ikuti saya di twitter

cs

Cara Pendaftaran

ketik : REG.NoHPAnda.Nama.Kota

contoh : REG.085646464646.AYUCELL.SURABAYA

kirim ke 089667 404 404

Cara membuat readmore otomatis di blog

Cara membuat readmore otomatis di blogspot


Alhamdulillah, Akhirnya bisa juga bikin  readmore setelah beberapa hari kebinggungan mencari-cari letak  <data:post.body/> atau <p><data:post.body/></p>  akhirnya ketemu juga. lega rasanya….

Akan saya bagi kebahagiaan ini dengan menulisnya, dan mudah-mudahan bermanfaat bagi sobat-sobat sekalian. Berikut ini Cara membuat readmore otomatis di blog

  1. Login ke blogger.com
Pilih blog yang mau kita edit, pilih Layout dan masuk ke Edit HTML
  1. Jangan lupa centang/tandai Expand Widget Templates agar bisa mengedit template secara keseluruhan.
  2. Carilah kode </head> (Mozila: Tekan CTRL + F untuk memudahkan proses pencarian). Masukan kode di bawah ini sesudah  kode </head> tersebut.
</head>
    <script type='text/javascript'>
    var thumbnail_mode = &quot;float&quot;;
    summary_noimg = 700;
    summary_img = 470;
    img_thumb_height = 120;
    img_thumb_width = 173;
    </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 class="preview"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" style="margin:5px" alt="preview"/></span>';
                            summ = summary_img;
                }
               
                if(img.length<1) {      
                            imgtag = '<span class="noimage"><img src="http://3.bp.blogspot.com/_IKigl6y9hFA/TTF8ozHP4jI/AAAAAAAAARI/DZscMog1V4g/nopreview.jpg" width="173px" height="120px" style="margin:5px" alt="preview"/></span>';
                            summ = summary_img;
                }
               
                var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
                div.innerHTML = summary;
    }
    //]]>
    </script>

  1. Cari kode <data:post.body/> atau <p><data:post.body/></p> dan ganti dengan kode berikut:

    <b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
    <data:post.body/>
    <b:else/>
    <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='more'><a expr:href='data:post.url'>Read more</a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
    </b:if>  


  1. Langkah terakhir letakan kode more link dibawah ini di atas kode  ]]></b:skin>
/* more link style */
.more a, .jump-link a{-moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;float:right;padding:2px 12px; border:none; background:#ccc; color:#000;font-style: italic;border:1px solid #b7b7b6;margin-top:10px;text-decoration:none;}
.more a:hover, .jump-link a:hover{background:#797878;color:#fff;border:1px solid #545353;text-decoration:none;}
  1. Simpan template dan lihat hasilnya.
Keterangan:
    var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak tulisan post berada di kiri gambar / thumbnail (float) atau di bawah gambar / thumbnail    
    (no-float)) summary_noimg = 700; (Menetapkan berapa banyak karakter  yang akan ditampilkan di posting tanpa gambar / thumbnail)    
    summary_img = 400; (Menetapkan berapa banyak karakter  yang akan ditampilkan di posting dengan gambar / thumbnail)  
    img_thumb_height = 120; (tinggi gambar / thumbnail dalam piksel)
    img_thumb_width = 173; (lebar gambar / thumbnail dalam piksel)   
    <span class="noimage"><img src=http://3.bp.blogspot.com/_IKigl6y9hFA/TTF8ozHP4jI/AAAAAAAAARI/DZscMog1V4g/nopreview.jpg ( Tampilan gambar / thumbnail apabila postingan tidak memiliki gambar / thumbnail, sobat bisa ganti dengan link gambar / thumbnail sobat sendiri)
    (Kode-kodedi bawah ini hanya untuk mempercantik tampilan Read morenya, Sobat bisa ganti kode yang berwarna merah dengan kode warna yang sobat sukai)
    .more a, .jump-link a{-moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;float:right;padding:2px 12px; border:none;
    background:#ccc;
    color:#000;
    font-style: italic;
    border:1px solid #b7b7b6;
    margin-top:10px;text-decoration:none;}
    .more a:hover, .jump-link a:hover{
    background:#797878;
    color:#fff;
    border:1px solid #545353;
    text-decoration:none;}



Membuat Read More Baca selengkapnya ala Agen Pulsa

Artikel Terkait

comment 2 komentar:

Jadi Bos on 10 Februari 2012 15.43 mengatakan...

Ane coba dulu gan....

trims

Indusuno on 31 Mei 2017 03.11 mengatakan...

But I am not able to implement this Readmore feature in my this blogger - http://indusuno.blogspot.com
Please help.

Posting Komentar

 
© Agen-Pulsa.com | Design by Blog template in collaboration with Concert Tickets, and Menopause symptoms
Powered by Blogger