January 26, 2015January 26, 2015

วิธีทำให้ sidebar เลื่อนตามหน้าจอสำหรับหน้าเว็บที่มีความยาวมากๆ

Sticky Sidebar

วิธีทำให้ sidebar เลื่อนตามหน้าจอ

วิธีใช้ก็ง่ายมากครับ เราจะใช้ plugin ของ jquery ที่เรืยกว่า Sticky-kit โหลดได้จากที่นี่นะครับ

http://leafo.net/sticky-kit/#examples

Continue reading →

October 5, 2014November 22, 2014

อะไรคือ Responsive Web Design

Responsive Web Design คือ การออกแบบเพื่อให้เว็บไซต์สามารถแสดงผลได้เหมาะกับการใช้งาน smart phone หรือ หน้าจอคอมพิวเตอร์ทั่วไป (Desktop) โดยปกติแล้วเว็บไซต์ที่ไม่ได้ออกแบบมารองรับ Responsive Design เวลาที่ดูใน smart phone เราจะเห็นเว็บไซต์เป็นหน้าตาเต็มๆ หน้าและเห็นตัวอักษรแสดงเป็นตัวเล็กๆ ทำให้อ่านยาก เวลาที่เราต้องการอ่านจะต้องซูมเข้าไปเพื่ออ่านข้อความ Continue reading →

October 2, 2014

วิธีใส่ youtube แบบ auto play แล้วปิดเสียงได้ พร้อมกับเป็น responsive ในตัว

<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>

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 นะครับ ก็เลยต้องทำการโหลดโค้ดหลายตัวมาช่วยในการใช้งาน

http://www.youtube.com/v/<strong>I956LGgD7AQ</strong>&feature=plpp_play_all?enablejsapi=1&playerapiid=youtubePlayer&allowFullScreen=true&version=3&loop=1&autohide=1

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

July 12, 2014July 12, 2014

How to get thumbnail image from youtube vdo วิธีดึงรูปจากวีดีโอใน youtube

เราสามารถดึงรูปจากวีดีโอใน youtube ได้โดยปกติ youtube จะสร้างรูป ออกมาทั้งหมด 4 รูป

Code

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg

http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg

http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg

http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

Continue reading →

July 10, 2014November 22, 2014

การทำ Image Optimize โปรแกรมบีบอัพรูปภาพ เพื่อให้เว็บไซต์โหลดได้เร็วขึ้น

การทำ Image Optimize ส่วนประกอบหลักของเว็บไซต์คงหนีไม่พ้นรูปภาพแน่นอน เว็บไซต์ที่ดีจะต้องสามารถโหลดข้อมูลได้เร็วทันใจผู้ใช้

Image Optimize คืออะไร

Image Optimize คือ การบีบอัพรูปภาพให้ขนาดเล็กลงโดยที่ไม่ทำให้เสียความละเอียดของภาพมากเกินไป การทำ Image Optimize สามารถใช้โปรแกรมช่วยได้ ทำให้สามารถบีบอัพภาพได้ทีละหลายๆ ภาพในครังเดียว ข้อดีของการทำคือ ทำให้ขนาดรูปเล็กลงได้มากถึง 50% Continue reading →

July 7, 2014July 7, 2014

ความสำคัญของการทำ Google Page Speed Insights

เชื่อหลายคนที่ทำเว็บไซต์จะต้องเจอปัญหานี้แน่นอน คือ ปัญหาเรื่องความเร็วในการโหลดของเว็บไซต์ โดยเฉพาะเว็บที่มีการใช้รูปเยอะๆ จะทำให้โหลดเยอะนานมากวันนี้เลยจะมาพูดถึงการทำ speed test เพื่อเพิ่มความเร็วให้กับเว็บไซต์ของเรากันนะครับ

ทำไมถึงต้องทำ speed test ให้กับ web site?

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

google ชอบเว็บที่โหลดได้เร็ว การที่เว็บของเราโหลดเร็วขึ้นทำให้ติดหน้าค้นหาใน google ได้ดีขึ้น

Continue reading →

June 30, 2014June 30, 2014

การใส่ script เพื่อไม่ให้เว็บไซต์ สามารถคลิกขวาได้

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $(document).bind("contextmenu",function(e) {
           return false;
        });
    }); 
</script>