วิธีการแต่งกล่องคอมเม้นท์ทำได้อย่างไร

เป็นคำถามที่ได้รับมาเมื่อวันก่อนจึงขอมาแนะนำวิธีทำในวันนี้ค่ะ

 

 

 ขั้นตอนการแต่งกล่องคอมเม้นท์

 

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  ที่เข้ามาเยี่ยมทักทายทุกคนค่ะ