Kaosuaylunla Diary: Code HTML
แสดงบทความที่มีป้ายกำกับ Code HTML แสดงบทความทั้งหมด
แสดงบทความที่มีป้ายกำกับ Code HTML แสดงบทความทั้งหมด
เป็นวิธีเบสิกแบบเริ่มต้นเลย อันนี้ไม่ได้เป็นการใส่พาสเวิร์ดปกป้องทั้งเว็บ หรือทั้งบล็อกนะคะ แต่เป็นการใส่พาสเวิร์ดพื้นๆ เพื่อปกป้อง "เนื้อหา" ที่เราต้องการใน "โพส" นั้นๆ โดยใช้ Code HTML ง่ายๆ สามารถก็อปไปแปะบนเนื้อหา "ชิ้นไหนก็ได้" ที่อยู่ในบล็อก โดยสามารถกำหนดพาสเวิร์ดกับเว็บปลายทางที่ต้อง Redirect เมื่อใส่พาสเวิร์ดผิดได้ด้วยตัวเอง เอ้าตามมาดูกันนะว่าต้องใส่ยังไง

วิธีใส่พาสเวิร์ด ปกป้องคอนเท้นใน Blogspot

  • ขั้นแรก 
ใน Blogger Dash Board ไปที่หัวข้อ Pages > กดสร้าง New Page แล้วใส่ข้อความรองรับเมื่อเจอคนใส่พาสเวิร์ดผิด เช่น
"พาสเวิร์ดไม่ถูกต้อง กรุณาลองใหม่อีกครั้ง หรือติดต่อเจ้าของบล็อกเพื่อขอรับพาสเวิร์ด" 
เป็นต้น


  • ขั้นที่สอง
เวลาเขียนคอนเท้นเสร็จแล้ว ก่อนที่จะโพส ให้กดเปลี่ยนโหมดมุมซ้ายจากปุ่ม Compose เป็น HTML


  • ขั้นที่สาม
ก๊อปปี้โค้ดด้านล่างนี้ไปใส่ไว้บนสุดของเนื้อหานั้น

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var password = 'ใส่พาสเวิร์ดตรงนี้'
password=prompt('Please enter the password to enter this site:','');
if (password != 'ใส่พาสเวิร์ดตรงนี้') {
location.href='http://www.kaosuaylunla.com';
}
// End -->
</SCRIPT>

  • ขั้นที่สี่

แก้ไขโค้ดโดยใส่พาสเวิร์ดที่ต้องการใน Quote เครื่องหมาย 'ใส่พาสเวิร์ดตรงนี้'
เปลี่ยน url ในโค้ดจาก http://www.kaosuaylunla.com เป็นลิงค์ url หน้าที่สร้างไว้ในขั้นแรก (หรือจะลิงค์ไปที่อื่นก็ได้แล้วแต่เรา)
  • ขั้นที่ห้า

สุดท้ายกด Publish แล้วเวลาคนคลิกเข้าเนื้อหาชิ้นนี้ก็จะถูกถามให้ใส่พาสเวิร์ดก่อนอ่านค่ะ
วิธีนี้ไม่ใช่วิธีที่ปลอดภัยในการปกป้องข้อมูลส่วนตัวหรือความลับทางการค้านะคะ คนที่เรียนไอทีเป็นโค้ดต่อให้เค้าไม่รู้พาสเวิร์ดก็สามารถหาวิธีอ่านเนื้อหาของเราได้อยู่ดี เหมาะเป็นวิธีสำหรับปกป้องเนื้อหาที่มีเรท 18+ หรือเนื้อหาที่ต้องการคนอ่านเฉพาะกลุ่มในเบื้องต้นเท่านั้นค่ะ ต้องการอะไรยากๆลึกๆเราก็ตอบไม่ได้เหมือนกันนะเพราะอันนี้เราก็แปลว่าจากบล็อกของ blogbyheathers.com มาอีกที ไม่ได้เรียนโค้ดหรือทำเป็นในขั้นลึกค่ะ
หวังว่าคอนเท้นนี้จะพอมีประโยชน์กับคนที่กำลังหาวิธีใส่พาสฯ ปกป้องเนื้อหาคอนเท้นตัวเองอยู่บ้างเนาะ ไว้พบกันใหม่งานหน้า อยากให้เขียนอะไรเพิ่มเติมแวะมาคอมเม้นทิ้งไว้ได้นะคะ วันนี้ไปก่อน บ๊ายบาย ^^


ใครที่ใช้ Blogspot แล้วอยากจะลองเปลี่ยนตีมสวยๆ แต่ก็กลัวทำพัง หรือเผลอทำพังไปแล้วอยากจะกู้ตีมเดิมคืนมา วันนี้มี วิธีเปลี่ยน Theme กู้ Theme ของ Blogspot มาฝากค่ะ
ใน Blogger Panel ตรงหัวข้อ Template คลิกเข้าไป ให้สังเกตุมุมขวาบน จะมีปุ่ม Backup/Restore อยู่ ซึ่งปุ่มนี้นอกจากจะเอาไว้ Backup ตีมปัจจุบันแล้ว ยังสามารถเอาไว้ใส่ตีมใหม่ๆที่โหลดจากอินเตอร์เนทได้ด้วย วิธีตามภาพนี้เลยค่ะ


การ Backup Theme ปัจจุบัน

  1. ไปที่ Blogger Panel หัวข้อ Template
  2. ปุ่ม Backup/Restore มุมขวามือบน
  3. กด Download full Template จะได้ไฟล์ .xml มา (สามารถเปลี่ยนชื่อเองได้)
เท่านี้ก็จะได้ตีมปัจจุบันของเรามา backup ไว้ เผื่อเราเผลอไปเปลี่ยนตีมโดยไม่ตั้งใจ หรือทำโค้ดพัง ลองแก้ widget ในบล็อกแล้วตีมพัง กู้ไม่ได้ เราสามารถใช้ไฟล์ .xml นี้เพื่อกู้บล็อกเราได้ตามขั้นตอนด้านล่างเลยค่ะ



วิธีใช้ไฟล์ .xml เพื่อเปลี่ยน Theme ของ Blogspot

ต้องมีไฟล์ .xml เพื่ออัพโหลด สามารถหาได้จากอินเตอร์เนทโดยการเสริชคำว่า Blogspot Theme
1. กดปุ่ม Download full Template เพื่อแบคอัพบล็อกปัจจุบันเอาไว้ก่อน
2. เมื่อสำเร็จจะได้ไฟล์ .xml มา
3. กด Choose File แล้วเลือกไฟล์ .xml ที่ต้องการใช้
4. กด upload

ลองกด View Blog เพื่อตรวจสอบความถูกต้อง หากต้องการแก้ไข widget ให้เข้าไปที่ Layout หรือ Edit HTML ใน Template ค่ะ แนะนำให้ทุกคน Backup เสมอก่อนใช้ตีมใหม่ที่โหลดมาเพราะมีโอกาสบล็อกรวน บล็อกพังได้สูง (เราเจอมาแล้ว รื้อใหม่เลย หึหึหึหึ น้ำตาจิไหล) 

Theme ปัจจุบันที่เราชอบและใช้อยู่คือ Theme ชื่อ Fusion จาก http://www.templatesyard.com/
เราซื้อในราคา 10$ (ราวๆ 3XX บาท) ใครสนใจว่าเราใช้โดเมนอะไรหรือมีวิธีสร้างบล็อกของตัวเองยังไงบ้างลองคลิกไปอ่านกันได้ที่หัวข้อ Blogger101 นะคะ

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


เข้าไปที่ Template กดปุ่ม Edit HTML คลิกในหน้าต่างโค้ดหาข้อความ </head> ตามภาพด้านล่าง

รายละเอียดโค้ดริบบิ้น:
<script type="text/javascript"> document.write("<div id='ribbon'></div>");const t="In Memory Of...",r=document.getElementById("ribbon");r.innerHTML=t,r.style.backgroundColor="#000",r.style.boxShadow="0px 0px 10px rgba(0,0,0, 0.5)",r.style.color="#fff",r.style.padding="10px",r.style.position="fixed",r.style.top="50px",r.style.left="-55px",r.style.textAlign="center",r.style.width="250px",r.style.zIndex=999999,r.style.transform="rotate(-45deg)"; </script>

วิธีใช้โค้ด:
Copy โค้ดไปใส่ไว้หลัง </head>
1. ใส่ข้อความที่ต้องการแทนคำว่า In Memory Of... โดยให้อยู่ในเครื่องหมายคำพูด "..."
2. สีพื้นหลังเซทไว้เป็นสีดำ แต่ถ้าต้องการเปลี่ยนให้หาโค้ดสีมาใส่ในเครื่องหมายคำพูดแทน #000 ได้
3. สีตัวอักษรเซทไว้เป็นสีขาว แต่ถ้าต้องการเปลี่ยนให้หาโค้ดสีมาใส่ในเครื่องหมายคำพูดแทน #fffได้
วิธีหาโค้ดสีที่ต้องการ ลองเสิชคำว่า color code ในกูเกิ้ลดูนะ

ลองใช้กันดูนะคะ
ได้ไม่ได้ยังไงมาคอมเม้นบอกกันได้เลย หวังว่าบล็อกนี้จะมีประโยชน์บ้างม่มากก็น้อยค่ะ
เห็นหลายๆคนมีคำถามว่า ทำยังไงให้เว็บเป็นสีขาวดำ, ขึ้นสีขาวดำแล้วกระทบกับรูปภาพในเว็บรึเปล่า? ทำไมต้องขึ้นเว็บเป็นสีขาวดำ? คาดว่าการอ่านบล็อกนี้จะช่วยตอบคำถามได้บ้างไม่มากก็น้อยค่ะ
ขอน้อมเกล้าฯ ถวายอาลัยส่งดวงพระวิญญาณพระองค์ เสด็จฯสู่สวรรคาลัย
ด้วยสำนึกในพระมหากรุณาธิคุณปกเกล้าปกกระหม่อม
ด้วยเกล้าด้วยกระหม่อม ขอเดชะ
www.kaosuaylunla.com

การใส่ฟิลเตอร์ขาวดำนี้ไม่ได้กระทบภาพต่างๆบนเว็บแต่อย่างใด เป็นการใส่ code ตามภาพ เข้าไปที่ Template กดปุ่ม Edit HTML คลิกในหน้าต่างโค้ดหาข้อความตามรายละเอียดด้านล่าง
รายละเอียดโค้ดฟิลเตอร์:
<style>html { filter: grayscale(100%); filter: gray; -moz-filter: grayscale(100%); -webkit-filter: grayscale(100%); }</style>

ใส่หลัง </head>
(ใช้วิธีกด ctrl+f เพื่อหา </head> แล้ววางโค้ดด้านบนลงไปค่ะ)

สามารถลดค่าสีเทาได้ โดยเปลี่ยน 100% เป็น 40% ทั้งหมด

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

แต่ในปี 2017 นี้มีไกด์ไลน์จากทางสมาคมให้ศึกษา สรุปมาง่ายๆคือ
1-27 ตุลาคม สื่อในมือให้เลือกทำอย่างใดอย่างหนึ่งหรือทั้งหมด (ใช้ greyscale 40% คลุมสื่อ, เลือกใช้ภาพสีโทนขาวดำเทา, เพิ่มแถบข้อความไว้อาลัยในสื่อ)

1-12 ตุลาคม หากซื้อโฆษณา เวลานี้สามารถทำการโฆษณาในทุกๆ ช่องทาง Online ได้ตามปกติ แต่ควรคำนึงถึงความเหมาะสม และปฏิบัติตามหลักที่ กสทช. กำหนด

13-24 ตุลาคม ยังคงสามารถทำการการโฆษณา ได้ แต่ทั้งนี้ในส่วนของภาพและโทนสีควรลดระดับสี 40% และลักษณะเนื้อหาไม่ควรมีเนื้อหาที่มีลักษณะตลก เฮฮา ความรุนแรง เรื่องทางเพศ หรือถ้อยคำหยาบคาย และปฏิบัติตามประกาศ หลักเกณฑ์ ตามที่ กสทช. กำหนด

25-27 ตุลาคม งดเว้นการโฆษณาในช่วงเวลานี้

28 ตุลาคมเป็นต้นไป การโฆษณาสามารถทำได้แต่ควรไม่มีสีสันฉูดฉาดเกินสมควร และต้องคำนึงถึงลักษณะเนื้อหาไม่ควรมีเนื้อหาที่มีลักษณะตลก เฮฮา ความรุนแรง เรื่องทางเพศ หรือถ้อยคำหยาบคาย และปฏิบัติตามประกาศ หลักเกณฑ์ ตามที่ กสทช. กำหนด

ทั้งนี้ ไม่จำเป็นต้องปรับรูปภาพให้เป็นขาวดำเวลาอัพขึ้นไปบนเว็บ เราสามารถอัพภาพสีปกติได้เลย และเมื่อต้องการเอาออกก็เข้าไปกด ctrl+f หาโค้ด <style> ในช่อง html บน template แล้วกดลบโค้ดฟิลเตอร์ออก ก็จะเป็นการคืนสีให้กับเว็บที่ใส่ฟิลเตอร์ไว้ค่ะ

และหากใครที่ต้องการไว้อาลัย แต่ไม่ต้องการใส่ฟิลเตอร์ขาวดำเพราะจะกระทบกับคอนเท้นที่ต้องแสดงผลเป็นสี แนะนำให้ใช้โค้ดเพื่อคาดริบบิ้นดำแทนค่ะ

วิธีใส่โค้ดริบบิ้นดำคลิก

ถ้ากลัวว่าการใส่โค้ดจะทำให้บล็อกพังแนะนำให้ Backup ตีมปัจจุบันไว้ก่อนนะคะ

หวังว่าบล็อกนี้จะมีประโยชน์กับทุกคนบ้างไม่มากก็น้อยนะคะ