Cara Membuat Auto Read More

Cara Membuat Auto Read More- Bagi sobat yang masih awam dengan ngeblog pasti ada yang aneh dengan blognya. Pada kolom postingan blognya (biasanya halaman pertama/homepage) akan terlihat memanjang ke bawah entah sampai mana, dan tentunya hal ini kurang efisien untuk blog kita, dan imbasnya akan membuat pengunjung blog kita tidak nyaman dengan blog kita yang berantakan. Pada kesempatan kali ini saya melalui blog blogger Tutorial akan memberikan panduan tentang membuat Auto Readmore di Blogger.com.
Cara membuat auto readmore ini sangat mudah, bahkan untuk sobat yang baru belajar ngeblog sekalipun :) Dengan menggunakan cara ini, postingan sobat pada homepage, label, arsip dan lainnya akan diringkas sesuai pengaturan sobat.
Jadi nantinya kolom postigan blog sobat Blogger Tutorial akan menjadi seperti ini nih

Berikut cara menginstall autoreadmore di blogger:
1. Login akun blogger sobat terlebih dahulu.
2. Klik Template dan pilih Edit HTML.
3. Tekan CTRL+F dan cari kode </head> di kolom pencarian yang sudah disediakan.
4. Lalu masukkan kode ini di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 200;
summary_img = 200;
img_thumb_height = 60;
img_thumb_width = 100;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
********************************************/
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:0; margin:3px 10px 0 0;"><img alt="Thumbnail" itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibegpW8K8AGTbQ65-kblshu87ryZQH-ZIY97NzRZ_QBJJrlihJr9q34-O5NtFqwHqFcmUQEmCXjEso2MaoeBdbTjke0hXo-lPBAvDpw9afLvHqKRryx2Cz284F0Un-bZ_x8gR6EejVFEUq/s1600/nothumb.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left; margin:3px 10px 0 0;"><img alt="Thumbnail" itemprop="image" src="'+img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" 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. Bila sudah, cari kode <data:post.body/> lalu ganti dengan kode ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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>
</b:if>
</b:if>

6. Klik Preview terlebih dahulu untuk memastikan apakah script sudah bekerja atau belum, karena terkadang terdapat lebih dari satu kode <data:post.body/>.

7. Bila sudah berhasil, langsung Klik Simpan :)

Sekarang kita atur readmorenya'
var thumbnail_mode = &quot;no-float&quot :
Untuk menampilkan thumbnail, ganti no-float dengan float untuk mengaktifkan thumbnail (float kiri).
summary_noimg = 200;
Menampilkan banyak karakter bila readmore tanpa gambar (settingan no-float).
summary_img = 200;
Menampilkan banyak karakter bila readmore menggunakan gambar.
img_thumb_height = 60;
img_thumb_width = 100;
Untuk mengatur Tinggi dan Lebar thumbnail dalam piksel.

Sekarang Readmore di blogmu sudah jadi, dan blog akan terkesan lebih rapi dan loadingpun tidak lambat. :)

Sumber link

Related Posts:

Tweet