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

2. Jangan lupa centang/tandai Expand Widget Templates agar bisa mengedit template secara keseluruhan.
3. 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxx6lPKqH5stZ-PgBrBYlumiFowgXf1-S-0GJsvNWuzvemNF61mMmZ7QeaSGnQeIRVIlVOICb-kUQ8mRNR3ElK8Ct7T7FNGaYqr-1gL_b3TkvLaaLcu3Qv_VASR52P5QRO-Wa9d8R59Vw/" 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>

4. 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>  

5. 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;}

6. 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=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxx6lPKqH5stZ-PgBrBYlumiFowgXf1-S-0GJsvNWuzvemNF61mMmZ7QeaSGnQeIRVIlVOICb-kUQ8mRNR3ElK8Ct7T7FNGaYqr-1gL_b3TkvLaaLcu3Qv_VASR52P5QRO-Wa9d8R59Vw/ ( 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