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 บล็อกของคุณไว้ด้วยก็จะช่วยเหลือกันได้ง่ายขึ้นครับ สวัสดีครับ

ตอนนี้มีความคิดเห็น : 26 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. อยากลบคำว่า "Widget by Abu-Farhan" อ่ะครับ

  1. ตอบคุณ Nokradius

    ให้เปลี่ยนสคริปต์บรรทัดนี้

    <script src='http://all-in-one-blogger-widget.googlecode.com/files/pagenaviv202-min.js'  type='text/javascript'></script>

    เป็น

    <script src='http://hackublog.googlecode.com/files/pagenaviv202-min-EDIT-version.js' type='text/javascript'/>

    แล้วจะสมหวังครับ

  1. ขอบคุณมากๆ ครับ
    ขอสมัครเป็นแฟนคลับบล็อคนี้ด้วยเลยล่ะกัน

  1. ขอบคุณที่ให้เกียรติ และยินดีเป็นอย่างยิ่งครับผม

  1. ไง บล็อกผมมันไม่ขึ้นเลย เป็นเพราะอะไร งง

  1. @เมฆสีเทา
    อ่านวิธีแก้ตามลิงก์ด้านล่างเลยครับ
    http://hackublog.blogspot.com/2010/04/blog-pager-blogger.html

  1. blog ของผมเห็นไม่เต็มอะครับไม่เห็นเส้นคอบบนล่างของกอบตัวเลขอะครับแก้ที่ไหนอะครับ

  1. @ คุณ Wanlop :
    ลองเลือกใช้แบบอื่นไปก่อนครับ ปัญหานี้หลายคนเป็น แต่บางคนก็ไม่เป็น ตอนนี้ยังแก้ไม่ได้ ลองใช้อันที่ปกติไปก่อนนะครับ หรือใช้รูปแบบอื่นๆ เช่น
    http://www.hackublog.com/2009/09/navigation.html
    หรือ
    http://www.hackublog.com/2010/04/slider-page-navigation-blogger-v3.html
    หรือ
    http://www.hackublog.com/2010/04/simple-page-navigation-for-blogger-v4.html

  1. ครับขอบคุณมากครับ
    ถ้าได้ไงบอกด้วยนะครับ

  1. บล็อกของผมลองใช้แบบที่ 1 ครับใส่แล้วไม่มีอะไรเกิดขึ้นเลยครับ

    ขอความกรุณาดูให้หน่อยครับ http://rukmovie.blogspot.com/ ขอบคุณครับ

  1. ขอบคุณมาก ๆ ครับ สำหรับทุกข้อมูลที่เป็นประโยชน์ต่อสังคมออนไลน์เราครับ
    http://www.makemoneyonlinetechnique.blogspot.com/

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. พอลองทำแล้วมันไม่ขึ้นนะครับ

  1. อ่อได้แล้วครับผม ขอบคุณมากครับสำหรับบทความดีๆมีประโยชน์

  1. กำหนดจำนวนหน้าไม่ได้ครับ ได้แต่หน้าหลักครับ

  1. ขอบคุณมากๆครับ สำหรับวิธีดีๆในการปรับปรุงบล็อค

  1. ทำไมผมทำแล้วไม่ขึ้นอะไรเลย ต้องทำอันแรกก่อนมั้ย

  1. พี่ชาย ของผมทำแล้วมันไม่ขึ้นนะครับ ช่วยที ดิ http://ulivegamepc.blogspot.com/ เข้ามาดูให้หน่อยคราฟ

  1. ขอบคุณมากๆครับ สำหรับวิธีดีๆในการปรับปรุงบล็อค

  1. พี่ชายครับ ผมทำตามทุกข้อเเล้วครับเเล้ว ไม่ขึ้น เลขกำกับหน้า ครับ บล๊อก http://powaruk.blogspot.com/ รบกวนผู้ชำนาญการตรวจสอบสักนาที สองนาทีครับ ขอบคุณครับ()
    ปล.บล๊อกรูปแบบใหม่นิดๆครับค่อนข้างสับสนเพราะมือใหม่

  1. http://babaload.blogspot.com/

    ทำแล้วไม่ขี้นอ่ะครับ แบบ 1 กับ 2

  1. ทำเเล้วไม่ขึ้นครับ http://news-meenkc.blogspot.com/ ทำเเบบที่หนึ่ง

  1. ผมหาไม่เจอ 'data:label.url' แต่จำได้ว่าเคยลบอาไรบางอย่างไป
    จำได้ตอนนั้น เอาพวก Powered by Blogger. ด้านล่างออก
    ไม่รู็ว่าเกียวป่าว

    แล้วมีวิธีแก้หลือป่าวครับ T^T

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. กำหนดแสดงบทความในแต่ละหน้าไม่ได้ครับ ได้แต่หน้าหลักครับ

  1. Pengen yang lebih seru ...
    Ayo kunjungi www.asianbet77.com
    Buktikan sendiri ..

    Real Play = Real Money

    - Bonus Promo Red Card pertandingan manapun .
    - Bonus Mixparlay .
    - Bonus Tangkasnet setiap hari .
    - New Produk Sabung Ayam ( minimal bet sangat ringan ) .
    - Referal 5 + 1 % ( seumur hidup ) .
    - Cash Back up to 10 % .
    - Bonus Royalty Rewards setiap bulan .

    untuk Informasi lebih jelasnya silahkan hubungi CS kami :
    - YM : op1_asianbet77@yahoo.com
    - EMAIL : asianbet77@yahoo.com
    - WHATSAPP : +63 905 213 7234
    - WECHAT : asianbet_77
    - SMS CENTER : +63 905 209 8162
    - PIN BB : 2B4BB06A / 28339A41

    Salam Admin ,
    http://asianbet77.com/

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel