Page Navigation ใส่เลขกำกับหน้าบล็อก(V.2)


page navigation for blogger




จากบทความที่เคยสอนให้ใส่ Navigtion กำกับหน้าบล็อก  เมื่อวานนี้ Abu fahan ได้พัฒนาสคริปต์ ตัวใหม่ที่ทำให้ เลขกำกับหน้า สวยงามกว่าเดิม  ถ้าหากใครสนใจอยากมีเลขกำกับหน้าแบบนี้บ้างก็ดำเนินการตามขั้นตอนต่อไปนี้เลยครับ 






ขั้นที่ 1 ติดตั้ง CSS โค้ดเพื่อกำหนดหน้าตาของ Navigtion โดย
ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> คลิกขยายแม่แบบเครื่องมือ 

ใส่เลขหน้า bloggr   




ค้นหาโค้ด ]]></b:skin> แล้วเลือกวางโค้ดใดโค้ดหนึ่งต่อไปนี้ในตำแหน่งก่อนหน้าโค้ด ]]></b:skin> 




แบบที่ 1 

pagenavigation for blogspot  


.showpageArea { 
  font-family:verdana,arial,helvetica; 
  color: #000; 
  font-size:11px; 
  margin:10px; 
  } 
  .showpageArea a { 
  color: #000; 
  text-shadow:0 1px 2px #fff; 
    font-weight: 700; 
  } 
.showpageNum a { 
  padding: 3px 8px; 
  margin:0 4px; 
  text-decoration: none; 
  border:1px solid #999; 
  -webkit-border-radius:3px;-moz-border-radius:3px; 
  background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -50px repeat-x; 
  } 
.showpageNum a:hover { 
  border:1px solid #888; 
  background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -25px repeat-x; 
  } 
.showpageOf{ 
  margin:0 8px 0 0; 
  } 
.showpagePoint { 
  color:#fff; 
  text-shadow:0 1px 2px #333; 
  padding: 3px 8px; 
  margin: 2px; 
  font-weight: 700; 
  -webkit-border-radius:3px;-moz-border-radius:3px; 
  border:1px solid #999; 
  background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 0 repeat-x; 
  text-decoration: none; 
  }
#blog-pager,.blog-pager{height:30px;padding:5px 0 0 0;}
/* fixed error by Mr.hackublog*/






แบบที่ 2 




pagenav2 

.showpageArea { 
  font-family:verdana,arial,helvetica; 
  color: #000; 
  font-size:11px; 
  margin:10px; 
  } 
.showpageArea a { 
  color: #000; 
  text-shadow:0 1px 2px #fff; 
    font-weight: 700; 
  } 
.showpageNum a { 
  padding: 3px 8px; 
  margin:0 4px; 
  text-decoration: none; 
  border:1px solid #919106; 
  -webkit-border-radius:3px;-moz-border-radius:3px; 
  background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 -50px repeat-x; 
  } 
  .showpageNum a:hover { 
  border:1px solid #aeae0a; 
  background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 -25px repeat-x; 
  } 
.showpageOf{ 
  margin:0 8px 0 0; 
  }
#blog-pager,.blog-pager{height:30px;padding:5px 0 0 0;}
/* fixed error by Mr.hackublog*/


.showpagePoint { 
  color:#fff; 
  text-shadow:0 1px 2px #333; 
  padding: 3px 8px; 
  margin: 2px; 
  font-weight: 700; 
  -webkit-border-radius:3px;-moz-border-radius:3px; 
  border:1px solid #919106; 
  background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 0 repeat-x; 
  text-decoration: none; 
  }
#blog-pager,.blog-pager{height:30px;padding:5px 0 0 0;}
/* fixed error by Mr.hackublog*/






แบบที่ 3 


pagenav3 
.showpageArea { 
  font-family:verdana,arial,helvetica; 
  color: #000; 
  font-size:11px; 
  margin:10px; 
  } 
  .showpageArea a { 
  color: #fff; 
  } 
  .showpageNum a { 
  padding: 3px 8px; 
  margin:0 4px; 
  text-decoration: none; 
  background: #363636 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 -25px repeat-x; 
  } 
.showpageNum a:hover { 
  background: #044697 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 -50px repeat-x; 
  } 
.showpagePoint { 
  color:#fff; 
  padding: 3px 8px; 
  margin: 2px; 
  font-weight: 700; 
  background: #e30000 url(whttp://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 0 repeat-x; 
  text-decoration: none; 
  } 
.showpageOf{ 
  margin:0 8px 0 0; 
  }
#blog-pager,.blog-pager{height:30px;padding:5px 0 0 0;}
/* fixed error by Mr.hackublog*/




แบบที่ 4 
pagenav4  
.showpageArea { 
  font-family:verdana,arial,helvetica; 
  color: #000; 
  font-size:11px; 
  margin:10px; 
  } 
  .showpageArea a { 
  color: #fff; 
  } 
  .showpageNum a { 
  padding: 3px 4px; 
  margin:0 4px; 
  text-decoration: none; 
  border-top:2px solid #000; 
  border-left:1px solid #000; 
  border-right:1px solid #000; 
  border-bottom:1px solid #000; 
  background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 -25px repeat-x; 
  } 
  .showpageNum a:hover { 
  border-top:2px solid #999; 
  border-left:1px solid #999; 
  border-right:1px solid #999; 
  border-bottom:1px solid #999; 
  background: #999 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 -50px repeat-x; 
  } 
.showpagePoint { 
  color:#fff; 
  padding: 3px 8px; 
  margin: 2px; 
  font-weight: 700; 
  border-top:2px solid #000; 
  border-left:1px solid #000; 
  border-right:1px solid #000; 
  border-bottom:1px solid #000; 
  background: #000 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 0 repeat-x; 
  text-decoration: none; 
  } 
.showpageOf{ 
  margin:0 8px 0 0; 
  }
#blog-pager,.blog-pager{height:30px;padding:5px 0 0 0;}
/* fixed error by Mr.hackublog*/


แบบที่ 5 
pagenav5
.showpageArea { 
  font-family:verdana,arial,helvetica; 
  color: #000; 
  font-size:11px; 
  margin:10px; 
  } 
  .showpageArea a { 
  color: #fff; 
  } 
.showpageNum a { 
  padding: 3px 8px; 
  margin:0 4px; 
  text-decoration: none; 
  background: #333 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 -50px repeat-x; 
  } 
  .showpageNum a:hover { 
  background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 -25px repeat-x; 
  } 
.showpagePoint { 
  color:#fff; 
  padding: 3px 8px; 
  margin: 2px; 
  font-weight: 700; 
  background: #06a2b9 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 0 repeat-x; 
  text-decoration: none; 
  } 
.showpageOf{ 
  margin:0 8px 0 0; 
  }
#blog-pager,.blog-pager{height:30px;padding:5px 0 0 0;}
/* fixed error by Mr.hackublog*/




แบบที่ 6 
pagenav6



.showpageArea { 
  font-family:verdana,arial,helvetica; 
  color: #fff; 
  font-size:11px; 
  margin:10px; 
  padding:8px 20px; 
  background: #333; 
  } 
  .showpageArea a { 
  color: #fff; 
  } 
  .showpageNum a { 
  padding: 3px 8px; 
  margin:0 4px; 
  text-decoration: none; 
  background: #666; 
  } 
  .showpageNum a:hover { 
  background: #888; 
  } 
.showpagePoint { 
  color:#fff; 
  padding: 3px 8px; 
  margin: 2px; 
  font-weight: 700; 
  background: #da6100; 
  text-decoration: none; 
  } 
.showpageOf{ 
  margin:0 8px 0 0; 
  }
#blog-pager,.blog-pager{height:30px;padding:5px 0 0 0;}
/* fixed error by Mr.hackublog*/








ขั้นที่ 2 ต่อไปเป็นการเรียกใช้ Java script 
ให้ค้นหาโค้ด </body> แล้วแทนที่ด้วยโค้ด 

<script type='text/javascript'> 
var home_page=&quot;/&quot;; 
var urlactivepage=location.href; 
var postperpage=5; 
var numshowpage=4; 
var upPageWord ='Prev'; 
var downPageWord ='Next'; 
</script> 
<script src='http://hackublog.googlecode.com/files/pagenaviv202-min-EDIT-version.js' type='text/javascript'></script> 
</body>






ความหมาย 


var postperpage=5 หมายถึงแสดงบทความในแต่ละหน้า 5 บทความ (ปรับเปลี่ยนได้) 
var numshowpage=4; หมายถึงจำนวนของเลข navigation ที่จะให้แสดง (ไม่ปรับก็ได้ครับ) 






ขั้นที่ 3 ขั้นนี้เป็นการสั่งให้ป้ายกำกับแสดง 5 บทความเท่ากับ ขั้นที่ 2 ทำโดย 




ค้นหาโค้ด 'data:label.url' ซึ่งอาจพบหลายแห่ง ให้แทนที่ทุกแห่งด้วยโค้ด 
'data:label.url + &quot;?&amp;max-results=5&quot;'
จากนั้นทำการบันทึก Template ครับ




ขั้นที่ 4 ขั้นตอนสุดท้ายเราจะไปตั้งค่าให้หน้าแรกแสดง 5 บทความ โดยไปที่แผงควบคุม >>การตั้งค่า >> การจัดรูปแบบ 
แล้วตั้งค่าให้แสดงบทความในหน้าหลัก 5 บทความและบันทึกครับ 
pagenav002


ถ้าหากมีข้อสงสัยอย่างไรสอบถามที่กล่องความคิดเห็นด้านล่างได้เลยครับ และถ้าฝาก URL บล็อกของคุณไว้ด้วยก็จะช่วยเหลือกันได้ง่ายขึ้นครับ สวัสดีครับ

Leave a Comment

ไม่มีความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น ( Atom )
ขับเคลื่อนโดย Blogger.