ตัวอย่างทำสีพื้นหลังข้อความสวย ๆ
ไปเห็นกรอบข้อความสวย ๆ มา https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_colors
บทความ
สร้างเฟรมสำหรับทดลองแก้ไขด้วยตนเองบนเว็บ : Create frame for try it yourself editor ( HTML, CSS, JS ) online
สร้างเฟรมสำหรับทดลองแก้ไขด้วยตนเองบนเว็บ Create frame for try it yourself editor ( HTML, CSS, JS ) online สำหรับการสร้างเฟรม try it yourself นี้ จะแบ่งเป็น 4 ส่วนที่จะเขียนโค้ด 1. ส่วนแรกคือ ส่วนแถบบาร์นำทางด้านบน ตัวอย่างโค้ดแถบบาร์นำทางบนเฟรมรันโค้ด 2. ส่วนที่เป็นคำสั่งของกล่องปุ่มรันโค้ด จะมี 2 ส่วนย่อยคือ 2.1 กล่องปุ่มรันโค้ด จะมีโค้ดอยู่ในส่วนที่ 1 แถบบาร์นำทาง หรือหากแยกเฉพาะส่วนปุ่มออกมา จะแบ่งเป็นโค้ด css 2.2 โค้ดของปุ่มรันโค้ด 2.3 สคริปต์โค้ดของปุ่มรันโค้ด ข้อมูลโค้ดข้างต้นเป็นโค้ดจากเว็บ W3schools.com ยังมีตัวอย่างจากอีกเว็บคือเว็บ https://fellowtuts.com/html-css/make-a-html-css-js-try-it-yourself-editor/ ได้แนะนำแนวทางทำหน้าต่างเฟรม try it yourself editor ไว้ด้วย สำหรับในส่วนโค้ดของปุ่มรันโค้ด คือ สำหรับในส่วน script ของปุ่มรันโค้ด คือ โค้ดทั้งหมดของ Create frame for try it yourself editor คือ ตัวอย่างเมื่อทำเสร็จ
กำหนดลักษณะรายการ : List Style
css สำหรับกำหนดลักษณะรายการ มีดังนี้ รูปแบบของรายการ list-style-type : disc ; list-style-type : circle ; list-style-type : square ; list-style-type : decimal ; list-style-type : decimal-leading-zero ; list-style-type : lower-alpha ; list-style-type : lower-greek ; list-style-type : lower-latin ; list-style-type : lower-roman ; list-style-type : upper-alpha ; list-style-type : upper-greek ; list-style-type : upper-latin ; list-style-type : upper-roman ; list-style-type : armenian ; list-style-type : cjk-ideographic ; list-style-type : georgian ; list-style-type : hebrew ; list-style-type : hiragana ; list-style-type : hiragana-iroha ; list-style-type : katakana ; list-style-type : katakana-iroha ; list-style-type : none ; list-style-position : inside ; Choose example 1 list-style-position : outsi de ; nitial value outside Applies to list items Inherited yes Computed value as specified Animation type discrete Coca Cola Coffee Tea Coca Cola Coffee Tea C
เพิ่มส่วนที่ซ่อนในหน้าเว็บ collapsible
เพิ่มส่วนที่ซ่อนในหน้าเว็บ ทำเว็บที่ซ่อนข้อความดังตัวอย่าง 1 เพิ่มโค้ดในส่วน style <style> .collapsible { background-color: red; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 20px; } .active, .collapsible:hover { background-color: yellow; color: black; } .collapsible:after { content: '\002B'; color: white; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\2212"; } .content { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #fff4f4; } </style> 2. ใส่เนื้อหาในโค้ด และอย่าลืมใส่ script ไว้ท้ายบทความด้วย ดังตัวอย่าง <body> <h2>เพิ่มส่วนที่ซ่อนในหน้าเว็บ ด้วย Class: .collapsible </h2> <h3>ตัวอย่าง 1:</h3> <button class="collapsible">ข้อความ</button> <div class="content"> <p>Lorem ipsum
เพิ่มส่วนที่เป็นไฟล์ PDF ในหน้าบล็อกเกอร์
หากเราต้องการวางไฟล์เอกสาร เช่นไฟล์ PDF ลงในโพสต์ในบล็อกเกอร์ วิธีหนึ่งที่ทำได้คือ การวางเอกสารไว้ในส่วนที่เรียกว่า iframe โดยมีขั้นตอนหลักอยู่ 2 ขั้นตอน คือการเตรียมไฟล์และการลิงก์ไฟล์วางไว้ใน iframe code ขั้นตอนที่ 1 การเตรียมไฟล์ 1.1 Upload File ที่จะนำเข้า Blogger ไปไว้ที่ My Google Drive 1.2 คลิกขวาที่ไฟล์ เลือกคำสั่ง > Preview ดูตัวอย่าง 1.3 คลิกที่คำสั่งเพิ่มเติม (...) ด้านขวาของตัวอย่างไฟล์ เลือกคำสั่ง > Open in a new window . เปิดในหน้าต่างใหม่ 1.4 คลิกที่ คำสั่งเพิ่มเติม (...) ด้านขวาของตัวอย่างไฟล์ เลือกคำสั่ง Embed item . ฝังรายการ (อย่าลืมตั้งค่าไฟล์เป็น publicly visible เพื่ออนุญาตให้แสดงไฟล์นี้ให้ทุกคนเห็น ) 1.4 Copy the embed code ขั้นตอนที่ 2 วางไฟล์ ในบล็อก 2.1 ไปที่หน้าต่างเขียนโพสต์/เพจ มุมมอง html 2.2 วาง Embed Code ที่คัดลอกมา ลงตำแหน่งที่ต้องการให้แสดง <iframe allow="autoplay" height="480" src=" ลิงก์ไฟล์ใน Google Drive " width="640" ></iframe> ภาพตัวอย่างในหน้าบล็อก
ขั้นตอนการเพิ่มปุ่มรับชำระเงินผ่านเว็บไซต์ด้วย PayPal
ขั้นตอนการเพิ่มปุ่มชำระเงินผ่านเว็บไซต์ด้วย PayPal ในบทความนี้ ผู้เขียนจะกล่าวถึงขั้นตอนการเพิ่มปุ่มชำระเงินโดยใช้เครื่องมือจากแพลตฟอร์มรับชำระเงินระดับโลก PayPal ซึ่งการที่จะสามารถเข้าไปรับโค้ดปุ่มได้ ท่านต้องเป็นสมาชิกก่อน สามารถไปสมัครสมาชิกได้โดยเข้าเว็บไซต์ PayPal นี้ แล้วไปที่เมนู >เครื่องมือทั้งหมด ที่หน้าต่างรวมเครื่องมือรับชำระเงิน เลือกเมนู >ปุ่ม PayPal คลิก >เปิด จากนั้นเลือกรูปแบบปุ่มที่ต้องการ ในที่นี้เราขอเลือกปุ่มแบบที่มีตะกร้าสินค้า เป็นตัวอย่างค่ะ คลิกที่ตัวเลือก >เพิ่มสินค้าลงในตะกร้า จะเข้าสู่หน้าต่างการตั้งค่า สร้างปุ่มการชำระเงิน PayPal ให้กรอกข้อมูลลงในช่องที่มีให้ครบถ้วน เมื่อกรอกข้อมูลทุกขั้นตอนเรียบร้อย คลิกปุ่ม >สร้างปุ่ม จะเข้าสู่หน้าต่างที่มีโค้ด ให้เราคลิกที่ >เลือกรหัส เพื่อคัดลอกโค้ดที่ได้ไปวางในหน้าต่างเว็บของเรา (การวางโค้ดที่หน้าเว็บเราต้องเปิดมุมมอง HTML วางในตำแหน่งที่จะให้ลูกค้าทำการสั่งซื้อสินค้า) สามารถกลับไปแก้ไขปุ่มหากมีข้อมูลเปลี่ยนแปลง หรือสร้างปุ่มสำหรับสินค้าอื่นโดยใช้ปุ่มนี้เป็นแม่แบบได้ เลือกจากเมนูคำสั่งในหน้าจอ
โค้ดตั้งค่าให้ภาพส่วนหัวของเว็บอยู่ตรงกลาง -Blogger
โค้ด ตั้งค่าให้ภาพส่วนหัวของเว็บอยู่ตรงกลาง Blogger เพิ่มโค้ดนี้ display: block; margin: 0 auto; ที่ส่วน (ตามตัวอย่าง) .Header img, .Header #header-inner { -moz-border-radius: $(header.border.radius); -webkit-border-radius: $(header.border.radius); -goog-ms-border-radius: $(header.border.radius); border-radius: $(header.border.radius); display: block; margin: 0 auto; } ภาพเดิม จะเห็นว่าภาพอยู่ชิดด้านซ้ายของพื้นที่หน้าเว็บ ภาพหลังใส่โค้ดจัดกลาง ภาพถูกจัดให้อยู่กึ่งกลางหน้าเว็บ