Jika kemarin saya posting tentang membuat autoscroll pada komentar blog , sekarang saatnya memposting bab membuat Auto Readmore. tentu sobat semua yang mempunyai postingan panjang akan sangat bermanfaat sekali, selain membuat tampilan lebih rapi tentu saja membuat template kita terlihat keren dan SeoFriendly . yuk kita simak tips di bawah ini.Berikut cara membuat autreadmore:
1. masuk ke rancangan >> Edit Html
2. beri tanda centang pada "Expand Widget Templates"
3. lalu copy kode dibawah, letakkan tepat diatas </head>
<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 300; summary_img = 301; img_thumb_height = 100; img_thumb_width = 150; </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");
if(img.length<1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPdlTwP7-QDxGrGtI_g-QbOaT569YTF3RKIpiz9qsYmFDGmtFDxCPS8mDU6hM-7M9B0i-nzA9sGRs-Tqvvmh9KLLENAZsSqcIETch7de7tsJCEOVTsePyhVQlqCoyoBPbNjsb_5ODeAg/s1600/def-thumb.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><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> Perhatikan dan edit sesuai selera sobat:
summary_noimg = 300 ---- jumlah karakter yang ditampilkan tanpa gambar
summary_img = 301 ---- jumlah karakter yang ditampilkan termasuk gambar
img_thumb_height = 150 ----tinggi gambar thumbnail
img_thumb_width = 150 ---- lebar gambar thumbnail
float:right ---- posisi gambar thumbnail di kanan. Jika anda ingin gambar thumbnail berada di kiri ganti right menjadi left
4. lalu cari kode <data:post.body/> atau <p><data:post.body/></p>
5. Selanjutnya sobat ganti dengan kode dibawah :
Nah, mudah bukan...semoga bermanfaat yah.... :)
div.innerHTML = summary;
}
//]]>
</script> Perhatikan dan edit sesuai selera sobat:
summary_noimg = 300 ---- jumlah karakter yang ditampilkan tanpa gambar
summary_img = 301 ---- jumlah karakter yang ditampilkan termasuk gambar
img_thumb_height = 150 ----tinggi gambar thumbnail
img_thumb_width = 150 ---- lebar gambar thumbnail
float:right ---- posisi gambar thumbnail di kanan. Jika anda ingin gambar thumbnail berada di kiri ganti right menjadi left
4. lalu cari kode <data:post.body/> atau <p><data:post.body/></p>
5. Selanjutnya sobat ganti dengan kode dibawah :
<b:if cond='data:blog.pageType != "item"'>6. Jika sudah SAVE template sobat
<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'><b>Read more »</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><p><data:post.body/></p>
</b:if>
Nah, mudah bukan...semoga bermanfaat yah.... :)
