Tutorial Auto Read More Untuk Blogspot

Auto Read More Untuk Blogspot
Dah lama tak buat tutorial.. kali ni nak share tutorial plak.. kalau layout rosak taklah susah nak edit balik sebab boleh tengok tutorial post sendiri.. hehe...

Tutorial kali nie mengenai Auto Read More macam kat gambar dia atas. Kalau guna Auto Read More ini, nampaklah macam blog tu ala-ala pro kan.. heheh.. jom layan tutorial kat bawah..

CARA PASANG AUTO READ MORE UNTUK BLOGSPOT

Ikut step dibawah:


1. Login akaun blog korang.
2. Back up template korang dulu ye... Dashboard Template Back up/Restore (sebelah kanan atas)   Download Full Template
3. Pergi ke Dashboard  Template  Edit HTML.
4. Pada ruangan code HTML, klik ctrl + F untuk menghidupkan fungsi find kemudian cari kod berikut </head>
5. Copy code dibawah dan letakkan code tersebut dia atas code </head>



<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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(thumbnail_mode == "yes") {
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>
<!-- Auto read more script End -->

6. Kemudian cari plak perkataan ni articleBody. Bawah dari perkataan tersebut ada code ini <data:post.body/>

Auto Read More


7. Copy code dibawah dan ganti kan pada code <data:post.body/> ini.

<!-- Auto read more Start -->
<!-- http://ieza-usagi.blogspot.com/ -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->


8. Klik Preview Template dan lihat hasilnya... Bila dah menjadi, klik Save
Template ^_^