TUTORIAL: AUTO READ MORE DENGAN THUMBNAIL

Assalamualaikum dan salam sejahtera.

Apa khabar semua? Di pagi Selasa yang indah ini, Cik TK nak kongsi satu tutorial membuat auto Read More dengan thumbnail.

Kebiasaannya, template-template yang didapati dari pelbagai website penyedia template sudah ada fungsi sebegini. Tetapi tidak secara auto jika menggunakan template yang memang berasal dari blogger sendiri.

Bagi sesiapa yang selalu singgah ke teratak Cik TK yang tidak seberapa ini, pastinya perasan dengan perubahan baru di blog Cik TK ini. 

Contoh dari blog Cik TK sendiri, menjadi jugalah cara ini

Oleh itu, mari kita mulakan tutorial kita ini dengan membuka ruangan Edit HTML. Seperti biasa:

1. Login ke Dashboard Blogger

2. Pergi ke Theme

3. Disebelah perkataan Customize, tekan anak panah ke bawah dan pilih Edit HTML

Baiklah, dari sini kita akan mengubah sedikit beberapa kod, caranya seperti di bawah:

4. Klik mana-mana bahagian dalam ruangan kod dan tekan Ctrl dan F supaya ruangan search kelihatan.

5. Cari kod </head> dan copy paste kod di bawah pada lokasi sebelum </head> tadi.  

 

 <script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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>

Nota:

summary_noimg = 430; adalah size post tanpa gambar

summary_img = 340; adalah size post dengan gambar

img_thumb_height = 100; adalah size tinggi gambar

img_thumb_width = 120; adalah size lebar gambar

 

 

6. Kemudian cari pula kod <data:post.body/> dan gantikan kod ini dengan kod seperti dibawah

 

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>

<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:right;padding-top:20px;'><a expr:href='data:post.url'> baca seterusnya... </a></span>

</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

</b:if>

 

7. Setelah selesai, cuba Preview dulu. Kalau sudah puas hati baru Save.

Selamat mencuba!!!