2 วิธีในการสร้างปุ่ม Back to top (ใช้ และ ไม่ใช้ jQuery)

สวัสดีสมาชิกทุกท่านครับ ช่วงสัปดาห์ก่อนนี้งานยุ่งมาก ๆ ครับ จึงไม่ได้เขียนบทมความเลยประมาณ 2 สัปดาห์เห็นจะได้ แต่ตัวผมเองก็ยังไม่ได้ห่างหายไปไหนครับ ยังคงไว้ในจุดมุ่งหมายเดิมคือ ศึกษาเทคนิคการใช้งาน blogger และเผยแพร่ให้ผู้อื่นได้ทราบและเอาไปใช้ประโยชน์ เช่นเดิม

สอนสร้างblog


เข้าเรื่อง : โดยส่วนใหญ่แล้วเมื่อเราเขียนบทความที่มีรูปภาพมากๆ หรือบทความที่มีความยาวมาก ความยาวของหน้านั้น ๆ ก็จะมีความยาวมาก และเสียเวลาในการลาก Scroll bar เพื่อกลับขึ้นมาด้านบนของหน้า บทความนี้จึงเสนอ 2 เทคนิคในการสร้างปุ่ม Back to top เพื่อประหยัดเวลาในการเลื่อนหน้าบล็อก ทำให้ผู้อ่านกลับมาอ่านด้านบนของหน้าได้สะดวกขึ้น



วิธีติดตั้ง

วิธีที่ 1 วิธีนี้เป็นการใช้โค้ดอย่างง่าย ซึ่งเมื่อกดปุ่ม back to top ก็จะกลับขึ้นด้านบนอย่างทันทีทันใด ซึ่งสามารถติดตั้งได้ดังนี้

Log in เข้าไปที่ blogger >> ไปที่แผงควบคุม >> รูปแบบ >> องค์ประกอบของหน้า >> Add Gadget ชนิด HTML/จาวาสคริปต์

จากนั้นวางโค้ดต่อไปนี้ลงไป แล้ว ทำการบันทึกโดยไม่ต้องตั้งชื่อ Gadget นั้น ก็จบขั้นตอนการสร้างปุ่ม back to top ครับ

สอน blogger  


โค้ดอย่างง่าย

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src="http://upic.me/i/2d/hackublogbacktotop.gif"/></a>

หรืออาจจะเลือกใช้โค้ดที่มีการกำหนด style ต่อไปนี้ก็ได้

<style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src="http://upic.me/i/2d/hackublogbacktotop.gif"/></a></div>

หมายเหตุ คุณสามารถเปลี่ยนโค้ดรูปภาพเป็นรูปภาพของคุณเองได้โดย เปลี่ยน URL สีแดงในโค้ดข้างต้น







วิธีที่ 2 วิธีนี้เป็นการใช้ jQuery เข้าช่วยให้ปุ่ม back to top มี style มากขึ้น ซึ่งสามารถติดตั้งได้ดังนี้

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

2.1 ติดตั้ง java script โดย ค้นหาโค้ด </head> แล้ววางโค้ดต่อไปนี้ไว้ก่อนหน้าโค้ดดังกล่าว

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://hackublog.googlecode.com/files/gotop-withJqury1.3.2min.js' type='text/javascript'/>


จากนั้นก็บันทึกแม่แบบได้เลยครับ


2.2  ไปที่แผงควบคุมอีกครั้ง >> และไปที่ รูปแบบ >> องค์ประกอบของหน้า >> Add Gadget ชนิด HTML/จาวาสคริปต์

จากนั้นวางโค้ดต่อไปนี้ลงไป แล้ว ทำการบันทึกโดยไม่ต้องตั้งชื่อ Gadget นั้น ก็จบขั้นตอนครับ

สอนทำบล็อกของblogger


<a style="display:scroll;position:fixed;bottom:5px;right:5px;z-index:50;" href="#" onclick="MGJS.goTop();return false;" title="Back to Top"><img src="http://upic.me/i/z2/upbuttom.png"/></a>

เมื่อติดตั้งเสร็จเรียบร้อยแล้ว ผลลัพธ์ทีได้ก็จะเป็นเช่นเดียวกับบล็อกของผม

สอนทำบล็อก

หมายเหตุ 2 ตำแหน่งของปุ่มจะไม่ worked ใน IE6 ครับ (ซึ่งก็ช่างหัวมัน IE6)

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

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

  1. แล้วถ้าเกิดว่าจะใส่รูปภาพให้กับปุ่ม Back Home และก็ next แบบของอาจารย์ต้องทำไงคะ

  1. @Aliza Carter : ตามนี้ครับ
    http://www.hackublog.com/2009/09/back-forward-home.html

  1. เวลาเลื่อนขึ้นไปบนสุดแล้ว มีวิธีทำให้มันหายไปได้มั้ยครับ

  1. ขอบคุณค่ะ
    http://azon.biz/uuE

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

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

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