บทความ

กำลังแสดงโพสต์จาก 2023

วิธีแสดงกล่องข้อความโค้ด ( code textbox) ใน blogger

รูปภาพ
วิธีแสดง code ในหน้าเว็บ  หากเราต้องการแสดง code ลงในเว็บไซต์ ต้องใส่แท็ก  <pre>   และ    <code>  แท็ก <code> ใช้ระบุว่าเป็น code  โดยปกติ จะรวมแท็กนี้ไว้ในแท็ก  <pre>  เพื่อบอก Browser และ Google ว่า code ในแท็กนี้เป็น code ที่ต้องการแสดง ไม่ใช่ให้แสดงผล รูปแบบ การแสดงอักขระต้องห้ามใน code  อักขระ < > ใน code อาจไม่แสดงแม้จะอยู่ในแท็กด้านบน เนื่องจากเป็นอักขระตัองห้ามของ HTML  ในกรณีนี้ให้แปลง  HTML tags  เป็น HTML entities  โดยแทนที่ < ด้วย  &lt;  และ > ด้วย  &gt;  ตัวอย่าง  code ที่อยากแสดง  ตัวอย่าง    code ที่เขียนเพื่อแสดง code การแสดง Code อยู่ในกล่องหรือเฟรม  กรณีต้องการแสดง Code อยู่ในกล่องหรือเฟรม สามารถเพิ่ม css จัดรูปแบบได้  ตัวอย่าง ใส่กล่อง code ลงใน blogger  ใช้โค้ด แบบที่ 1 ใช้ code แบบที่ 2   ถ้ามีวิธีที่น่าสนใจ เราจะนำมาเสนอเพิ่มเติมต่อไป หากสนใจการใช้ code ในการทำเว็บของท่าน ต้องการศึกษาเพิ่มเติม...

ทำไอค่อนติดต่อลอยด้านข้าง ด้วยภาพ

รูปภาพ
โค้ดไอค่อนข้อมูลติดต่อ /* โทร */ /* เฟซบุก */ /* อีเมล์ */ /* ไลน์ */ กรณีต้องการให้ไอค่อนอยู่ด้านล่าง ให้ใส่ระบุ    bottom: 0; กรณีให้อยู่ด้านขวา right: 0; ไปเห็นเว็บนี้มาทำไอค่อนได้สวยมาก https://www.missuri.shop/articles/promotion/

แก้ไขคำเตือนเมื่อปรับ Template Blogger

 1. Error:  There should be one and only one skin in the theme, and we found: <b>0</b> Template Code Problem เพิ่ม <b:skin> </b:skin>   ก่อน body 2. Error: We did not find any section in your template. A template must have at least one b:section tag I Make This Template Before Blogger Delete The Old Dashboard Interface, So I’m Sorry If the Code not Compatible with the New Dashboard Interface, for Solution... 1. Open “Supersized Under Construction.xml” in Notepad (Or) Adobe Dreamweaver or More, 2. Find this code… </body> 3. Add this code above it… <b:section id='fixelements' showaddelement='no'/> 4. Save Template.

css เรียงภาพ

รูปภาพ
ตัวอย่างโค้ด ตัวอย่างที่ได้ (2ภาพสีเหลืองด้านล่างของภาพ) ภาพจากเว็บ  เรียนพิมพ์สัมผัสกับครูน้อย, UP SKILL TOUCH TYPING, FREE ONLINE LEARNING.  https://upskilltouchtyping.blogspot.com/ 

อ้างอิงไฟล์ภาพ html

  < img  src =" url "  alt =" alternatetext " > กรณีอ้างอิงจากในโฟลเดอร์เดียวกัน <img src="touchtype1text.jpg" alt="UpSkill by Kru Noi" width="80%" height="auto"> กรณีอ้างอิงจากที่อยู่เว็บไซต์ < img  src =" url "  alt =" alternatetext " >

Tag สำหรับการแสดงตัวอย่าง Code ในหน้าเว็บ

สำหรับตัวอย่างโค้ดใช้ Tag <xmp> </xmp> สำหรับตัวอย่างผลลัพธ์จากโค้ดใช้ Tag <precode> </precode> อาจเพิ่ม style เพื่อให้เป็นกรอบของส่วน Tag นั้น ตัวอย่าง <precode  style="background-color: #eee;   border: 1px solid #999;   display: block;   padding: 20px;"> 

ตัวอย่างโค้ดรายการ HTML แบบไม่มีหัวข้อ Nested List HTML

โค้ด บทที่ 1 จับเวลา 1 นาที จับเวลา 5 นาที บทที่ 2 จับเวลา 1 นาที จับเวลา 5 นาที บทที่ 3 จับเวลา 1 นาที จับเวลา 5 นาที บทที่ 4 จับเวลา 1 นาที จับเวลา 5 นาที บทที่ 5 จับเวลา 1 นาที จับเวลา 5 นาที ตัวอย่างหน้าเว็บจากโค้ด บทที่ 1 จับเวลา 1 นาที จับเวลา 5 นาที บทที่ 2 จับเวลา 1 นาที จับเวลา 5 นาที บทที่ 3 จับเวลา 1 นาที จับเวลา 5 นาที บทที่ 4 จับเวลา 1 นาที จับเวลา 5 นาที บทที่ 5 จับเวลา 1 นาที จับเวลา 5 นาที