Senarai Tutorial

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/AVvXsEhdQa9m9bn4xYfEZYPdUid5c5Rt-Juv7zy4EeDMx53hV455ONJfM0p2Cte2QYIG7PUXPhNCf6S3LT2ql7UfyU0RMCQnCQdEn9RiEhqxFndpOjkpvUoEPlYRKg62Dj9EDdSd0AZFUFts_EI/s320/read+more_thumb%5B1%5D.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><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! :)


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

10 komen budak comel:

Anonymous said...

6) Copy kod merah di bawah dan gantikan pada kod tadi...?
mana yang kod merah,kak ? ._.

Jombinabelog said...

@Anonymous owh sori, pembetulan, bukan kod merah, kod di bawah

Anonymous said...

nak tanya cmna nak dptkan kod 'head' tu? tak reti nak klik kat mana..

SyaCha Abdullah said...

saya baru tukar template... so, mende ni da tak berfungsi pada blog... cane nak buang read more tu??

Nurul Syuhadah said...

sys , nak tanya lah . ade terima ape-2 tempahan tak untuk buat header or any else ? mcm nak buat banner and ayt PAGE "home, about me, and any else ?

w. suffan said...

kalau kod " " ada 2 bagaimana ? pilih yang mana ya ?

ADMINPKG said...

sorry nk tanya...mmg button readmore akan ada pd setiap pages jgk ka...? igtkan hanya pd bhgn post sj...tp bila preview blog,pages pn ada button readmore and then bila tekan button readmore tu xde fungsi plak...pliz help me...mcm mn nk betulkan balik...?

Unknown said...

can you upload the video of this tutorial? i dont really understand

Jombinabelog said...

@SyaCha Abdullah just delete kod read more..cari dalam edit template html guna ctrl+F

Jombinabelog said...

@Nurul Syuhadah setakat ni tak buka lagi utk tempahan, hehe, mybe akan datang

Copyright© All Rights Reserved Jombinabelog.blogspot.com