Home » , , » Cara Membuat Page Number

Cara Membuat Page Number

Saturday, June 26, 2010


Salam. Malam nie mijie akan membuat tutorial tentang cara nak buat page number seperti yang anda lihat dibawah. Yang ni juga adalah permintaan daripada DJ ROCK. Nak buat nie agak mudah kerana ia tidak memerlukan untuk edit HTML. Ok ikut step dibawah.
Step 1: Login Dashboard => Design => Page Element => Add a Gadget => Pilih HTML/Javascript
Step 2: Copy code dibawah dan pastekan pada ruangan content.Pada ruangan title taip
<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=6;
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>


var pageCount=6 adalah bilangan post yang ingin dipaparkan.

Step 3 : Klik SAVE. Ok siap ..

Klik Sini Untuk Tutorial Lain

39 dah komen:

DJ ROCK 6/26/2010 10:37 PM  

dah try save,kat html tapi dia ckp
required fielod must not be blank

DJ ROCK 6/26/2010 10:38 PM  

dah try save,tapi dua kuar kat title ,required field must not be blank

DJ ROCK 6/26/2010 10:39 PM  

Required field must not be blank


Please correct the errors on this form.

Title
Required field must not be blank
Content

Mijie 6/26/2010 10:46 PM  

owh ye ke??..aik pelik2..emm jap mijie try..:)

ASSOYFINGER67 6/26/2010 11:00 PM  

Rajinnyer kao Mijie..!

* MissYaniAbdullah * 6/26/2010 11:05 PM  

awat Required field must not be blank
ala...

Mijie 6/26/2010 11:22 PM  

my.name.is.shashya :-

dah jadi ke..bgs2..:)

Mijie 6/26/2010 11:22 PM  

to ASOYFINGER67 :-

a'ah sekali sekali tolong membr..:)

Mijie 6/26/2010 11:23 PM  

to missYaniAbdullah..Owh ye ke??.ad jgk sesetengh yg jadi cm nie..jap mijie cari solution..:)

belalang hijau 6/27/2010 1:33 AM  

ape kebaikkan page number ni mijie?

Mijie 6/27/2010 2:00 AM  

to belalang hijau :-

kebaikkan nye utk memudahkan menyelak/mencari entry2 yg lama..klu xletak ni kene klik older post untuk entry sebelum..ssh sikit..

1 lagi boleh tgk dh berapa page yang telah ada kt blog kita nie..hehe..

dan yg ni pnting, nmpak kelainan sikit daripada blog org lain..hehe

NaNaJoe 6/27/2010 11:42 AM  

mijie makin byk tuto skrg!! bagus2~ :)

Mijie 6/27/2010 4:52 PM  

to NaNaJoe :-

emm bole lah sikit2 nana..apa yg mijie tau..mijie akan bt..:)

zulkbo 6/27/2010 8:44 PM  

salam mijie..
panjangnya html nya?
apapun terima kasih
berkongsi..berguna
satu hari nanti..

Mijie 6/27/2010 9:36 PM  

wsalam..a'ah kod ni agak pnjang sikit..gabung trus antara css n javascript..nnti try ar buat..:)

AJ 6/28/2010 10:26 AM  

solution untuk Required field must not be blank ialah taip kod ni kt title tu harap dpt membantu

AJ 6/28/2010 10:32 AM  

aik hilang plak hehe bekesan tak bleh trus tulis die akan hilang mula2 < kemudian sp dn ditutup > gabungkan k

Mijie 6/28/2010 3:48 PM  

to AJ :-

emm xpe..kt komen x leh tinggalkan kod..

thanks yer AJ.. tolong cari solution..akhirnya dpt jgk solution nye..:)

sebelum nie mijie mskkan title pstu pergi kt edit HTML n delete title 2 blik..

Norhayati Rostam 7/01/2010 11:42 AM  

agak2 bertambah berat tak blog?

Anonymous,  7/05/2010 8:54 AM  

cmner lak kite nk wat field yer???
nak link kn excel ngn database yg kite da create???

Mijie 7/05/2010 11:01 AM  

to Norhayati Rostam :-

kalu guna benda ni akan meringan kan blog coz kurang guna space..:)

Mijie 7/05/2010 11:06 AM  

to Anonymous :-

hah field??..sory anonymous. ni blogspot lah..mn blh buat. agipun database xleh nk buka. lain lah kalu sistem ke, joomla ke, bru boleh bt..hihi

MK Kimi 7/07/2010 12:46 PM  

thanks a lot..dlu ada wat kat template lm tp edit HTML..

bila tkr template bru xjd plak..

tq mijie bg cr mudah =]

Mijie 7/07/2010 1:06 PM  

to MK Kimi :-

welcome Kimi..a'ah cara ni lebih mudah sikit daripada cara lama yg perlu mskkan dlm edit HTML..:)

Lagenda 7/09/2010 11:15 AM  

salam..mak dah amik ilmu kat sini. Alhamdulillah menjadik! mak x terrer sgt bab2 html so slalunya buat x jadik..cara ni yg paling senang. Thankss...

Mijie 7/09/2010 1:01 PM  

@Lagenda

wsalam..welcome..emm..xpe..kongsi2 ilmu yg ada..:)

yastro 7/12/2010 8:43 PM  

Akhirnyaa, hari ni berjaya gak wat page nih...Thanks bro..

Mijie 7/13/2010 12:02 AM  

@yastro

tahniah2..welcome bro..;)

MK 8/11/2010 10:42 PM  

MIjie...nape xjadi balik ek?

adakah sebab tukar domain?

Mijie 8/12/2010 11:47 PM  

@MK

emm x psti plk..rsanya x kot..cuba try lagi..

CekLa 12/28/2010 11:36 AM  

macam mana nak tukar warna kotak dan style tulisan?

Mijie 12/29/2010 4:45 PM  

@CekLa

sory mijie x smpt nk try 1 1..tp cuba awk try letak font-family : Arial;(cnth je) dkt showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;

kalau background letak background-color: #ccccc;

kalau x jadi jgk..nnti ade ms mijie cuba buat..

H Y D E 2/11/2011 8:15 AM  

berjuta2 terima kasih yang tak terhingga.. pelik kenapa saya dah try banyak ikut tutorial blog2 luar x menjadi pun. blog malaysia juge yang terbaik..

Mijie 2/11/2011 12:16 PM  

@H Y D E

Terima kasih yer..;)

SyUhAdA 4/14/2011 6:18 PM  

aik?
nape xde pape pon?
huhu..

mykrk 5/24/2011 1:58 PM  

MasyaAllah, alhamdulillah. Tutorial yang mudah yang praktikal. Tahniah tuan!

JazLan 5/31/2011 1:13 PM  

jadi la bro.. tq

Post a Comment

Sila Tinggalkan komen korang kat sini yer..
InsyaAllah setiap komen dari korang aku akan blas..:)

DeSiGn By MiJiE BloG @ 2011. Powered by Blogger.