Cara Buat Read More
Asalamulaikum...hari ini Apiez ingin kongsikan dengan anda semua bagai mana cara nk buat Read More atau Baca Selanjutnya di Blog anda. tujuan kita buat read more adalah untuk menyikatkan post kita dimuka utama, dan meringgankan halaman utama post jika satu post anda tu sudah panjang, tentu sekali lambat untuk membuka halaman utama blog anda. untuk membuat read more senang sahaja ikut langkah-langkah ringkas seperti dibahwa :
1. Pergi keDashboard
2. Klik Layout
3. Klik Edit HTML
4. Klik Expand Widget Templates ( contohnya seperti gambar dibawah)
5. Cari Kod ]]></b:skin>
6. Salin Kod dibawah ini :
<script type='text/javascript'>
summary_noimg = 330;
summary_img = 285;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
/******************************************
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; border: 1px dotted #fff; height: 113px; width: 113px; margin-top: 10px; margin-right: 20px; "><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>
summary_noimg = 330;
summary_img = 285;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
/******************************************
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; border: 1px dotted #fff; height: 113px; width: 113px; margin-top: 10px; margin-right: 20px; "><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>
7. Paste Kod Kat atas ni di bawah code ]]></b:skin>
Langkah Yang terakhir
1. Cari Kod <data:post.body/>
2. Salin Kod dibawah :
<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'>-->Baca SelanjutNya...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<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'>-->Baca SelanjutNya...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
3. lepas anda Salin Kod diatas
4. gantikan kod yang anda cari td iaitu <data:post.body/> dengan kod diatas
5. Akhir Sekali Save Template
Dan Tengok Hasilnya.. Sila tinggalkan Comen anda Selepas mencuba toturial disini. Selamat Mencuba :)
slm,tutorial ini sememangnya mbantu...tq... t,utama kmi yg bru nak bjinak2 dgn blog...thanks alot
ReplyDeletesama2 segala ilmu bukannya datang bergolek drp langit, atau ilham sendir, semuanya dtg dripada bantuan Allah s.w.t.. insyallah segala ilmu yng ada sama2lah kita kongsi..
ReplyDeleteSALAM...tq tutorial mmg sngt2 mbantu...nie kak ura.mcm mne nak chat di blog apiez ek?.....
ReplyDeleteooo kak ura, babkpo tok sing in dengan akaun googel (akaun blog nilah, pasword dan emil blog kak ura bruleh tahu sapoo.. ingat sapo anonymous tu..
ReplyDeleteoo tu chat duk tepi tuh, klik jelah button kuning alik kanan tuh hok ada gambar robot yang ada tulisan "jom Chat".. klik tuh tubik ar chat box..
:b:
thx, n3 yg amat membantu..
ReplyDeletethx again
sama-sama shafaa :)
ReplyDeleteinfo yg sgt berguna..
ReplyDeletetengs eh ?
:)
thks siti ;p
ReplyDeletetrimas 4 the info
ReplyDelete