วันอาทิตย์ที่ 2 มีนาคม พ.ศ. 2557
ตกแต่ง Blogger
ปรับแต่ง Blogger ให้โดนใจ ได้ง่ายๆ
วิธีการทำ Slideshow แบบงามๆ ด้วย jQuery ให้กับ Blogger
สวัสดีครับ ไม่ได้อัพบทความซะนานเลยผม ไม่รู้ว่าหายกันไปหมดหรือยัง วันนี้ผมมีลูกเล่นอีก 1 อย่างมานำ เสนอ ให้เพื่อนๆ ได้เอาไปใช้งานกัน นั้นก็คือ Slideshow ที่สร้างด้วย jQuery นั้นแหละครับ แต่ ! มันจะทำงานได้ก็ต่อเมื่อ เบราเซอร์ นั้นๆ รองรับ Javascript ด้วยนะครับ เอาหละครับ มาเรื่มกันเลยดีกว่า…
ก่อนอื่นเราต้องมาเตรียมเครื่องไม้เครื่องมือกันก่อนนะครับ เนื่องจากว่าต้องใช้สคริป 2 ตัวที่ชื่อ jquery.js และs3Slider. js มาใช้งานร่วมกันด้วยครับ ดาวน์โหลดได้ที่นี้ครับ >>คลิก<< หรือหากต้องการศึกษาหาข้อมูลเพิ่มเติมก็หาอ่านได้จากที่นี้เลยครับ >>คลิก<< เสร็จแล้วก็มาเริ่มลงมือในบล็อกของเรากันครับ
1.เริ่มแรก หลังจาก Login แล้ว ให้ไปที่ รูปแบบ -> แก้ไข HTML และติ๊ก Checkbox ที่ ขยายแม่แบบเครื่องมือ (แล้วอย่าลืม Backup ธีมเก่าไว้ก่อนนะครับ กันพลาด คลิกที่ ดาวน์โหลดแม่แบบฉบับเต็ม)
2.นำ Code ด้านล่างไปวางไว้ในตำแหน่งก่อนที่จะปิด Tag </head> นะครับ แล้วอย่าลืมแก้ตรงที่เป็นสีแดง ให้ชี้ไปยังต่ำแหน่งที่คุณเอาไฟล์ไปไว้ในโฮสนะครับ (หากใครไม่มีโฮสอ่านต่อด้านล่างนะครับ)
แ
2.1 สำหรับผู้ที่ไม่มีโฮสนะครับ ผมเห็นถามกันมาหลายคนจากบทความก่อนๆ หน้านี้ เราสามารถทำได้ง่ายๆ เลยนะครับ แต่ที่ไม่แนะนำ เพราะมันจะทำให้หน้า บล็อกของเราทำงานช้าครับ ถ้าให้ดีหาโฮสฟรีกมาใช้ก็ได้
วิธีทำสำหรับคนที่ไม่มีโฮสนะครับ ให้ทำการเปิดไฟล์ jquery.js และ s3Slider. js ด้วยอะไรก็ได้ครับ ตามถนัดเลย Notepad ก็ได้ แล้วทำการ Copy ข้อมูลทั้งหมดในนั้น *ทั้ง 2อัน มาวางทับตรงที่ผมเน้นสีแดงไว้ทั้งหมด ผมเน้นแล้วนะครับว่าสีแดงทั้งหมด ตาม Code ด้านล่างเลยนะครับ
<script type='text/javascript'> //<![CDATA[ /* Copy ข้อมูลทั้งหมดมาวางที่นี้นะครับ */ //]]> </script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { $('#slider1').s3Slider({ timeOut: 5000 }); }); //]]> </script>
3.ทำการเพิ่ม CSS เข้าไปในส่วนของ CSS นะครับ แทรกตรงไหนก็ได้ ตรงที่ผมเน้นสีแดงเอาไว้ จะเป็นขนาดของ ความกว้าง และ ความสูงที่จะให้แสดงนะครับ เราก็ทำการแก้ไขซะเอาขนาดตามขนาดที่เราต้องการ
#slider1 { width:525px; /* To be same as image width */ height:237px; /* To be same as image height */ position: relative; overflow: hidden; border:1px solid #eee; margin:0 auto; }
#slider1Content { width:525px; /* To be same as image width or wider */ position: absolute; top: 0; list-style:none; margin:0; padding:0; } .slider1Image { float: left; position: relative; display: none; } .slider1Image span { position: absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width:550px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; bottom:0; } .clear { clear: both; } .slider1Image span strong { font-size:14px; }
ตอนนี้เสร็จขั้นตอนในหน้าแก้ไข HTML แล้วครับ กด Save ได้เลยครับ แล้วไปต่อกันที่ องค์ประกอบของหน้า
4.มาที่ องค์ประกอบของหน้านะครับ แล้วเลือกเพิ่ม Gadget แบบ html/javascript ขึ้นมา 1อัน แล้วเอาวางไว้ด้านบน บทความบล็อก (หรือหากใครอยากไว้ตรงไหนก็ปรับแต่งตามใจชอบได้เลยครับ) แล้วนำ Code ด้านล่างนี้ไปวางนะครับ
<div id="slider1"> <ul id="slider1Content">
<li class="slider1Image"> <a href=' http://ลิ้งที่เราต้องการลิ้งไป '> <img alt="my image" src=" http://ลิ้งของรูปภาพที่ต้องการแสดง"/> </a> <span> <strong> Title ที่จะให้แสดง </strong> <br/> description ที่จะให้แสดง </span> </li>
<li class="slider1Image"> <a href=' http://ลิ้งที่เราต้องการลิ้งไป '> <img alt="some image" src=" http://ลิ้งของรูปภาพที่ต้องการแสดง"/> </a> <span> <strong> Title ที่จะให้แสดง </strong> <br/> description ที่จะให้แสดง </span> </li>
<div class="clear slider1Image"></div> </ul> </div>
*หมายเหตุ Code ด้านบนเป็นเพียงตัวอย่างการแสดงแบบ 2 ภาพนะครับหากต้องการมากกว่านี้ ก็เพิ่มได้ครับ และหากต้องการ ปรับแต่งการแสดงผลแบบว่า ให้ Title กับ คำอธิบาย แสดงจากด้านบน หรือ ทางด้านข้าง ก็สามารถทำได้นะครับ ท่านสามารถศึกษาได้จากไฟล์ ที่ได้ดาวน์โหลดไป หรือ ศึกษาเพิ่มเติม >>คลิกที่นี้<< ครับ
เขียนโดย Techin Noorak ที่ 00:16 ไม่มีความคิดเห็น:
ส่งอีเมลข้อมูลนี้
BlogThis!
แบ่งปันไปที่ Twitter
แบ่งปันไปที่ Facebook
แชร์ใน Pinterest
วันศุกร์ที่ 21 กุมภาพันธ์ พ.ศ. 2557
Google Earth
Google Earth
กูเกิล เอิร์ธ (Google Earth) เป็นซอฟต์แวร์ที่พัฒนาโดยบริษัทกูเกิล สำหรับการใช้เครื่องคอมพิวเตอร์ส่วนบุคคล หรือในโทรศัพท์มือถือ ดูภาพถ่ายทางอากาศพร้อมทั้งแผนที่ เส้นทาง และผังเมืองซ้อนทับลงในแผนที่ รวมทั้งระบบ จีไอเอส ในรูปแบบ 3 มิติ
กูเกิล เอิร์ธ ใช้ข้อมูลจาก ภาพถ่ายทางอากาศของ U.S. public domain และ ภาพถ่ายดาวเทียมของคีย์โฮล มาดัดแปลงร่วมกับ ระบบแผนที่ของกูเกิล จาก กูเกิลแมพ รวมทั้งการทำงานร่วมกับ กูเกิลโลคอล เพื่อค้นหารายชื่อร้าน เช่น ร้านขายของ ธนาคาร และปั๊มน้ำมันในแผนที่ได้ โดยนำแผนที่มาซ้อนทับลงบนตำแหน่งที่ต้องการ ตำแหน่งที่ต้องการค้นหา สามารถหาได้จาก บ้านเลขที่ ลองจิจูด ละติจูด ทั้งยังทำงานผ่านรูปแบบภาษาของ KML(Keyhole Markup Language)
ภาพตึกจำลอง 3 มิติ ที่มีลักษณะเป็นสีเทาในกูเกิล เอิร์ธ ได้รับลิขสิทธิ์ส่วนหนึ่งมาจาก ซอฟต์แวร์ของ แซนบอร์น (Sanborn) ในชื่อ ซิตีเซ็ทส์(CitySets) โดยรูปตึก 3 มิติในรูปแบบที่สมบูรณ์สามารถเรียกดูได้ผ่านทางซิตีเซ็ทส์
กูเกิล เอิร์ธ
(Google Earth)
Google Earth wordmark.png
ผู้พัฒนา กูเกิล
วันที่เปิดตัว 11 มิ.ย. 2001; 12 ปีก่อน
รุ่นล่าสุด 7.1.1.1888 / 12 กรกฎาคม พ.ศ. 2556; 224 วันก่อน
ระบบปฏิบัติการ
Windows 2000 and later
OS X
Linux
Android
iOS
Symbian
Blackberry Storm
ประเภท แผนที่, ภาพถ่ายดาวเทียม
ลิขสิทธิ์ ซอฟต์แวร์ลิขสิทธิ์
เว็บไซต์ กูเกิล เอิร์ธ
เขียนโดย Techin Noorak ที่ 06:55 ไม่มีความคิดเห็น:
ส่งอีเมลข้อมูลนี้
BlogThis!
แบ่งปันไปที่ Twitter
แบ่งปันไปที่ Facebook
แชร์ใน Pinterest
วันจันทร์ที่ 3 กุมภาพันธ์ พ.ศ. 2557
วิธีการติดตั้ง และ วิธีการใช้ Appserv
วิธีการติดตั้งโปรแกรม AppServ
เตรียมโปรแกรมเพื่อติดตั้ง
ดาวน์โหลดโปรแกรม AppServ จากเว็บไซต์ http://www.appservnetwork.com โดยเลือกเวอร์ชั่นที่ต้องการติดตั้งระหว่างเวอร์ชั่น 2.4.x และ 2.5.x
โดยความแตกต่างของ 2 เวอร์ชั่นนี้คือ
2.4.x คือเวอร์ชั่นที่นำ Package ที่มีความเสถียรเป็นหลัก เหมาะสำหรับผู้ที่ต้องการความมั่นคงของระบบ
โดยไม่ได้มุ่งเน้นที่จะใช้ฟังก์ชั่นใหม่
2.5.x คือเวอร์ชั่นที่นำ Package ใหม่ๆ นำมาใช้งานโดยเฉพาะ เหมาะสำหรับนักพัฒนาที่ต้องการระบบใหม่ๆ
หรือต้องการทดสอบ ทดลองใช้งานฟังก์ชั่นใหม่ ซึ่งอาจจะไม่ได้ความเสถียรของระบบได้ 100%
เนื่องจากว่า Package จากนักพัฒนานั้น ยังอยู่ในช่วงของขั้นทดสอบ ทดลองเพื่อหาข้อผิดพลาดอยู่
ขั้นตอนการติดตั้ง AppServ
1. ดับเบิ้ลคลิกไฟล์ appserv-win32-x.x.x.exe เพื่อทำการติดตั้ง จะปรากฏหน้าจอตามรูปที่ 1
ที่ 1 ขั้นตอนการติดตั้งโปรแกรม AppServ
2. เข้าสู่ขั้นตอนเงื่อนไขการใช้งานโปรแกรม โดยโปรแกรม AppServ ได้แจกจ่ายในรูปแบบ GNU License หากผู้ติดตั้ง
อ่านเงื่อนไขต่างๆ เสร็จสิ้นแล้ว หากยอมรับเงื่อนไขให้กด Next เพื่อเข้าสู่การติดตั้งในขั้นต่อไป แต่หากว่าไม่ยอมรับเงื่อนไข
ให้กด Cancel เพื่อออกจากการติดตั้งโปรแกรม AppServ ดังรูปตัวอย่างที่ 2
รูปที่ 2 แสดงรายละเอียดเงื่อนไขการ GNU License
3. เข้าสู่ขั้นตอนการเลือกปลายทางที่ต้องการติดตั้ง โดยค่าเริ่มต้นปลายทางที่ติดตั้งจะเป็น C:AppServ
หากต้องการเปลี่ยนปลายทางที่ติดตั้ง ให้กด Browse แล้วเลือกปลายทางที่ต้องการ ตามรูปที่ 3 เมื่อเลือกปลายทางเสร็จสิ้น
ให้กดปุ่ม Next เพื่อเข้าสู่ขั้นตอนการติดตั้งขั้นต่อไป
รูปที่ 3 เลือกปลายทางการติดตั้งโปรแกรม AppServ
4. เลือก Package Components ที่ต้องการติดตั้ง โดยค่าเริ่มต้นนั้นจะให้เลือกลงทุก Package แต่หากว่าผู้ใช้งาน
ต้องการเลือกลงเฉพาะบาง Package ก็สามารถเลือกตามข้อที่ต้องการออก โดยรายละเอียดแต่ละ Package มีดังนี้
- Apache HTTP Server คือ โปรแกรมที่ทำหน้าเป็น Web Server
- MySQL Database คือ โปรแกรมที่ทำหน้าเป็น Database Server
- PHP Hypertext Preprocessor คือ โปรแกรมที่ทำหน้าประมวลผลการทำงานของภาษา PHP
- phpMyAdmin คือ โปรแกรมที่ใช้ในการบริหารจัดการฐานข้อมูล MySQL ผ่านเว็บไซต์
เมื่อทำการเลือก Package ตามรูปที่ 4 เรียบร้อยแล้ว ให้กด Next เพื่อเข้าสู่ขั้นตอนการติดตั้งต่อไป
รูปที่ 4 เลือก Package Components ที่ต้องการติดตั้ง
5. กำหนดค่าคอนฟิกของ Apache Web Server มีอยู่ด้วยกันทั้งหมด 3 ส่วน ตามรูปที่ 5 คือ
Server Name คือช่องสำหรับป้อนข้อมูลชื่อ Web Server ของท่านเช่น www.appservnetwork.com
Admin Email คือช่องสำหรับป้อนข้อมูล อีเมล์ผู้ดูแลระบบ เช่น root@appservnetwork.com
HTTP Port คือช่องสำหรับระบุ Port ที่จะเรียกใช้งาน Apache Web Server โดยทั่วไปแล้ว Protocol
HTTP นั้นจะมีค่าหลักคือ 80 หากว่าท่านต้องการหลีกเลี่ยงการใช้ Port 80 ก็สามารถแก้ไขได้
หากมีการเปลี่ยนแปลง Port การเข้าใช้งาน Web Server แล้ว ทุกครั้งที่เรียกใช้งานเว็บไซต์
จำเป็นที่ต้องระบุหมายเลข Port ด้วย เช่น หากเลือกใช้ Port 99 ในการเข้าเว็บไซต์ทุกครั้งต้องใช้
http://www.appservnetwork.com:99 จึงจะสามารถเข้าใช้งานได้
รูปที่ 5 แสดงการกำหนดค่าคอนฟิกค่า Apache Web Server
6. กำหนดค่าคอนฟิกของ MySQL Database มีอยู่ด้วยกันทั้งหมด 3 ส่วน ตามรูปที่ 6 คือ Root Password คือช่องสำหรับป้อน รหัสผ่านการเข้าใช้งานฐานข้อมูลของ Root หรือผู้ดูแลระบบ ทุกครั้งที่เข้าใช้งานฐานข้อมูลในลักษณะที่เป็นผู้ดูแลระบบ ให้ระบุ user คือ root Character Setsใช้ในการกำหนดค่าระบบภาษาที่ใช้ในการจัดเก็บฐานข้อมูล, เรียงลำดับฐานข้อมูล,
Import ฐานข้อมูล, Export ฐานข้อมูล, ติดต่อฐานข้อมูล
Old Password หากท่านมีปัญหาเกี่ยวกับการใช้งาน PHP กับ MySQL API เวอร์ชั่นเก่า
โดยเจอ Error Client does not support authentication protocol requested by server;
consider upgrading MySQL clientให้เลือกในส่วนของ Old Password เพื่อหลีกเลี่ยงปัญหานี้
Enable InnoDB หากท่านต้องการใช้งานฐานข้อมูลในรูปแบบ InnoDB ให้เลือกในส่วนนี้ด้วย
รูปที่ 6 แสดงการกำหนดค่าคอนฟิกของ MySQL Database
7. สิ้นสุดขั้นตอนการติดตั้งโปรแกรม AppServ สำหรับขั้นตอนสุดท้ายนี้จะมีให้เลือกว่าต้องการสั่งให้มีการรัน Apache และ MySQL
ทันทีหรือไม่ จากนั้นกดปุ่ม Finish เพื่อเสร็จสิ้นการติดตั้งโปรแกรม AppServ
รูปที่ 7 แสดงหน้าจอขั้นตอนสิ้นสุดการติดตั้งโปรแกรม AppServ
สมัครสมาชิก:
ส่งความคิดเห็น (Atom)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น