Dec 12, 2008

Halaman Mukasurat Pada Blog


Baru² ini ada seorang bloggers bertanya kepada penulis cara² untuk meletakkan halaman mukasurat pada blog. Maaf kerana penulis sudah terlupa siapa yang mengajukan soalan tersebut. Jadi, hari ini penulis akan tunjukkan cara yang paling mudah untuk meletakkan kod halaman mukasurat tersebut. peace


Sebenarnya widget ini mempunyai beberapa cara tetapi penulis memilih untuk berkongsi kod ini kerana pada anggapan penulis ia lebih mudah difahami berbanding cara² yang lain.
  • Login.
  • Pilih Layout - Page Elements.
  • Ambil Add a Gadjet - HTML / Javascript.
  • Kemudian, salin kod di bawah ini ke dalamnya.
<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>

  • Kemudian, anda alihkan Page Element tadi ke bahagian bawah Blog Posts anda.
  • Save template.
Nota : Anda boleh mengubah kod² berikut mengikut kehendak anda :-

var pageCount=5;
- Jumlah halaman mukasurat yang akan kelihatan.

var displayPageNum=3;
- Jumlah topik yang akan disenaraikan setiap kali halaman mukasurat diklik.

Selamat mencuba. Semoga berhasil. senyum

Via : Rias Techno

27 Comment

Anonymous

wow.. nice tutorial :D

Unknown Fri Dec 12, 10:03:00 AM

best ni..mesti cuba..

Krasz bAtu Fri Dec 12, 10:16:00 AM

thanks.. jenuh cari code ni .. atlast dpt
thanks sekali lagi..

iEn Fri Dec 12, 11:47:00 AM

smiley tu letak atas code <b:if cond='data:post.embedCommentForm'>

mkaw77 Fri Dec 12, 08:35:00 PM

Salam cikgu eriyza..
lama x mai kt sini.. dh berubah kaler rupe nyer!!
sy banyak baca tips yg eriyza bagi.. tpi biasa la nk buat takut ada side effect kt blog plak. letih oo klu nk repair balik..

Eriyza Fri Dec 12, 09:57:00 PM

Ien : Tq. :)

Mohd Kamal : Wsalam. Mekaseh sbb sudi baca. Seblum cuba sebarang tutorial, backup dolu template. Sy pun biasanya try and error gak. :)

Kamezaim Sun Dec 21, 07:35:00 PM

salam eryza.terima kasih atas tutorial ni..

Emma Tue Dec 23, 11:41:00 AM

xleh pun kat blog akak... hu hu.. sodih... :((

Eriyza Tue Dec 23, 06:15:00 PM

Precious Innocent : Kod tuh kena ikut dgn teliti. Cuba lagi ya. :)

Nashrul Hakimie(Ottel Blog) Fri Dec 26, 10:29:00 AM

oooo tq :-/

Eriyza Fri Dec 26, 10:50:00 AM

Kamezaim : Wsalam. Sama². :)

Letto : Sama². :D

@LiYaNNuaR ツ Sat Dec 27, 09:39:00 PM

baru aje cuba... thanks for sharing...

Eriyza Sat Dec 27, 10:24:00 PM

AliyaAnnuar : Sama². :)

thiamhai Sun Jan 04, 11:45:00 PM

thiamhai (www.thiamhai.blogspot.com)

saya sudah cuba, tapi tidak berjaya. mungkin ker saya sudah off saya punya subcribe : post atom, so, ia tak nampak/keluar??

Eriyza Mon Jan 05, 10:10:00 PM

Thiamhai : Saya tidak pasti adakah halaman mukasurat ini ada kena mengena dgn subscribe post. Cuba sekali lg ya. :)

qunia Thu Jan 08, 09:32:00 PM

thanks eryza. sy dah siap letak kat blog sy.

Eriyza Thu Jan 08, 10:29:00 PM

Qunia : Okey. Sama². :)

Azmil Ahud ® Mon Feb 09, 03:37:00 PM

Da....DA... Da dapat buat da, hehehe...thx miss :)

mie Thu Feb 12, 01:15:00 AM

thankz....
bagus la....
cepat dan mudah..

Eriyza Thu Feb 12, 11:57:00 AM

Zell : Tahniah. :)

Eriyza Thu Feb 12, 12:06:00 PM

Mie : Selamat mencuba. :D

♡ Eibu June's ♡ Wed Feb 18, 09:31:00 AM

salam eriyra..
tq tutorial tu...
ibu nk cuba buat..hehehe

Eriyza Wed Feb 18, 09:47:00 AM

Eibu June's : Selamat mencuba.

Unknown Sun Jul 26, 06:11:00 PM

dah try 2 kali tapi tak jadi jugak...kenape eh?

Eriyza Sun Jul 26, 07:38:00 PM

naDDy : Patutnya leh wat sbb benda ni senang je. Mungkin kod tak serasi dgn template. Cuba wat kat blog percubaan.

Cik Effie Sat Apr 03, 05:07:00 PM

nak tanya..yang pasal letak halaman muka surat nie boleh letak kat classic template tak ek?

Eriyza Sat Apr 03, 11:25:00 PM

afifahanwar love shazrin : Tak pasti pulak tp anda bleh cuba. Jgn lupa backup template dulu ye. :)

Post a Comment

Gunakan tatabahasa yang betul sewaktu menulis komentar agar mudah difahami oleh penulis. Terima kasih. :-)

Sila ambil perhatian perkara² berikut :-

1. Tinggalkan nama dan url blog atau laman web anda.
2. HTML tag seperti <b>, <i>, <a> boleh digunakan.
3. Sila berhemah di dalam berbahasa.