Blogger : เพิ่มปุ่ม กลับไปข้างบน Back To Top

สวัสดีคร้บ วันนี้ผมจะมาแนะนำการเพิ่มปุ่ม กลับไปข้างบนอีกแบบครับ หลังจากที่ได้แนะนำการทำปุ่มแบบนี้ไปแล้วครั้งหนึ่ง แต่วันนี้จะมาแนะนำอีกแบบครับ ซึงมีให้เลือกรูปแบบมากมายตามความชอบครับ อย่างที่รู้ๆกันครับ ว่าการทำปุ่มเลื่อนไปข้างบนอย่างรวดเร็วนั้นทำให้เกิดความสะดวกมากสำหรับผู้เข้าชมบล็อก สามารถกดปุ่มเดียวครั้งเดียว ไม่ต้องมาเลื่อนๆ ให้เสียเวลาครับ มันทำอย่างไรนั้น ง่ายนิดเดียวมาชมกันครับ
1.ไปที่บัญชี Blogger ของคุณ>> แผงควบคุม >> แม่แบบ >> แก้ไข HTML >> และคลิกขยายแม่แบบเทมเพลต ค้นหา code นี้ (Ctrl+f)

]]></b:skin>

2.เพิ่ม code ต่อไปนี้ ก่อน code ]]></b:skin>

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

3.ค้านหา code นี้

</body>

และเพิ่ม code ต่อไปนี้ก่อน code </body>

<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>  

***การแก้ไข ในส่วนของ Image-Url คือที่อยู่ของรูป ให้เปลี่ยนเป็น ตามด่านล่างนี้ หรือสามารถออกแบบงแล้วนำมาใช้ร่วมกันได้ครับ

แบบที่ 1




http://4.bp.blogspot.com/-xcI0i_4w7-c/T7yOysBWIGI/AAAAAAAAAqs/FZ5wYsz566I/s1600/back+to+top+1.png

แบบที่ 2



http://3.bp.blogspot.com/-t-sdf7QrCB8/T7yO3iJJVKI/AAAAAAAAArY/uRy8p5q7Rgk/s1600/up_arrow+copy.gif

แบบที่ 3
http://1.bp.blogspot.com/-Yi1QfAD9TtE/T7yO29GJRsI/AAAAAAAAArQ/YofyAYsNX8A/s1600/t%25E1%25BA%25A3i+xu%25E1%25BB%2591ng.jpg

แบบที่ 4
http://4.bp.blogspot.com/-ewm7bOKv7do/T7yOzXJp0SI/AAAAAAAAAqw/Q5kq9yIoaeo/s1600/back_to_top+%25281%2529.jpg

แบบที่ 5http://3.bp.blogspot.com/-TZ1oBrV2HLk/T7yO0HZtP3I/AAAAAAAAAq4/9ctGGY0BU5w/s1600/back_to_top.jpg

แบบที่ 6
http://4.bp.blogspot.com/-ZQ4bNM8qxic/T7yO2F98F6I/AAAAAAAAArI/oXOHxGUEaKg/s1600/top_up.png

แบบที่ 7

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBLoX54Mgw5hmvDldN5aguyaEmH4EW9O-WTTtvz9lEm7Xbkh1KYXX0KZdqOxJ_-ImvrXtn4XpYGW7sHyRzL8RHVQRB-jFpkqPCKswlKLbqSC0-QzmWA1dCzducNTKzqlIbdLome3ELnzwo/s1600/bttp-5.png

แบบที่ 8

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizUXU1GQhJvDcGBCiOVBRojt0PHaCR1pXaW1IrTYmCmrRGpqmPuSWBjNdhjG-r8JpGKk5YGCXTtkCW7F3agN1Cd1n7jO8A4dfBqq85ynHoFkWXUQDUyx-qhPQGMELV-hNcl-Ff639vn-3n/s1600/bttp-4.png

แบบที่ 9

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKhDxc8QUld56YuMYbNf-G3_aNNrSeHjwWEnsn0xL5GaNh8SulqMTISVNKcq3wk1BJ-0p1NkMthyWcWW0a8k-Zd9Ww8XCBWF7S8nIOwGZ8G7CuzcK9mH9vptDeHDefxq2B6gtRUU9yplfs/s1600/bttp-3.png

แบบที่ 10

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtoH-rZVHXRJq603UgiLFV8r5GB5JXJut9FtEbEfi5iTbOWDR_8VI_iC5OwFNpLWNGAGjOFVs3VtGOCkmCtsck5Vc_MWcnyWjjx9RmLXObk33BT4ysMJ1_903RDSRhbXGZJLLm8m-YSJlf/s1600/bttp-1.png

แบบที่ 11

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7PTK1xSRhxhnu3wqWqMbqNAL-9dgv5VK9_r_J4yJr3Dtirah-zj7iIDBZsSNMCz56cVZjwR0dhf_V963LUMz1tugWVAnIIDYOD2w5qKxW4kjhs9zPORtrKeqCTZj7zrv6lJnCn5bVmK9-/s1600/bttp-2.png

แบบที่ 12

http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png

แบบที่ 13

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifPfoUW7I8DjUz9PeAcqD6QDZuooXXC0NhWt5-JNj1-A1CJmSVuFqxlqokv9MReKCZoRzZq_1CS2E-u0e_k8C1Wk9ZxHMIBxZYgc_QDNWs4EikHfbWqUSlcvWp-52ZBTTX5hcuSg-pP17-/s400/20.png

แบบที่ 14

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgExiiGepYFV2uebQFL7NIb8Cd06r5Vx4i2-Iy1-psaSiuSL9orD7a7dflmci2_jNxrFVxf-ZzmtwUhcZtGZngbw2pBY4u1jFMpGgT8ymfb09HhyphenhyphenkFD00Vyff6FC9mJhU02qOHkimmsNePy/s400/bttp-19.png

แบบที่ 15

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjotMEX3FiNdBKNArnWgvfVTXGKHDdhGw4hOBg9iYal-eD2QOuoqe1kCFF-fd0bZyVdk4s1CN0RjvXuSpkKaUD6pWJX3MTlglCu5iodGlQcp4npN3-2Z69wBY0qTES-YeIKDRy1g7UryutN/s400/bttp-17.png

แบบที่ 16

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3q5fnfX73K_i3j4ovZsLtw8r062xgXcSWZJTRMdqN-y3fgRizfTTMMoZGLA1Ibu8jCqMxzWkBjePO0acG-J2Be-tg-vcIKDVn7ynOAjwyPFWgrKrZkfKEazSZ64qzKRnekLytPYtUxELn/s1600/bttp-16.png

แบบที่ 17

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9DxyRJ4zJ5g7dLrYh-vEx3dZFfs8patZu8lfoVuXgDHgFbqsxgX-DLd30mTBsIJAnhoY3cNKGb6Fbyrns91-2Y5Nmey3lCPJiGGSdqKFcDdSgkYZk2rXoaqjimBe0Jna9sLvgDESLT8fG/s400/bttp-15.png

แบบที่ 18

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzDujo_Rff919RUN93ZfC28OztEp0GJr4d9ULuKCxdJvTsBbHDEVAx8EH-ZIekCi3DC6g1p12CLQ4JpZ5yXHvDILd1TNtWpGoxrAxBefvSISZm0MK1kakT4umr7mxjIPU8tZfmVuRk6ycQ/s400/bttp-14.png

แบบที่ 19

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUcZJ1uEH0l1UEQGOC4RxRrID2V8lZnFPO_2NuwBWwnnQ3YIUYuh_oiDO1KW3aJqBpnveskQ4QAimEmh1iXNTInglXJCLR33eomcjBY9J5U4Je_OaAQ-SpqbE_h4qLBUti5t4BqEL7Zy7J/s400/bttp-13.png

แบบที่ 20

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGqFA3oqp7tZvhpa1wiuMniAz-A8MG5tS4vpO3KDSUmQ651wkjm9Av-5XfZv6x-Q0dRwwxalZVnf3LmiCBNWjXNrUxOS_U_MMcJbD7k1mA8j4-UhUe1zOJ3HFveTVskG84RrPoU9wFOHP9/s400/bttp-12.png

แบบที่ 21

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO5vg9212innQp91qKj8A3xy1LTVPFuVcd9mM4AzbrutsnTj5COmcearq3MXZVJuh0K2yS9C6Y3LiBAAUn_G-y_KbwarFRLwXU2nzcRo6M5xWk3zdSwioxlTRcQduU-4rT8clWhAfEgfI/s400/bttp-11.png

แบบที่ 22

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbMeGL9ViiP2Yyd9aWmKn3bdN1-StOX375luulYmHBzanS5yqkDN2ktImQscF-JpMNluorcgQYf4K1JwX7lJW04O342Gs7mPi9P0I8tUxhyZjoT-OBFdEeijpMjgy1tffMIBqcL8s5bkr2/

แบบที่ 23

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbMeGL9ViiP2Yyd9aWmKn3bdN1-StOX375luulYmHBzanS5yqkDN2ktImQscF-JpMNluorcgQYf4K1JwX7lJW04O342Gs7mPi9P0I8tUxhyZjoT-OBFdEeijpMjgy1tffMIBqcL8s5bkr2/

แบบที่ 24



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWatITAtKfi7KbjFuXsQdHEdYme0iT1KaR5b8p-S2JPW0o9NvQTZPOp6NSoSiaq8FLOKOtO92IX1Lsd_Im2CxypykdH0uaRBN6awtfx6khXbwCdOKdJ2YWd8SxB4h0lgqk3mER61qbDOSP/s400/bttp-9.png

แบบที่ 26

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq97YPB0C6ntX-YspAj7dS-qFHwZtSP7bnAuOpEXHQdT0cvHpZpSRRNq-9dUYqXuUceONCtYpdWsv6qO33vLyVSxegVcPDDaJiXTCCiO3bp_if3WA1Ta-SS2AuB59ihtSsd-cf6ORQzP5c/s400/bttp-8.png

เสร็จแล้วบันทึกดูบล็อกได้เลยครับ !!