แสดงผลปกติ

การเปลี่ยนข้อความโพสธรรมดา ให้น่าสนใจขึ้นด้วยการทำเป็น html ui inline css

 15 มิ.ย. 2569 / Administrator / 56

💡 ขั้นตอนการเปลี่ยนข้อความโพสต์ธรรมดา ให้สวยงามน่าสนใจด้วย HTML UI (Inline CSS)

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

1. เตรียมข้อความและส่งคำสั่ง (Prompt) ให้ AI

พิมพ์คำสั่งสั่งงาน AI โดยใช้โครงสร้างคำสั่งดังนี้ เพื่อให้ได้ดีไซน์ที่เหมาะสมกับ TinyMCE:

"ช่วยเขียนโค้ด html ให้ ui สวยงาม เต็มหน้าจอ โดยใส่ inline css เพื่อใส่ใน tinymce [ตามด้วยข้อความโพสต์ของคุณ]"

*ทริก: แนะนำให้ใส่เครื่องหมายอัญประกาศ "" ครอบข้อความโพสต์เอาไว้ เพื่อให้ AI แยกแยะระหว่างคำสั่งและเนื้อหาได้อย่างชัดเจน

การใส่ Prompt และเนื้อหา


2. คัดลอกซอร์สโค้ด (Copy Code) ที่ AI สร้างให้

เมื่อ AI ประมวลผลและสร้างโค้ด HTML เสร็จเรียบร้อยแล้ว ให้กดปุ่ม "Copy code" (หรือคัดลอกข้อความในกล่องโค้ดทั้งหมด) เพื่อเตรียมนำไปใช้งาน

โค้ดที่ AI สร้างให้

กดคัดลอกโค้ด


3. นำโค้ดไปวางในระบบ TinyMCE และบันทึก

ไปที่หน้าต่างแก้ไขข้อความของ TinyMCE จากนั้นกดเปิดเครื่องมือกลุ่มซอร์สโค้ด (สัญลักษณ์ <> หรือ Source Code) วางโค้ด HTML ที่คัดลอกมาลงไป จากนั้นกดปุ่มเซฟหรือบันทึกข้อมูล

วางโค้ดใน TinyMCE


✨ ผลลัพธ์การแสดงผลจริง

ระบบจะเปลี่ยนข้อความตัวอักษรธรรมดา ให้กลายเป็นกล่องข้อความที่มีสีสัน มีสไตล์ แบ่งหมวดหมู่ชัดเจน และดูน่าสนใจขึ้นมาทันที!

การแสดงผลจริงบนหน้าเว็บ

เปิด-ปิด messenger การเดินทางด้วย Google Map ติดต่อเกี่ยวกับไอทีและหอสมุดกลาง