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


 

 

 

 

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

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

 

 

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

 

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

 



ความเห็น (50)

ขอบคุณมากค่ะอาจารย์ ขออนุญาต copy นะค่ะ

จริงๆ แล้วสอนอยู่ภาควิชาวิชาคอมพิวเตอร์ใช่ อ่ะป่าวครับ แซวเล่นนะครับ

สวัสดีครับแวะมาเยี่ยมชมครับ

สวัสดีเจ้าค่ะ คุณครู

น้องจิเอาไปแต่งแล้ว แต่ว่ามาลายอื่นเปล่าค่ะ คิคิ ขอบคุณ คุณครูเจ้าค่ะที่ทำให้บล๊อคน้องจิสวยขึ้นมาตั้งเยอะ คิคิ รักษาสุขภาพด้วยนะเจ้าค่ะ

เป็นกำลังใจให้เจ้าค่ะ ---->น้องจิ ^_^

  • ขอบคุณค่ะ
  • อยากได้ code นี้มานานแล้ว ดีใจจัง

สวัสครับ อาจารย์

  • อยากได้เหมือนกัน
  • ขอยืมเอาไปใช้หน่อยนะครับ
  • ขอบคุณครับ

สวัสดีค่ะอาจารย์  ลิ้มศรี  แวะมาชมค่ะ พร้อมกับทึ่ง อาจารย์เก่งจังค่ะ  ลิ้มศรีขออนุญาตนำไปตกแต่งบ้างนะคะ  (กล่องของลิ้มศรีต้องสวยกว่าเพื่อนในที่ทำงานแน่เลยค่ะ   อิอิอิ )

  • สวัสดีค่ะ อ.paew เลือกไปใช้ได้เลยค่ะ

 

 

 

สวัดีค่ะอาจารย์

แวะมาเยี่ยมและขออณุญาต Copy ไปใช้ด้วยอีกคนค่ะ

ขอบคุณมากค่ะ

  • สวัสดีค่ะ คุณ ครูข้างถนน เลือกไปใช้ได้เลยค่ะ

 

 

  • ขอบคุณ พี่ กัญญา  ที่แวะมาเยี่ยมค่ะ

 


สวัสดีค่ะ อ.ศิริพร

แอบมาเอาความรู้จากบันทึกอาจารย์หลายครั้งแล้วครั้งนี้เลยถือโอกาสมาขอบคุณเจ้าของบล็อกค่ะ ขอบพระคุณอาจารย์มากๆค่ะสำหรับหลากหลายวิธีการแต่งบล็อก ง่ายและสวยจริงๆค่ะ

  • ยินดีที่ได้รู้จักค่ะ คุณมะขามอ่อน/ครูมิม  นำมาแบ่งปันกันค่ะ  ขอบคุณที่ช่วยนำไปใช้ค่ะ

สวัสดีค่ะ หนูเข้ามาอ่านและก็ขออนุญาตนำไปแต่บล็อกของตัวเองนะคะ

ขอบคุณมากๆค่ะ

สวัสดีค่ะ คุณครู hello_kitty  เลือกสีเหมาะกับบล็อกสวยดีค่ะ (ชมกันเองละกัน..คิ..คิ..)

สวัสดีครับ  อ.ศิริพร เกื้อกูลนุรักษ์

สวยมากๆเลยครับ

ขอบคุณที่อาจารย์มากครับ ที่นำสิ่งดีๆมาฝากเสมอเลยครับ

สวัสดีค่ะ คุณ ภัควัฒน์  ชุดหน้าจะมีโทนสีฟ้า/น้ำเงิน ด้วยค่ะ

สวัสดีค่ะอาจารย์..

     อาจารย์ทำให้ครูตุ๊กแกกระโดดตัวลอยเลยค่ะ..^_^

     อยากทำได้มานานแล้วค่ะ  แต่หาวิธีทำไม่ได้สักที แฮะ..แฮะ

     ขออนุญาตนำไปใช้บ้างนะคะ

     ขอบพระคุณค่ะ..

สวัสดีค่ะ คุณครูตุ๊กแก  เลือกไปใช้ได้เลยค่ะ  ขอแอบประชาสัมพันธ์ล่วงหน้าจะมีชุดที่สองด้วยค่ะ 

สวัสดีค่ะอาจารย์ศิริพร

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

  • สวัสดีค่ะ คุณปุย สารินี ไกรพจน์  คงเหนื่อยหน่อยนะคะช่วงนี้  
  • รออยู่เหมือนกันไม่เห็นเข้ามา  คิดว่าคงมีงานยุ่งน่ะค่ะ
  • เดี๋ยวจะทำชุดที่สองตามมาค่ะ (สวยๆอีกแล้วค่ะ) 
  • รักษาสุขภาพด้วยนะคะ 

ขออนุญาตนำไปใช้ปรับแต่งนะคะ

อาจารย์เก่งจังเลยค่ะ

และขออนุญาตแนะนำ blog นี้ให้เพื่อนรู้จักด้วยนะคะ

สวัสดีค่ะ คุณlovefull  นำมาแบ่งปันเพื่อนๆ blogger ค่ะและขอบคุณที่ช่วยนำไปแบ่งปันต่อๆไปด้วยค่ะ

มาแปะ ... รับความรู้ครับอาจารย์ :)

ขอบคุณมาก ๆ เลยครับ

  • สวัสดีค่ะ อ.Wasawat Deemarn
  • ขอบคุณค่ะที่แวะมาเยี่ยมเยียน

ทดลองใช้แล้วถูกใจใช่เลย 

ขอบคุณครับ

สวัสดีค่ะ

แวะมาทักทาย

อยากทำcss เป็น

จะแวะมาถามใหม่นะคะ ถ้าอ่านแล้วยังทำไม่ได้

ขออนุญาตนำไปใช้หลายอย่างเลยนะคะ สวยทุกอันเลยอ่ะค่ะ

สวัสดีค่ะ คุณวัชรา ทองหยอด ,คุณลักษมี สารบรรณ และคุณarm  เลือกแบบที่ชอบไปใช้ได้เลยค่ะ

ขอบคุณสำหรับสิ่งดีดีคะ

  • สวัสดีปีใหม่ค่ะอาจารย์
  • ขออนุญาตนำไปใช้นะคะ ถูกใจมากเลย  แต่ทำไมจึงลบของเดิมไม่หมดคะ

         

 

 

  • สวัสดีปีใหม่ 2552
  • ขออนุญาตนำไปใช้นะค่ะ
ด.ญ.สุภัสสร หอมชื่น

...เม้น...

...ห้าย...

...ดั่ว...

...นร้า...

<br/><a href="http://glitter.postjung.com/" target="_blank" title="คลิ๊ก..สร้าง Glitter ด้วยตัวคุณเอง"><img border="0" src="http://glitter.postjung.com/data2/2009042609/49f3c0b486e9b.gif" alt="คลิ๊ก..สร้าง Glitter ด้วยตัวคุณเอง"/><br/>สร้าง Comment ง่ายๆ ด้วยตัวคุณเอง..คลิ๊กที่นี่</a>

http://i286.photobucket.com/albums/ll98/gu_sod/76.gif

กดเลยจร้า

โอ้ ขอบคุณมากมากค่ะ บล็อคจะสวยเทพกับเขาบ้าง ก็คราวนี้ละ ^^"

แต่งกล่องคอมเม้น

ทำหลังเที่ยงคืนเท่านั้น

2.จุดธูปไว้หัวนอน 3 ดอก

3.นอนหลับแล้วตั้งสมาธิให้ดี

4.นึกที่ที่เราจะไปเป็นอันดับแรก

5.กลั้นหายใจ 10 วินาที

6.จากนั้นคุณก้อจะไปในที่ที่คุณต้องการ

7.เมื่อคุณรู้สึกว่ากลิ่นธูปเริ่มหายไปให้มองหาแสงสีขาวแล้วเดินไป

8.ถ้าคุณกลับไปไม่ทันคุณจะกลับไปไม่ได้อีกเลย

9.ถ้าทำเกิน2ครั้งอายุของคุณจะสั้นครั้งละไป99วัน

คำเตือนผู้ใดที่อ่านแล้วต้องนำไปดพต่ออีก5ครั้งไม่งั้นอีก7วันต่อไปคุณจะมีอันเป็นไป

ทำหลังเที่ยงคืนเท่านั้น

2.จุดธูปไว้หัวนอน 3 ดอก

3.นอนหลับแล้วตั้งสมาธิให้ดี

4.นึกที่ที่เราจะไปเป็นอันดับแรก

5.กลั้นหายใจ 10 วินาที

6.จากนั้นคุณก้อจะไปในที่ที่คุณต้องการ

7.เมื่อคุณรู้สึกว่ากลิ่นธูปเริ่มหายไปให้มองหาแสงสีขาวแล้วเดินไป

8.ถ้าคุณกลับไปไม่ทันคุณจะกลับไปไม่ได้อีกเลย

9.ถ้าทำเกิน2ครั้งอายุของคุณจะสั้นครั้งละไป99วัน

คำเตือนผู้ใดที่อ่านแล้วต้องนำไปดพต่ออีก5ครั้งไม่งั้นอีก7วันต่อไปคุณจะมีอันเป็นไป

ขอบคุณมากมายในวิทยาทานค่ะ...นำไปใช้แล้วนะคะ...

จะพยายามทำตามนะคะ

ได้ยินชื่อมานาน เพิ่งเข้ามาดู เยี่ยมจริงๆๆ

คุณสิริพร ทิวะสิงห์แนะนำมาค่ะ ปู

มาชมเชยค่ะ...เอาไปใช้อีกแล้วค่ะ...อิๆๆๆ

ขอบคุณและขอนำไปใช้บ้างนะคะ

ขอบคุณครับที่แบ่งปัน

พบปัญหาการใช้งานกรุณาแจ้ง LINE ID @gotoknow
ClassStart
ระบบจัดการการเรียนการสอนผ่านอินเทอร์เน็ต
ทั้งเว็บทั้งแอปใช้งานฟรี
ClassStart Books
โครงการหนังสือจากคลาสสตาร์ท