บทความ

กำลังแสดงโพสต์จาก มิถุนายน, 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 ในการทำเว็บของท่าน ต้องการศึกษาเพิ่มเติม สามารถติดต่อครูน้อย โทร/ไลน์ 0843620912 เว็บไซต์ https://www.cnxservice.app/

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

รูปภาพ
โค้ดไอค่อนข้อมูลติดต่อ <style> .icon-bar { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .icon-bar a { display: block; text-align: center; padding: 6px 5px 1px 5px; transition: all 0.3s ease; color: white; font-size: 20px; } .icon-bar a:hover { background-color: #522; } .facebook { background: #3B5998; color: white; } .twitter { background: #55ACEE; color: white; } .google { background: #dd4b39; color: white; } .linkedin { background: #007bb5; color: white; } .youtube { background: #bb0000; color: white; } .image-button{ border: none; color: white; text-align: center; text-decoration: none; display: block; font-size: 8px; font-weight: bold; cursor: pointer; } .image-button img { height: 40px; border: none; } .content { margin-left: 75px; font-size: 30px; } </style> <body> <div cla