Thursday, November 4, 2010

Tutorial 3 : Membuat Pages Pada BLOG

Salam semua!
Jom kita menambah widge untuk mencantikan lagi blog kita.
Hari ini saya mahu ajar cara-cara untuk meletakkan number muka surat bagi menggantikan Older Post atau Newer Post.
Order dan Newer post ini kadang-kadang menyusahkan pembaca untuk melihat page kita.
Saya sendiri pun susah untuk melihat page orang itu kalau page dia tak ada halaman muka surat.
Nak tahu tak macam mana yang saya katakana sebagai halaman muka surat. Adalah seperti ini dibawah blog saya.. yang ada page 1, 2, 3,4,5



Ramuan yang perlu di letak adalah seperti berikut

Login ke Blogspot .

Klik Layout > Add a Gadget Javascript / HTML

Copy kod di bawah dan Pastekan kedalamnya…

<style>
.showpageArea a {
text-decoration:underline;
}

.showpageNum a {
text-decoration:none;
border: 1px solid #bbb;
margin:0 3px;
padding:3px;
}

.showpageNum a:hover {
border: 1px solid #bbb;
background-color:#bbb;
}
.showpagePoint {
color:#fff;
text-decoration:none;
border: 1px solid #fff;
background: #000;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #bbb;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

</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 = 'Awal';
var endPageWord = 'Akhir';
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';



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://blogkomputers.blogspot.com">Grab this Widget ~ Navigasi Halaman</a></div>


Senangkan..tidak perlu bermain code html pada Design!

Selamat mencuba.
SHARE:

45 comments

  1. peni dah try buat tapi tak ulih pown

    ReplyDelete
  2. @Peni Anani

    peni kena letak widget ini di bawah sekali..kalau xjadi gtau fara

    ReplyDelete
  3. okeyh... akan di usahakan... hehe thanks yup fara....

    ReplyDelete
  4. @honeystar

    kenapa lak tak boleh? kena drag widget kat bawah sekali..

    ReplyDelete
  5. @Edura Hanum


    letakkan widget tu kat bawah sekali..test lagi..mybe ada coding x full

    ReplyDelete
  6. npe sy wt dia juz jd 2 page je ?

    ReplyDelete
  7. Hi Miss Farah,
    I Miss L3en a.k.a eFa, i tak bole wat la yg page number ni...mcm mana yer???

    ReplyDelete
  8. @L3en @ eFa

    dragkan widget itu ke bahagian footer...kalau xjadi mgkin ada code y tertinggal..tak jadi juga mungkin not suitable for your template

    ReplyDelete
  9. aku tak dapat buat la....aduiiii...tak faham aku nie...

    ReplyDelete
  10. kak farah cam na nak buat tutorial dlm nyer ada mcm kak farah...

    ReplyDelete
  11. PERHATIAN

    Saya dah update coding baru so boleh try

    ReplyDelete
  12. kak farah..apa nie,x jadi langsung pon..adduuh..

    ReplyDelete
  13. @SUFIANA1992

    Kenapa tak jadi?? akak testing boleh je? ???try again

    ReplyDelete
  14. amcm nk tukar warna utk no muka surat tue ek?

    ReplyDelete
  15. ok jadi. bahasa melayu ke. oke la..jnji ade. wah..mcm blog mahal.sila la dtg ye

    ReplyDelete
  16. kak farah x jadi pon.. dah letak kat bawah sekali dah..

    ReplyDelete
  17. tak jadii . please tolong , da lama carik tutorial nii . da try byk kali , still tak bole . da letak bawah sekali pun still same .

    ReplyDelete
  18. @Shahirah Adizan

    sebenarnya dah 3x update tutorial ni tapi ada yang jadi dan ada y tak jadi. Mungkin bgantung kepada template :)

    ReplyDelete
  19. memang bahasa melayu ke kak farah ??? bahasa inggeris takde ??

    ReplyDelete
  20. tima ksh kak...saye sekejap je da jadikk :D

    ReplyDelete
  21. waaaa!! jadi!! thanx awk!!! ummuaahhh :))

    ReplyDelete
  22. akak...napew saye buat tak napak pown..huhuhu

    ReplyDelete
  23. @♥Miss Farah♥

    terima kasih ya Cik Farah, hehehe, BLOG AWAK BANYAK MEMBANTU !!!!!!
    terima kasih sgt2,,

    betul tu,
    widget HTML ni kena letak d bawah POST, dlm reka letak....

    ReplyDelete
  24. Kak farah..cam ner nk buat ada cartoon cute di bawah komen tu??yang ada gambar princess di home,older and newer..ajar boleh??

    ReplyDelete
  25. salam kaak fara !!! cemaner nie .. tk leyh pown.. dh drag widget kt bwh.. tp tk leh lagi... cemane cemane ??!!!

    ReplyDelete
  26. thanks bab toturial.. tapi majoriti yang saya wat tak menjadi kenape ye???
    saya budak baru belajar blogger

    @aiyun idayu

    ReplyDelete
  27. visit me back

    http://ilamie2012.blogspot.com

    ReplyDelete
  28. thanks sis..tutorial u sgt berguna.. :)

    ReplyDelete
  29. hi sis thanks a lot..ur tutorial very help me.. :)

    ReplyDelete
  30. @♥Miss Farah♥nak tanya.ada tak tutorial yang boleh memadamkan by blogger yg kat bawah sekali tu..??tolong saya sis,semak betul kalau ada tu.:(

    ReplyDelete
  31. sis....sy dh buat lepas tu?????? mcm ne nk jdi kn mcm sis pye..:(

    ReplyDelete
  32. ..SAYA LETAK KAT ATAS PON SAMA JER ADE :) TERIMA KASIH KAK FARAH

    ReplyDelete
  33. waduh makasih bnget tipsnya gan,,,

    ReplyDelete
  34. mcm mana nak delete awal dan sebelumnya. kita nak bagi ada next and last je. tq farah

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH