วันเสาร์ที่ 27 มิถุนายน พ.ศ. 2552


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

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

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

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

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

1 ความคิดเห็น:

ไม่ระบุชื่อ กล่าวว่า...

ขอบคุณมากมายค่ะ และขออนุญาตนำไปใช้ 1 กล่องค่ะ

แสดงความคิดเห็น

 

BLOGSDESING FOR YOU | Copyright 2009 Tüm Hakları Saklıdır | Blogger Template by GoogleBoy ve anakafa | Sponsored by Noow!