Sticky Sidebar
วิธีทำให้ sidebar เลื่อนตามหน้าจอ
วิธีใช้ก็ง่ายมากครับ เราจะใช้ plugin ของ jquery ที่เรืยกว่า Sticky-kit โหลดได้จากที่นี่นะครับ
วิธีทำให้ sidebar เลื่อนตามหน้าจอสำหรับหน้าเว็บที่มีความยาวมากๆ
jquery
วิธีใส่ youtube แบบ auto play แล้วปิดเสียงได้ พร้อมกับเป็น responsive ในตัว
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style>.embed-container { position: relative; padding-bottom: 47%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style> <div class='embed-container'><div id="youtubeNosound"></div></div> <script src="http://www.google.com/jsapi"></script> <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <script type="text/javascript"> google.load("swfobject", "2.1"); function onYouTubePlayerReady(playerId) { youtubePlayer = document.getElementById("myyoutubePlayer"); youtubePlayer.playVideo(); youtubePlayer.mute(); } var params = { allowScriptAccess: "always" }; var atts = { id: "myyoutubePlayer" }; swfobject.embedSWF("http://www.youtube.com/v/I956LGgD7AQ&feature=plpp_play_all?enablejsapi=1&playerapiid=youtubePlayer&allowFullScreen=true&version=3&loop=1&autohide=1", "youtubeNosound", "100%", "380", "8", null, null, params, atts) </script> |
สามารถก็อบปี้ตัวนี้ไปใส่ในเว็บได้เลยครับ โดยจะต้องเปลี่ยน code ตรงที่เป็นตัวหนาเป็นรหัสวีดีโอที่เราต้องการใส่ได้เลยนะครับ
โค้ดตัวนี้เป็นการดึง api ของ youtube แบบ jquery มาใช้ช่วยในการตั้งค่าอื่นๆ ที่ไม่มีทั่วไปในโค้ด embed ที่ใช้เว็บ youtube นะครับ ก็เลยต้องทำการโหลดโค้ดหลายตัวมาช่วยในการใช้งาน
|
1 |
http://www.youtube.com/v/<strong>I956LGgD7AQ</strong>&feature=plpp_play_all?enablejsapi=1&playerapiid=youtubePlayer&allowFullScreen=true&version=3&loop=1&autohide=1 |
ความสำคัญของการทำ Google Page Speed Insights
เชื่อหลายคนที่ทำเว็บไซต์จะต้องเจอปัญหานี้แน่นอน คือ ปัญหาเรื่องความเร็วในการโหลดของเว็บไซต์ โดยเฉพาะเว็บที่มีการใช้รูปเยอะๆ จะทำให้โหลดเยอะนานมากวันนี้เลยจะมาพูดถึงการทำ speed test เพื่อเพิ่มความเร็วให้กับเว็บไซต์ของเรากันนะครับ
ทำไมถึงต้องทำ speed test ให้กับ web site?
เพราะคนที่เข้าในเว็บไซต์ต้องการข้อมูลที่เค้าต้องการรวดเร็วที่สุด ลองคิดกันง่ายๆ ว่าเวลาเราหา ข้อมูลอะไรสักอย่างแล้วกดลิงค์ที่หาให้ google เข้าไปในหน้านั้นแล้ว พอรอโหลดสักห้าวินาที ถ้าข้อมูลไม่ขึ้น เราก็จะปิดหน้านั้นทิ้งไปแล้วหันไปลองลิงค์อื่นแทน การที่หน้าเว็บของเราโหลดช้าจะทำให้เราเสียโอกาศในการทำเสนอข้อมูลนั้นไปทันที
google ชอบเว็บที่โหลดได้เร็ว การที่เว็บของเราโหลดเร็วขึ้นทำให้ติดหน้าค้นหาใน google ได้ดีขึ้น
การใส่ script เพื่อไม่ให้เว็บไซต์ สามารถคลิกขวาได้
|
1 2 3 4 5 6 7 |
<script type="text/javascript" language="javascript"> $(document).ready(function() { $(document).bind("contextmenu",function(e) { return false; }); }); </script> |
คำสั่งให้เว็บไซต์คลิกขวาเซพรูปไม่ได้นะครับ
– คำสั่งนี้ให้ใส่ก่อน </header>
– ต้องใส่หลังจาก เรียกโค้ด jquery ตัวหลักแล้ว
