การแต่งกล่องคอมเม้นท์ให้มีสีสันสวยงาม

วิธีการแต่งกล่องคอมเม้นท์ทำได้อย่างไร เป็นคำถามที่ได้รับมาเมื่อวันก่อนจึงขอมาแนะนำวิธีทำในวันนี้ค่ะ ขั้นตอนการแต่งกล่องคอมเม้นท์ 1. อยู่ที่บล็อกที่ต้องการตกแต่งกล่องคอมเม้นท์ ไปที่ เมนูทางลัด è จัดการบล็อก è ตกแต่งบล็อก ดังรูป

แต่งกล่องคอมเม้นท์ ตกแต่ง ทำภาพสะท้อนผิวน้ำ ไขข้อข้องใจฯ เขียน(ภาษาไทย) ดุ๊กดิ๊กฯ ใส่ลูกเล่นให้ตัวหนังสือ ถ่ายรูปลงปกนิตยสาร.!! โค้ดสีสำหรับแต่งบล็อก(3) โค้ดสีสำหรับแต่งบล็อก(2) โค้ดสีสำหรับแต่งบล็อก(1) การใส่รูปฯที่หัวบล็อก แต่งรูปภาพไว้ใช้แต่งบล็อกฯ วิธีลบรูปภาพในไฟล์อัลบั้ม การใส่รูปในบันทึก การlink ไปแหล่งข้อมูลฯ

2.จะเข้ามาที่หน้า แก้ไขชุดตกแต่ง เลือกแก้ไข css ที่ตกแต่งมาเอง ดังรูป

เปลี่ยนเมาส์-เคอร์เซอร์ เมาส์ผู้หญิงฯ เมาส์ดอกไม้(เพิ่มใหม่) เมาส์ดอกไม้สวยๆ เมาส์รูปผีเสื้อ เมาส์น้องหมาน่ารัก นกไว้ทำเมาส์-เคอร์เซอร์ เปลี่ยนเคอร์เซอร์รูปน่ารักฯ เปลี่ยนเคอร์เซอร์รูปน่ารัก เปลี่ยนเคอร์เซอร์รูปแมวน้อย

3.ให้ copy code ของ css ตามแบบข้างล่าง นำไปวางในช่องของ CSS ที่ตกแต่งมาเอง è บันทึก CSS ดังรูป เป็นอันเสร็จแล้วค่ะ คราวนี้ก็มาเลือกแบบกล่องคอมเม้นท์ตามข้างล่างนี้เลยค่ะ

เปลี่ยน theam บล็อก แต่งบล็อกลายไทย (2) แต่งบล็อกลายไทย บล็อกสีน้ำเงิน/ฟ้าคราม(2) บล็อกสีน้ำเงิน / ฟ้าคราม แต่งบล็อกเป็นสีทอง บล็อกสีชมพู (3) บล็อกสีชมพู (2) แต่งบล็อกดอกกุหลาบ (2) แต่งบล็อกสำเร็จรูป (2) บล็อกสีฟ้าเข้ม/คราม (2) แต่งบล็อกดอกกุหลาบ บล็อกต้นไม้ใบหญ้า (2) บล็อกต้นไม้ใบหญ้า (1) บล็อกสีฟ้าเข้ม/คราม บล็อกสีชมพู แต่งบล็อกแบบ ผู้หญิงๆ การแต่งบล็อก

กล่องคอมเม้นท์ แบบที่ 1 form{border: solid 1px #FF0000; background-image:url(http://gotoknow.org/file/siriporn5633/pon2-bg2.jpg); background-repeat:repeat;}

กล่องคอมเม้นท์ แบบที่ 2 form{border: solid 1px #009900; background-image:url(http://gotoknow.org/file/siriporn5633/pon-antz37.jpg); background-repeat:repeat;}

กล่องคอมเม้นท์ แบบที่ 3 form{border: solid 1px #B22222; background-image:url(http://gotoknow.org/file/siriporn5633/pon3-bg6.gif); background-repeat:repeat;}

กล่องคอมเม้นท์ แบบที่ 4 (หัวใจกระพริบวับๆ) form{border: solid 1px #C71585; background-image:url(http://gotoknow.org/file/siriporn5633/red-heart.gif); background-repeat:repeat;}

กล่องคอมเม้นท์ แบบที่ 5 form{border: solid 1px #9400D3; background-image:url(http://gotoknow.org/file/siriporn5633/f005.jpg); background-repeat:repeat;}

ขอขอบคุณ คุณสารินี ไกรพจน์ ที่ตั้งประเด็นนี้มาด้วยค่ะ

ขอบคุณชาว blogger ที่เข้ามาเยี่ยมทักทายทุกคนค่ะ