Tehnik memasang auto read more dianggap dapat membantu mempercepat loading blog karena bekerja secara otomatis dengan memenggal kalimat yang panjang dari postingan blog menjadi beberapa kata saja.
Auto read more ini juga mempercantik blog dengan menampilkan image thumbnail berupa image paling pertama di setiap artikel meskipun gambar tersebut diletakkan ditengah bahkan diakhir postingan.
Jadi bagaimana cara membuat auto read more ? Mari perhatikan dan ikuti langkah - langkah di bawah ini untuk dapat memasang auto readmore di blog anda.
1. Masuk ke blogger, klik template , klik Edit HTML
2. Letakkan kode di bawah ini di atas kode </head> , cari menggunakan Ctrl+F
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>
3. Cari kode <data:post.body/> hapus kode tersebut dan ganti dengan kode di bawah ini
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE → </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></b:if>
Kreatifitaskan auto read more sesuai kehendak dengan mengatur kode berikut :
0 komentar:
Posting Komentar