มาแปะวิธีการ เมื่อกดติ้กช่อง checkbox แล้ว จะทำการส่งค่าไปยังอีกหน้า โดยที่ไม่ต้องไปกด ปุ่ม Submit ให้ยุ่งยากนะครับ **มีหลายวิธี แต่ผมชอบแบบง่ายๆ บรรทัดเดียว ** วิธีนี้จะส่งค่าแบบ GET นะครับ
<input type="checkbox" onclick="javascript:location='item.php?available=1';"> ดูเฉพาะสินค้าที่ยังไม่ได้ขาย
แค่นี้เองครับ เอามาแปะไว้ กันลืม
วันพฤหัสบดีที่ 17 พฤศจิกายน พ.ศ. 2559
เพิ่มขีดคั่น ใน textbox ในกรณีเป็นเบอร์โทรหรือบัตรประชาชน
เพิ่มขีดคั่น ใน textbox ในกรณีเป็นเบอร์โทรหรือบัตรประชาชน นะครับ ตัวอย่างเช่นเราสร้าง textbox มาเพื่อให้ผุ้ใช้กรอกเบอร์โทรตามพวกเว็บที่มีฟอร์มเอาไว้สมัครสมาชิกนะครับ โดยที่บทความนี้จะบอกวิธีโคตรง่ายในการสร้างสัญลักษณ์ "-" หรืออะไรก็แล้วแต่ตามที่เราอยากใส่ ไว้ใน ช่องเบอร์โทรนะครับ
ง่ายๆ ครับตามนี้เลย
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
ต่อมาตามด้วยนี่
<script type="text/javascript">
$(function() {
$.mask.definitions['~'] = "[+-]";
$("#date").mask("99/99/9999",{completed:function(){alert("completed!");}});
$("#phone").mask("999-999-9999",{placeholder:" "});
$("#phoneExt").mask("(999) 999-9999? x99999");
$("#iphone").mask("+33 999 999 999");
$("#tin").mask("99-9999999");
$("#personid").mask("9-9999-99999-99-9");
$("#product").mask("a*-999-a999", { placeholder: " " });
$("#eyescript").mask("~9.99 ~9.99 999");
$("#po").mask("PO: aaa-999-***");
$("#pct").mask("99%");
$("input").blur(function() {
$("#info").html("Unmasked value: " + $(this).mask());
}).dblclick(function() {
$(this).unmask();
});
});
</script>
ทีนี้ตอนเอามาใช้งานก็แบบนี้ครับ (ต้องมีไอ้ก้อนข้างบนอยู่เหนือก่อนบรรทัดที่เราใช้ด้วยนะ)
เบอร์โทร: <input type="text" id="phone" class="text" name="tel" />
 |
| เพิ่มสัญลักษณ์ขีดคั่นเบอร์โทร |
ง่ายๆ ครับตามนี้เลย
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
ต่อมาตามด้วยนี่
<script type="text/javascript">
$(function() {
$.mask.definitions['~'] = "[+-]";
$("#date").mask("99/99/9999",{completed:function(){alert("completed!");}});
$("#phone").mask("999-999-9999",{placeholder:" "});
$("#phoneExt").mask("(999) 999-9999? x99999");
$("#iphone").mask("+33 999 999 999");
$("#tin").mask("99-9999999");
$("#personid").mask("9-9999-99999-99-9");
$("#product").mask("a*-999-a999", { placeholder: " " });
$("#eyescript").mask("~9.99 ~9.99 999");
$("#po").mask("PO: aaa-999-***");
$("#pct").mask("99%");
$("input").blur(function() {
$("#info").html("Unmasked value: " + $(this).mask());
}).dblclick(function() {
$(this).unmask();
});
});
</script>
ทีนี้ตอนเอามาใช้งานก็แบบนี้ครับ (ต้องมีไอ้ก้อนข้างบนอยู่เหนือก่อนบรรทัดที่เราใช้ด้วยนะ)
เบอร์โทร: <input type="text" id="phone" class="text" name="tel" />
 |
| จะออกมาเป็นแบบนี้ครับ มีขีดคั่นให้ด้วย |
วันศุกร์ที่ 2 กันยายน พ.ศ. 2559
เซ็ตหน้า 404 ของเราเองใน windows server
วิธีการ Set หน้า 404 แบบ costume หรือแบบกำหนดเอง สำหรับเว็บไซต์ที่ใช้ Host แบบ Windows ครับ วิธีง่ายๆ ตามนี้ เปิดไฟล์ web.config ขึ้นมา แล้วใส่บรรทัดตามนี้ไปครับ
<system.webServer>
<httpErrors errorMode="Custom">
<remove statusCode="404" />
<error statusCode="404" path="/Error.aspx" responseMode="ExecuteURL" />
</httpErrors>
</system.webServer>
สำหรับใครที่ยังไม่เคยสร้างไฟล์ web.config ก็สร้างได้เลยครับ แบบเต็มๆ เขียนตามนี้
<?xml version="1.0"?>
<configuration>
<system.webServer>
<httpErrors>
<remove statusCode="401" subStatusCode="-1" />
<remove statusCode="403" subStatusCode="-1" />
<remove statusCode="404" subStatusCode="-1" />
<remove statusCode="500" subStatusCode="-1" />
<!-- full url when responsemode is Redirect -->
<error statusCode="401" path="http://foo.com/default.htm" responseMode="Redirect" />
<!-- local relative path when responsemode is ExecuteURL -->
<error statusCode="403" path="/errors/403.htm" responseMode="ExecuteURL" />
<error statusCode="404" path="/somedir/oops404.htm" responseMode="ExecuteURL" />
<error statusCode="500" path="/somedir/500.asp" responseMode="ExecuteURL" />
</httpErrors>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>
การเขียนแบบนี้ใช้ได้กับ error ดังต่อไปนี้ครับ
<system.webServer>
<httpErrors errorMode="Custom">
<remove statusCode="404" />
<error statusCode="404" path="/Error.aspx" responseMode="ExecuteURL" />
</httpErrors>
</system.webServer>
สำหรับใครที่ยังไม่เคยสร้างไฟล์ web.config ก็สร้างได้เลยครับ แบบเต็มๆ เขียนตามนี้
<?xml version="1.0"?>
<configuration>
<system.webServer>
<httpErrors>
<remove statusCode="401" subStatusCode="-1" />
<remove statusCode="403" subStatusCode="-1" />
<remove statusCode="404" subStatusCode="-1" />
<remove statusCode="500" subStatusCode="-1" />
<!-- full url when responsemode is Redirect -->
<error statusCode="401" path="http://foo.com/default.htm" responseMode="Redirect" />
<!-- local relative path when responsemode is ExecuteURL -->
<error statusCode="403" path="/errors/403.htm" responseMode="ExecuteURL" />
<error statusCode="404" path="/somedir/oops404.htm" responseMode="ExecuteURL" />
<error statusCode="500" path="/somedir/500.asp" responseMode="ExecuteURL" />
</httpErrors>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>
การเขียนแบบนี้ใช้ได้กับ error ดังต่อไปนี้ครับ
- 400 Error (bad request)
- 401 Error (unauthorized)
- 403 Error (forbidden)
- 404 Error (not found)
- 500 Error (internal server error)
ข้อสังเกต หากเราทำไฟล์ 404.html ไปไว้ใน path เดียวกับไฟล์ index นั้น อย่าลืมเติม "/" ก่อนชื่อไฟล์ด้วยนะครับเช่น
<error statusCode="404" path="/404.html" responseMode="ExecuteURL" />
อีกอย่างนึงคือ ต้องครอบด้วย อย่าลืมนะแจ๊ะ
- </httpErrors>
- </system.webServer>
- </configuration>
เพิ่มเติมกันลืม หากใครอยากจะ Redirict 301 นะครับ ทำตามนี้เลย
<location path="newcontact.php">
<system.webServer>
<httpRedirect enabled="true" destination="http://www.jumnum2go.com/contactus.html" httpResponseStatus="Permanent" />
</system.webServer>
</location>
ในตัวอย่างนี้จะเปลี่ยนหน้า newcontact.php ในเว็บให้เป็น contactus.html ครับ
วันพุธที่ 24 สิงหาคม พ.ศ. 2559
เรื่องเงินๆ ทองๆ บ้าง วันนี้ไปซื้อทองมา
วันนี้ว่าจะไปซื้อทอง ... มาสังเกตเห็นจริงๆ คือถ้าเป็นร้านทองเยาวราช หรือร้านทองฮั่วเซ่งเฮงนั้นเนี่ย คนแน่นอย่างกับร้านเค้ามีกิจกรรมแจกทองฟรีแน่ะครับ คิดในใจว่าจะแย่งกันทำไมฟะ ทองไม่ใช่ถูกๆ นะเว้ยเฮ้ย 555 ขากลับมาเลยมานั่งคิดนอนคิดว่า เออ ทำไมมันถึงขายดีจัง
ก็คงเป็นเพราะความน่าเชื่อถือละครับ ร้านที่ว่าทั้งสองร้านนั้น ล้วนแล้วแต่มีชื่อเสียงมาเป็นเวลานานตั้งแต่ผมยังไม่เกิดเลยด้วยซ้ำ อีกอย่างนึงคือเปอร์เซ็นต์ทองที่ครบถ้วนครับ น่าจะประมาณ 96.5% ได้ล่ะครับ สุดท้ายนี้ได้ความสบายใจครับ
เจอกระทู้นึงในบอร์ดดังตอบมาเองครับว่านี่เลย น่าจะได้คำตอบทั้งหมดแลัวล่ะครับ
สงสัยปีใหม่นี้ จะกลับบ้านนอกผมคงซื้อทองไปโชว์ใครไม่ได้แล่ะครับ แพงเกิน อาจจะจำเป็นต้องใช้บริการทองไมครอน หรือทองชุบไปก่อนครับ ใส่โชว์เฉยๆ น่าจะพอแก้ขัดได้ แต่อย่าให้จับดูนะเดี๋ยวความแตก ฮาๆ จบเพียงเท่านี้ครับเรื่องทองๆ เงินๆ เดี๋ยวยังไงขอตัวไปเก็บเงินต่อครับ ซื้อทองหมดตัวแล้วครับ ......
ก็คงเป็นเพราะความน่าเชื่อถือละครับ ร้านที่ว่าทั้งสองร้านนั้น ล้วนแล้วแต่มีชื่อเสียงมาเป็นเวลานานตั้งแต่ผมยังไม่เกิดเลยด้วยซ้ำ อีกอย่างนึงคือเปอร์เซ็นต์ทองที่ครบถ้วนครับ น่าจะประมาณ 96.5% ได้ล่ะครับ สุดท้ายนี้ได้ความสบายใจครับ
เจอกระทู้นึงในบอร์ดดังตอบมาเองครับว่านี่เลย น่าจะได้คำตอบทั้งหมดแลัวล่ะครับ
"ขอขอบคุณที่ท่านให้ความไว้วางใจจากทางร้านฮั่วเซ่งเฮงในการเลือกซื้อทองจากเราครับ ฮั่วเซ่งเฮงเติบโตมาได้จากความไว้วางใจและความน่าเชื่อถือของกลุ่มลูกค้าที่บอกต่อกันแบบปากต่อปากมาเป็นระยะเวลาหลายสิบปี ซึ่งเรามีความภาคภูมิใจและยึดถือความโปร่งใสและการบริการลูกค้าทุกรายให้ได้รับความสะดวกและพึงพอใจให้มากที่สุดครับ ทางบริษัท ได้มีแนวคิดในการให้บริการและพัฒนาธุรกิจให้ครบวงจรและได้มีการก่อตั้งโรงงานผลิตพร้อมช่างฝีมือเพื่อส่งทองรูปพรรณและทองในรูปแบบต่างๆ ส่งขายที่หน้าร้านของเราทั้ง 4 สาขาบนถนนเยาวราช สาขาห้างซีคอนแสควร์ศรีนครินทร์ และ สาขาใหม่ที่สีลมในตึกยูไนเต็ดเซ็นเตอร์ ดังนั้นลูกค้าที่ซื้อทองของฮั่วเซ่งเฮงจะได้รับสินค้าที่มีคุณภาพที่ผ่านการควบคุมทุกขั้นตอนในการผลิตอย่างพีถีพิถันทุกรายละเอียด และเป็นทองที่มีความบริสุทธิ์สูงและเป็นที่ยอมรับในตลาด ทางเราหวังว่าข้อมูลนี้จะเป็นประโยชน์ให้ท่านลูกค้า และหวังเป็นอย่างยิ่งว่าจะได้รับความไว้วางใจให้เราเป็นผู้จำหน่ายทองให้กับท่านในทุกๆโอกาส"มาบ่นเรื่องราคาทองกันบ้างครับ วันนี้ 24 สิงหาคม 2559 จากก่อนหน้านี้ คุณแม่ผมซื้อทองเส้นแรกให้ใส่เป็นของขวัญวันเกิด แม่เป็นแม่บ้านครับ ไม่ค่อยมีเงิน อุตส่าห์ซื้อให้ลูกทุบเงินเก็บที่หามาได้ ประมาณหมื่นกว่าบาทครับ ซื้อให้TT แต่ ณ ตอนนี้ราคาทองพี่แกพุ่งไปวันนี้เหนาะๆ แค่ 21,451.40 บาทเท่านั้นเองครับ (อ้างอิงราคาทองจากสมาคมค้าทองคำ) ซื้อมานี่แทบไม่กล้าใช้เลยกลัวน้ำหนักหายครับ 555
สงสัยปีใหม่นี้ จะกลับบ้านนอกผมคงซื้อทองไปโชว์ใครไม่ได้แล่ะครับ แพงเกิน อาจจะจำเป็นต้องใช้บริการทองไมครอน หรือทองชุบไปก่อนครับ ใส่โชว์เฉยๆ น่าจะพอแก้ขัดได้ แต่อย่าให้จับดูนะเดี๋ยวความแตก ฮาๆ จบเพียงเท่านี้ครับเรื่องทองๆ เงินๆ เดี๋ยวยังไงขอตัวไปเก็บเงินต่อครับ ซื้อทองหมดตัวแล้วครับ ......
วันจันทร์ที่ 22 สิงหาคม พ.ศ. 2559
วิธีดูspec cpu คราวๆ ดูได้ทุก windows ครับ
ใครยังดูไม่เป็น ลองดูครับ เข้าใจง่าย...
สำหรับพวกขี้เกียจโหลดขี้เกียจอ่าน
ง่ายๆ
1. เปิดคอม
2. คลิกขวาที่ mycomputer หรือ This PC หรือ คอมพิวเตอร์ของฉัน ฯลฯ
3. เลือก Properties หรือ คุณสมบัติ
แค่นี้เองครับ ดูบรรทัดที่เขียนว่า Processcer : Intel Core i3-3310M ...........................
Intel Core i3-3310M เรียกว่า "เสปก CPU ครับ"
จบ!
สำหรับพวกขี้เกียจโหลดขี้เกียจอ่าน
ง่ายๆ
1. เปิดคอม
2. คลิกขวาที่ mycomputer หรือ This PC หรือ คอมพิวเตอร์ของฉัน ฯลฯ
3. เลือก Properties หรือ คุณสมบัติ
แค่นี้เองครับ ดูบรรทัดที่เขียนว่า Processcer : Intel Core i3-3310M ...........................
Intel Core i3-3310M เรียกว่า "เสปก CPU ครับ"
จบ!
วันพุธที่ 6 กรกฎาคม พ.ศ. 2559
กำหนดการแคชในเบราว์เซอร์ แปะไว้กันลืม
พอดีได้ไปนั่งแก้ไขเว็บไซต์ รุ่นพระเจ้าเหามาที่เคยทำไว้ครับ เค้าบอกว่ามันช้า ผมเลยลองเอาเข้าไปเทสสปีดเว็บไซต์ดู ปรากฏว่า แม่เจ้า ได้แค่ 60/100 เองครับ สรุปให้อย่างแรก หลังจากทดสอบมานะครับ สิ่งที่ทำให้คะแนนมันต่ำเตี้ยเรี่ยดินขนาดนี้ก็คือ การไม่ได้แคชไฟล์รูปภาพในเว็บนะครับ วิธีการแก้ไขนะครับ
สำหรับคนที่ใช้โฮสแบบ Linux
ให้เข้าไปแก้ที่ .httaccess ครับโดยเพิ่มคำสั่งเหล่านี้ไปครับ
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
AddOutputFilter DEFLATE css js
ExpiresActive On
ExpiresByType application/x-javascript A2592000
**604800 คือหน่วยวินาทีครับ บวกลบคูณหารแล้วก็คือ เก็บไว้ 7 วันครับ
สำหรับคนที่ใช้ host แบบ window server
ให้เข้าไปแก้ไฟล์ web.config ครับ โดยเพิ่มตามนี้
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
</staticContent>
</system.webServer>
</configuration>
**7.00:00:00 หมายถึงเจ็ดวันครับ
ทำไมถึงต้องเจ็ดวัน ผมลองน้อยกว่านี้ page speed มันไม่ผ่านอ่ะครับ ผมเลยเข้าใจว่า มันคงให้เก็บแคชไว้น้อยสุด 7 วันครับ
ปล. ไฟล์ .htaccess หรือ web.config หากไม่มี เพิ่มเองได้เลยครับ วางไว้ที่ อยู่เดียวกับไฟล์ index หน้าแรกครับ
อันนี้คือพอแก้ไขเสร็จแล้วครับ
ว่างๆ เด๋วจะมาต่อเรื่อง css/js กับการบล๊อกเนื้อหาด้านบนนะครับ
สำหรับคนที่ใช้โฮสแบบ Linux
ให้เข้าไปแก้ที่ .httaccess ครับโดยเพิ่มคำสั่งเหล่านี้ไปครับ
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
AddOutputFilter DEFLATE css js
ExpiresActive On
ExpiresByType application/x-javascript A2592000
**604800 คือหน่วยวินาทีครับ บวกลบคูณหารแล้วก็คือ เก็บไว้ 7 วันครับ
สำหรับคนที่ใช้ host แบบ window server
ให้เข้าไปแก้ไฟล์ web.config ครับ โดยเพิ่มตามนี้
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
</staticContent>
</system.webServer>
</configuration>
**7.00:00:00 หมายถึงเจ็ดวันครับ
ทำไมถึงต้องเจ็ดวัน ผมลองน้อยกว่านี้ page speed มันไม่ผ่านอ่ะครับ ผมเลยเข้าใจว่า มันคงให้เก็บแคชไว้น้อยสุด 7 วันครับ
ปล. ไฟล์ .htaccess หรือ web.config หากไม่มี เพิ่มเองได้เลยครับ วางไว้ที่ อยู่เดียวกับไฟล์ index หน้าแรกครับ
อันนี้คือพอแก้ไขเสร็จแล้วครับ
 |
| พอแก้เรื่อง cache แล้วความเร็วก็พุ่งประมาณนี้ล่ะครับ จาก60/100 |
ว่างๆ เด๋วจะมาต่อเรื่อง css/js กับการบล๊อกเนื้อหาด้านบนนะครับ
วันอาทิตย์ที่ 26 มิถุนายน พ.ศ. 2559
ทำปุ่มลูกศรด้านล่างเว็บ เพื่อไปยังด้านบนสุดของเพจ (back-to-top button)
เคยเจอไหมครับ เวลาเราเข้าเว็บไปแล้วเลื่อนอ่านลงไปสักพัก แล้วจะมีปุ่ม เขียนประมาณว่า "กลับไปบนสุด" หรือเป็นรูปลูกศรชี้ขึ้น ในที่นี้เรียกว่าปุ่ม back to top ก็แล้วกันครับ ใครอยากหาวิธีทำเพิ่มเติม แนะนำให้ Search google คำนี้เลยครับ back to top button
ส่วนบทความนี้อีกเช่นเคย แปะไว้กันลืม การทำปุ่ม back to top ครับ
เริ่มจากเราต้องแอด jquery.min.js มาก่อนครับในtag <header>
** jquery.min.js ไปหาโหลดเอาเองได้ทั่วไปนะครับ หรือจะใส่ลิงค์จากต้นทางอื่นๆ ก็ได้นะครับ **
<header>
.
.
<script src="jquery.min.js"></script>
</header>
ขั้นต่อมาให้ใส่โค๊ดตามนี้
<script type='text/javascript'>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$('#scroll').fadeIn();
} else {
$('#scroll').fadeOut();
}
});
$('#scroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
<a href="javascript:void(0);" id="scroll" title="กลับไปบนสุด" style="display: none;">Top<span></span></a>
<script>
var amountScrolled = 300;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
});
</script>
และให้ใส่ใน css ตามนี้
#scroll {
position:fixed;
right:10px;
bottom:10px;
cursor:pointer;
width:50px;
height:50px;
background-color:#3498db;
text-indent:-9999px;
display:none;
-webkit-border-radius:60px;
-moz-border-radius:60px;
border-radius:60px
}
#scroll span {
position:absolute;
top:50%;
left:50%;
margin-left:-8px;
margin-top:-12px;
height:0;
width:0;
border:8px solid transparent;
border-bottom-color:#ffffff;
}
#scroll:hover {
background-color:#e74c3c;
opacity:1;filter:"alpha(opacity=100)";
-ms-filter:"alpha(opacity=100)";
}
 |
| ภาพปุ่ม back-to-top อยู่มุมขวาล่าง |
แค่นี้ครับ โดยที่ตัวอักษรสีแดง หมายถึง ถ้าเลื่อนลงไปกี่พิกเซล ปุ่มถึงจะโผล่มา กำหนดเองได้เลยครับ
ส่วนตัว css นั้นก็กำหนดสีสันของปุ่มได้ครับ แล้วแต่เลยครับ จบฮะ
วันอาทิตย์ที่ 19 มิถุนายน พ.ศ. 2559
ปรับขนาดความกว้างของ facebook like box ให้เป็น responsive
หลายท่านคงเคยทำเว็บแล้วใส่ไอ้เจ้า facebok like box ลงไป หน้าตามันก็ประมาณนี้ครับ
ซึ่งเป็นตัวที่ทำให้ผู้เข้าเว็บสามารถเห็น ช่องทางการเชื่อมต่อ Social media ของเว็บเราได้ครับ โค๊ดที่ทาง Facebook ใส่ให้มาก็ประมาณนี้ครับ
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/jumnum2go" data-width="400" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false" ></div>
ซึ่งสามารถกำหนดขนาดความกว้างของกรอบ like box ได้ตรงนี้ data-width="400" จะใส่เท่าไร ก็ว่ากันไปครับ แต่พอเราจะมาทำความกว้างให้เป็น % หรือทำให้มันเข้ากับเว็บที่รองรับ Mobile Responsive ไอ้จะใส่ไปตรงๆ แบบ data-width="100%" ผมลองแล้วครับไม่ได้ผล ไอ้ที่ได้ผลคือต้องใส่แบบนี้ครับ
<style>
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { max-width: 100% !important; }
</style>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/jumnum2go" data-width="400" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false" ></div>
ใส่ไอ้ที่ผม hightlight สีแดงไว้ก่อนโค๊ด Facebook like box เข้าไป แค่นี้มันก็ยืดหดได้ตามใจแล้วครับ
ซึ่งหากใครสนใจเอาโค๊ด like box แบบนี้มาใส่ในเว็บนั้น ให้เข้าไปที่นี่ได้เลยครับ Facebook Page Plugin
 |
| หน้าตาของ ไอ้เจ้าFacebook like Box |
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/jumnum2go" data-width="400" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false" ></div>
ซึ่งสามารถกำหนดขนาดความกว้างของกรอบ like box ได้ตรงนี้ data-width="400" จะใส่เท่าไร ก็ว่ากันไปครับ แต่พอเราจะมาทำความกว้างให้เป็น % หรือทำให้มันเข้ากับเว็บที่รองรับ Mobile Responsive ไอ้จะใส่ไปตรงๆ แบบ data-width="100%" ผมลองแล้วครับไม่ได้ผล ไอ้ที่ได้ผลคือต้องใส่แบบนี้ครับ
<style>
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { max-width: 100% !important; }
</style>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/jumnum2go" data-width="400" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false" ></div>
ใส่ไอ้ที่ผม hightlight สีแดงไว้ก่อนโค๊ด Facebook like box เข้าไป แค่นี้มันก็ยืดหดได้ตามใจแล้วครับ
ซึ่งหากใครสนใจเอาโค๊ด like box แบบนี้มาใส่ในเว็บนั้น ให้เข้าไปที่นี่ได้เลยครับ Facebook Page Plugin
วันเสาร์ที่ 11 มิถุนายน พ.ศ. 2559
การ Redirect 301 จาก abc.com เป็น www.abc.com
วันนี้จะมาเขียนกันลืมเก็บไว้เกี่ยวกับการ Redirect 301 ของเว็บไซต์ แบบ non-www ไปเป็นแบบ www
แล้วไอ้คำว่า Redirect301 นั้นก็หมายถึงจะนำค่าลิงค์ หรือ backlink ต่างๆ ของเรื่อง seo มั้ง (ผม seo แบบงูๆ ปลาๆ หน่ะ ไม่รู้จะอธิบายยังไง) ทำเว็บใหม่ทีไร มันจะเป็ดหน้าเว็บได้ 2 version ครับ
จริงๆ แล้ว เซิจเอนจิน บางตัวมันมองไปเป็นคนละเว็บเลยนะครับ (แต่กระจอกมากสำหรับพี่ Google ครับ) แต่ทำเถอะครับไม่เสียหายง่ายๆ เลย
วิธีแก้ให้มันวิ่งไปที่หน้าแบบมี www อย่างเดียวทั้งเว็บมีแค่สองบรรทัดเท่านั้นเองครับ
ลองแก้ตามดู
1. เข้าไปที่ ftp ของเว็บ หาไฟล์ .htaccess (ส่วนใหญ่อยู่ path เดียวกับ index)
2. เปิดไฟล์เพื่อแก้ไข
3. เพิ่มตามด้านล่างเลยครับ
RewriteCond %{http_host} ^fashion2lady\.com$ [NC]
RewriteRule ^(.*)$ http://www.fashion2lady.com/$1 [R=301,L]
ตัวอักษรสีแดงก็คือชื่อเว็บของเราที่ต้องการเปลี่ยนครับ
และอีกอย่างนึงคือ หากให้หน้า fashion2lady.com/index.php เปลี่ยนเป็น www.fashion2lady.com/ เพื่อกันการ Duplicate ข้อมูลกันเองภายในเว็บไซต์ ให้เพิ่มไอ้นี่ไปอีกบรรทัดครับ
RewriteRule ^index.php$ http://www.fashion2lady.com/ [R=301,L]
จบแล้วครับ สุดท้ายนี้
หากเราพิมพ์ fashion2lady.com ลงไป มันก็จะกลายเป็น www.fashion2lady ในช่อง address ทันทีครับ
แล้วไอ้คำว่า Redirect301 นั้นก็หมายถึงจะนำค่าลิงค์ หรือ backlink ต่างๆ ของเรื่อง seo มั้ง (ผม seo แบบงูๆ ปลาๆ หน่ะ ไม่รู้จะอธิบายยังไง) ทำเว็บใหม่ทีไร มันจะเป็ดหน้าเว็บได้ 2 version ครับ
- fashion2lady.com
- www.fashion2lady.com
 |
| เข้าเว็บแบบ non-www |
 |
| เข้าเว็บแบบ www |
จริงๆ แล้ว เซิจเอนจิน บางตัวมันมองไปเป็นคนละเว็บเลยนะครับ (แต่กระจอกมากสำหรับพี่ Google ครับ) แต่ทำเถอะครับไม่เสียหายง่ายๆ เลย
วิธีแก้ให้มันวิ่งไปที่หน้าแบบมี www อย่างเดียวทั้งเว็บมีแค่สองบรรทัดเท่านั้นเองครับ
ลองแก้ตามดู
1. เข้าไปที่ ftp ของเว็บ หาไฟล์ .htaccess (ส่วนใหญ่อยู่ path เดียวกับ index)
2. เปิดไฟล์เพื่อแก้ไข
3. เพิ่มตามด้านล่างเลยครับ
RewriteCond %{http_host} ^fashion2lady\.com$ [NC]
RewriteRule ^(.*)$ http://www.fashion2lady.com/$1 [R=301,L]
ตัวอักษรสีแดงก็คือชื่อเว็บของเราที่ต้องการเปลี่ยนครับ
และอีกอย่างนึงคือ หากให้หน้า fashion2lady.com/index.php เปลี่ยนเป็น www.fashion2lady.com/ เพื่อกันการ Duplicate ข้อมูลกันเองภายในเว็บไซต์ ให้เพิ่มไอ้นี่ไปอีกบรรทัดครับ
RewriteRule ^index.php$ http://www.fashion2lady.com/ [R=301,L]
จบแล้วครับ สุดท้ายนี้
หากเราพิมพ์ fashion2lady.com ลงไป มันก็จะกลายเป็น www.fashion2lady ในช่อง address ทันทีครับ
วันพฤหัสบดีที่ 9 มิถุนายน พ.ศ. 2559
จัดภาพให้กึ่งกลาง ง่ายๆ แต่ปวดกบาลครับ
ตามหัวข้อเลยครับ วันก่อนลองทำเว็บนึงดู ปรากฏว่า ต้องจัดภาพ <img> ให้อยู่กึ่งกลาง <div> ก็ไม่มีอะไรมากครับ จัดไปเลยลวกจิ้มเลยครับ
<div style="text-align:center;height:555px;">
<img src="picture.jpg" />
</div>
มันก็กึ่งกลางนะครับ แต่เจ้ากรรม รอบนี้มันดันมีความสูงเข้ามาเกี่ยวข้องด้วยครับ ทำไงดีวะเนี่ย (height:555px;) มันกึ่งกลางแค่ซ้าย-ขวา แต่บน-ล่างมันดันไม่กึ่งกลางครับ ผมก็เลยไปหาวิธีมามากมาย หลายๆ เว็บ คือที่ต้องบอกว่ามากมายเพราะ ผมชอบโค๊ดอะไรที่มันง่ายๆ บรรทัดน้อยๆ อย่างว่าละครับ ขี้เกียจแถมความจำสั้นอีกต่างหาก เลยเอามาแปะไว้หน่อยกันลืม สำหรับคนที่ต้องการจะให้รูปภาพมันอยู่ตรงกลาง ทั้งบนล่างซ้ายขวาครับ แล้วจะบอกว่าวิธีนี้ใช้งานได้กับงานเว็บไซต์แบบ mobile responsive ที่สามารถยดหดก็ยังกึ่งกลางได้ครับ
<div style="text-align:center;height:555px;">
<img src="picture.jpg" />
</div>
มันก็กึ่งกลางนะครับ แต่เจ้ากรรม รอบนี้มันดันมีความสูงเข้ามาเกี่ยวข้องด้วยครับ ทำไงดีวะเนี่ย (height:555px;) มันกึ่งกลางแค่ซ้าย-ขวา แต่บน-ล่างมันดันไม่กึ่งกลางครับ ผมก็เลยไปหาวิธีมามากมาย หลายๆ เว็บ คือที่ต้องบอกว่ามากมายเพราะ ผมชอบโค๊ดอะไรที่มันง่ายๆ บรรทัดน้อยๆ อย่างว่าละครับ ขี้เกียจแถมความจำสั้นอีกต่างหาก เลยเอามาแปะไว้หน่อยกันลืม สำหรับคนที่ต้องการจะให้รูปภาพมันอยู่ตรงกลาง ทั้งบนล่างซ้ายขวาครับ แล้วจะบอกว่าวิธีนี้ใช้งานได้กับงานเว็บไซต์แบบ mobile responsive ที่สามารถยดหดก็ยังกึ่งกลางได้ครับ
<div class="container">
<div id="element"> ... </div>
</div>.container {
height: 300px;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.container:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
#element {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 Arial sans-serif; /* <-- reset the font property */
}ความหมายของโค๊ดด้านบนตามภาพเลยครับง่ายๆ
แค่นี้ละครับ ไปละครับ
เครดิตเว็บ stackoverflow
สมัครสมาชิก:
บทความ (Atom)