Simple Page Navigation for Blogger (V.4)

บทความนี้เป็นการนำเสนอ Page Navigation ของ blogger อีกชนิดหนึ่ง ที่ผมกล่าวถึงในตอนท้ายของบทความ วิธีสร้าง Slider Page Navigation บน Blogger (V.3) มาก่อนหน้านี้แล้ว  ซึ่งในที่นี้ผมจะเรียกว่า Simple Page Navigation

Page Navigation for blogger

Page Navigation ชนิดนี้มีข้อดีคือ

1. ติดตั้งง่าย ใช้พื้นที่น้อย
2. ผู้ใช้สามารถไปยังหน้าที่ต้องการได้ทันทีเพียงป้อนหมายเลขหน้าที่ต้องการลงไป
3. มีปุ่ม First ,Prev ,Next ,Last เพื่อให้กลับมายังหน้าแรกหรือไปยังหน้าสุดท้ายได้ตามต้องการ

ตัวอย่างของ Simple Page Navigation ดูได้จาก >> Simple Page Navigation DEMO


วิธีติดตั้ง
Log in blogger เข้าไปที่  >> ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ขยายแม่แบบเครื่องมือ

สอนทำบล็อก
ขั้นที่ 1 เป็นการติดตั้งโค้ดทั้งหมดของ Simple Page Navigation ซึ่งทำโดย

ค้นหาโค้ด <b:include name='nextprev'/>  แล้ววางโค้ดต่อไปนี้ไว้ถัดจากโค้ดดังกล่าว

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
/*Disable Old id Blogger Page*/
#blog-pager-newer-link,#blog-pager-older-link,#blog-pager {display: none;}
/*Blogpager Hacked by Hackublog*/
.blogpager ,.hackupage input{font-family:copperplate gothic light,Arial,tahoma;font-size:10px; color:#000000;}
.hackupage input {font-size:12px;}
a.blogpager{color:#484848;}
a.blogpager:hover { background:transparent; color:#fff;text-decoration:none;}
#vwg-pager-first, #vwg-pager-last, #vwg-pager-next, #vwg-pager-prev{ padding:2px 5px; border:1px #cccccc solid; font-weight:bold; margin:2px;}
#vwg-pager-first:hover, #vwg-pager-last:hover, #vwg-pager-next:hover, #vwg-pager-prev:hover{ padding:2px 5px; border:1px navy solid; background-color:#989898; color:#fff; font-weight:bold;}
</style>

<div class='hackupage' align='center'  style='margin:5px;'>
<form action='#' name='pager20'>
<span id='vwg-pager-first'/> <span id='vwg-pager-prev'/>
<input name='showingpage' onfocus='this.select()' size='4' title='Enter page number that You want to go' type='text' value='init...'/>/<input disabled='disabled' name='pagestotal' size='4' type='text' value='init...'/> <input onclick='checkpager()' type='button' value='Go'/>
<span id='vwg-pager-next'/> <span id='vwg-pager-last'/>
</form>
</div>
 
<script type='text/javascript'>
var blogID = &quot;xxxxxxxxxxxxxxxxxxx&quot;;
var home_page = &quot;http://ชื่อบล็อก.blogspot.com/&quot;;
var pager_max_main = 4; var pager_first_text = &quot;First&quot;;
var pager_last_text = &quot;Last&quot;;
var pager_prev_text = &quot; &#9668; Prev&quot;;
var pager_next_text = &quot;Next &#9658; &quot;;
</script>
<script src='http://hackublog.googlecode.com/files/blogger_pager_v20_min.js' type='text/javascript'/>
</b:if>


ขั้นที่ 2 วิธีปรับแต่งโค้ดในขั้นที่ 1 (ก่อนจะบันทึกแม่แบบ)

2.1 การปรับแต่ง CSS ดูแนวทางและองค์ประกอบต่าง ๆ ตามภาพด้านล่าง

สอน blogger และสอนเทคนิคการทำ blogspot 
2.2 การปรับแต่ง จาวาสคริปต์

► ค่าของ xxxxxxxxxxxxxxxxxxx ให้แทนด้วยหมายเลข blogID ของบล็อกของคุณ ซึ่งสามารถดูได้จาก Address bar เมื่อเปิดหน้า แก้ไข HTML หรือ ดูองค์ประกอบของหน้า ของ blogger

สอนสร้างบล็อก

► URL :  http://ชื่อบล็อก.blogspot.com/ ให้แก้เป็นชื่อบล็อกของคุณ
► ตัวเลข 4 นั้นหมายถึงในแต่ละหน้าจะแสดงบทความ 4 บทความ คุณสามารถปรับเพิ่มหรือลดได้ตามใจชอบ
► นอกจากนี้ข้อความ First ,Prev ,Next ,Last ยังสามารถปรับเปลี่ยนได้ตามใจชอบอีกด้วย ซึ่งจะปรับแต่งหรือไม่ก็ได้

เมื่อปรับแต่งโค้ดต่าง ๆ จนพอใจแล้วให้บันทึกแม่แบบ


ขั้นที่ 3 ตั้งค่าบทความที่แสดงในหน้าแรก
ถ้าเราต้องการให้แต่ละหน้าแสดงเพียง 4 บทความ ดังนั้นในหน้าแรกก็จะต้องแสดงเพียง 4 บทความด้วย คุณสามารถตั้งค่าได้โดย

ไปที่การตั้งค่า >>การจัดรูปแบบ >> แล้วตั้งค่าให้บทความที่แสดงในหน้าหลักเท่ากับ 4
(ในที่นี้ตั้งเป็น 4 เพราะโค้ดในขั้นที่ 1 ระบุไว้ 4 บทความ)

สอนแต่งบล็อก
เมื่อทำครบทั้ง 3 ขั้นตอนก็จบการติดตั้ง Simple Page Navigation แล้วครับ และเช่นเคยครับ  ถ้าหากคุณคิดว่าบทความนี้มีประโยชน์ก็อย่าลืม Submit หรือแบ่งปันให้เพื่อน ๆ คุณทราบด้วยนะครับ ขอบคุณครับ

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

  1. Nice to meet you my brother...^_^'
    Salom from Bandung blogger Indonesian, my first visit your blog and very interest performance your blog (full stylish)...
    Your article very usefully...thanks

  1. @Beben

    Hi Beben,Welcome to my blog.
    Your blog is a wheel on the most interesting.

  1. ตอนนี้จาวาสคริปต์ตัวเก่ามีปัญหาให้แก้โดยแทนที่โค้ด
    http://hackublog.googlecode.com/files/blogger_pager_v20_min.js
    ด้วย
    http://sites.google.com/site/hackublogscript/home/server/blogger_pager_v20_min.txt

  1. สวัสดีครับ

    คือผมลองแทนโด้ด ตามข้างบนแล้ว ปรากฎว่า
    เวลากดตัวอย่างดูก็ใช้ได้เลย แต่พอบันทึกแม่แบบแล้ว
    กลับเป็นแบบเดิมครับ คือ ไม่ว่าจะเป็นเลขหน้าต่างๆ กลายเป็น "..." หมดเลย

  1. @ น้ำค้างหยกเก้าบุปผา : ให้ดาวน์โหลดสคริปต์จากลิงค์
    http://sites.google.com/site/hackublogscript/home/server/blogger_pager_v20_min.txt
    จากนั้นให้ศึกษาบทความนี้ครับ
    http://www.hackublog.com/2010/10/javascript-hackublog.html

    เสร็จแล้วให้เอา URL ของจาวาสคริปต์มาแทนจาวาสคริปต์จาก Hackublog คุณจะได้จาวาสคริปต์ที่เป็นส่วนตัวและเรียกใช้เพียงคนเดียว ปัญหาที่เจอจะหมดไปครับผม

  1. โอ้...ขอบพระคุณมากครับ ทำได้แล้วครับ ^^

  1. ถ้าจะปรับ First ,Prev ,Next ,Last เป็นภาษาไทยแทนแก้ตรงไหนหรอครับ

  1. ทำตามทุกอย่างแก้เป็น http://sites.google.com/site/hackublogscript/home/server/blogger_pager_v20_min.txt
    แต่มันก็โหลดเปลียนหน้าไม่ได้ครับ ทั้งๆที่มันเคยได้นะครับ เว็บตัวอย่าง ที่ทำ www.fooddogcat.com

  1. ฝากติชมให้หน่อยครับว่าเปันไงบ้างบอกด้วยน๋ะจะได้เอาไปปับปุง นี่ครับเวับผม http://welovecashfiesta.blogspot.com/

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

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

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