Tutorial 137 : Auto Read More

Assalamualaikum dan selamat berpuasa semua?

Sebelum ini aku ada bagi tutorial Cara Membuat Read More tapi kali ini nak bagi tutorial read more yang lagi mudah, tak perlu nak main coding semasa post entry, sangat leceh lagi melecehkan kan? So kali ini ada tutorial yang sangatlah senang lenang. Tak payah nak ejas-ejas coding kat entry box kan. Jom, aku ajarkan 2 versi, bergambar dan tidak bergambar. Jom-jom..

1. Sign in Blogspot > Design > Edit Html > Tick Expand Widget Templates

2. Copy dan cari code di bawah, Ctrl F sahaja dan paste code di bawah dalam kotak find then tekan enter!

</head>

3. Copy code di bawah dan paste di atas code yang korang cari tadi.

<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>

Keterangan
summary_noimg = 250 adalah jumlah ringkasan tulisan jika tidak ada gambarnya
summary_img = 250 adalah jumlah ringkasan tulisan jika ada gambarnya
img_thumb_height = 120 adalah tinggi gambar
img_thumb_width = 120 adalah lebar gambar
#kalau tak payah edit pun tak pe, sebab dah cun.

4. Copy dan cari lagi code di bawah,  Ctrl F sahaja

<data:post.body/>

5. Dah jumpa? Korang padam/delete code tersebut dan gantikan/replace dengan code di bawah.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span style='float:right'><a expr:href='data:post.url'>Read More... </a></span>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

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

6. Kalau korang nak tukar kepada gambar padam perkataan Read More... dan gantikan kepada code di bawah.

<img alt='Reply To This Comment' src='URL GAMBAR ANDA'/>

7. Letakkan URL GAMBAR ANDA yang sesuai.

8. Dah Preview, menjadi? Save je. Tak menjadi tu kena ikut step slow-slow dan masih tak menjadi memang tak sesuailah widget ni untuk korang.

URL gambar Read more button untuk korang

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYLWCJ5OnvtSuQd88EC9zEqqzFRyP6XjPZev7Zu5VsuG8-uG-LVhh3QrH0MEC8cgpX2B7OQ5U9xPLMzVKcSRzqc7eWC_GjrLp5siVP9xhVTg-X4JhrK4IIMQpkA3IVPHRN1Dic8viV-sGY/s1600/bicarafarahreadmore1.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3n25yEu1_myJ8qnpmAlwoVis4MqRVDBQBsyo1C5N2FXH-noM1_3QC1M7Ga_cOmqTA96-wwRH_je_i4MizIi38FvWm9aPBJP6roEhXLafgNZ-edxOTDw1C3yXZAvvQKO2__NCO3Oma4KB/s1600/bicarafarahreadmore2.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBswkYMzlNbva5Mu49Y5GKj0HfVe5RjkE0ob-udVhx5HqZKHSWMcl101zbTtYAE1ltc8VjT4hIa2HN2MrJIQf2tTIYqjI6PhSRiec58X01aDx8KlixxEIUMb85KNPNCoefMr2T-KOCH3Y3/s1600/bicarafarahreadmore3.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhmyis3qXOGwLW93ZOrax_wka03Zz27vlp4OIjQ10lFuYam1shcPX7VsZUM8EkQsFfMien2k3J5Gf1nn3PI-iW_6GQ1L0vP6cwnIw5G1eHWgqCqah3vQeB_1oRDzi6S-Zj2XzXU-Z_NwZC/s1600/bicarafarahreadmore4.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjK5LoIXz5DZOZ_6KoKLZ1ikqwTKgn_OWfUflN-TmYgckVXumsE2AMM0mVlVKx2Ct6ikmaaX_NFPkC2ktBvb_DM3gLaBwzGw8Z_lvtPvCf1y7eLzvf-KygxJbjmFFz_T9W8bSeqqv8ENOD/s1600/bicarafarahreadmore5.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_6jtPx-5VCRKDiZRCgEDhkPXdcNNaAQaeQ-ObBOkAETVxzRnnP4A2wrWBc1CL-ZQ-gYBCvHmB-Zu9GTHsjLljuzUv7j1OdEBy7h9d9PP3rvRKdmP64f1bI_sN7viE9_bj423yfwzC9sby/s1600/bicarafarahreadmore6.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaCarGWVWdETRM28WDvjuSdJ00qJeY9arrpmiPZQKDiL7hKGfGPE5E8PDkeYOdieyz9Dg31k8XlXAaw5V4gCMsF9obaihVV-ZOslb6TdUBkA8-GEv69cS_-PqUFN4YFc27ogKmtq8aBIN/s1600/bicarafarahreadmore7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3l4V5qwmCnwQ4iudHbVrMCnSIDO7xkooOdFa1TSB_Yn3J5hGgpOrd6K7wrtjkpIPfQWblBL00P6m9VonTrRqV5ujd3J0Wxs8oUXhfHMD7Os63FUhnLL6t58bD0nSz-mYrS1ICw4__ha8n/s1600/bicarafarahreadmore8.png

# 8 warna utama untuk korang, kalau nak lagi cun rajin-rajinlah design sendiri ye.

Bye!