Letak Read More pada setiap post..
Dengan
fungsi ini, setiap entri post akan diringkaskan dan di set kepada read
more. Image yang ada pada setiap entri akan disetkan kepada saiz yang
lebih kecil dan di letakkan pada sebelah kiri. Fungsi ini juga akan
menghadkan secara auto jumlah teks yang akan dipaparkan pada satu entri.
Untuk membina fungsi auto read more ini, sila ikut beberapa langkah di bawah:
P/S: Sebelum itu, sila
backup template anda terlebih dahulu sebagai langkah berjaga-jaga.
1) Sign in akaun blogger anda
2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod
</head>
4) Copy kod di bawah dan pastekan
sebelum/di atas kod
</head> yang anda cari dalam langkah 3 tadi
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 350;
summary_img = 450;
img_thumb_height = 140;
img_thumb_width = 140;
</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 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>
5) Sekali lagi, dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod di bawah pula,
<data:post.body/>
6) Copy kod di bawah dan gantikan pada kod
<data:post.body/> tadi
<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:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_6y10aq0EuYPA2kvTETQXUFAIFtsXHuZH34jBGMLRyfKROBj_nA_xv9-S9FRIHBmED4eCytS-gYlHOqEVDK6xHr1-rbi85fn5EZEIpBbSopheAvUhsqK7WQHpRyrUILMn8KmQH1FK_04/s320/read+more_thumb%5B1%5D.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Pada url yang diboldkan purple di atas, masukkan url button pilihan anda. Pilih button di
sini.
7) Akhir sekali klik preview, dan jika tiada error, klik save.
Selamat mencuba! :)
Label: Lihat saja, Tutorial, WOW
Posting Komentar
just type it