การสร้างปุ่มไปที่บนสุดและล่างสุดของหน้า (Add Scroll to Top and Bottom Button)

ปุ่มไปที่บนสุดและล่างสุด (Scroll to Top and Bottom Button) ของหน้ามีไว้เพื่อความรวดเร็วของผู้เข้าชมเว็บ สามารถดูได้จากมุมขวาด้านล่างของบล็อกนี้ ขั้นตอนการทำมีดังนี้

ขั้นตอนที่ 1 ไปที่ รูปแบบ|แก้ไข HTML(Layout|edit HTML)

ขั้นตอนที่ 2 ค้นหาโค๊ด ]]></b:skin> หรือ </b:skin> แล้ววางโค๊ดต่อไปนี้ไว้ข้างบน

.gototop{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDu-hOCbyXcBoJI_pi28FrsHrFVR0hGnLojTB_Ivzfe7wvHx3hcO8Fw_J2VtFjaV4sLVWkElwmYt4ZjJHKowglxr5L_mfjgjYTac1YbWWqBWno7h55S4IABDGde7MeM5387vhbWpXAsLU3/)no-repeat;
display:block;_display:none;
position:fixed;
z-index:9999;
text-indent:-9999px;
width:17px;
height:17px;
overflow:hidden;
outline:none;
right:3px;
bottom:30px;}

.gotobottom {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOKr3BxYfKNAlLvOmuZVWu-sk2Vfft_0CZt0EOXM-7gdinI7srkJSUdQRwooLOd_IU2E2sKkFkJmYp1fw89QSr8PKZ-dSlcDR52E310OHlaYzT5frwiq5f_GbVQ76m25OhJzxsjqfEKXTM/)no-repeat;
width:17px;
height:17px;
display:block;
_display:none;
position:fixed; z-index:9999;
text-indent:-9999px;
overflow:hidden;
outline:none;
outline:none;
right:3px;
bottom:5px;
}

การปรับแต่ง

• โค๊ดสีแดงคือรูปภาพปุ่มลูกศรขึ้น/ลง ให้ Save ไว้ในที่ส่วนตัว หรือจะใช้เป็นรูปอื่น ๆ ก็ได้ตามความชอบ
• right:3px คือระยะห่างจากทางด้านขวาสุดของหน้า ถ้าต้องการให้ปุ่มอยู่ทางซ้ายของหน้าก็ให้เปลี่ยนเป็น left:3px
• bottom:30px; และ bottom:5px; คือตำแหน่งของปุ่มขึ้น/ลงที่ต้องการ เป็นระยะห่างจากล่างสุดของหน้า

TIPs

• ให้ใช้ปุ่ม "แสดงตัวอย่าง" ที่หน้าแก้ไข HTML เพื่อตั้งค่าตำแหน่งของลูกศรตามต้องการ ก่อนทำการบันทึกแม่แบบ
  

ขั้นตอนที่ 3 ค้นหาโค๊ด </body> แล้ววางโค๊ดต่อไปนี้ไว้ข้างบน

<a class='gototop' href='javascript:scroll(0,0)' title='Scroll to top of this page'>Top</a><a class='gotodown' href='#footer' title='Go to Bottom'>Bottom</a>

การปรับแต่ง

• สามารถเปลี่ยนตัวหนังสือ Scroll to top of this page และ Go to Bottom ได้ตามต้องการ อาจเปลี่ยนเป็น "ไปที่บนสุดของหน้า" และ "ไปที่ล่างสุดของหน้า" ก็ได้

ขั้นตอนที่ 4 ทำการบันทึกแม่แบบ