โค้ด background ส่วน comment และส่วนฟอร์ม

โค้ด background ส่วน comment
ตัวอย่าง: ดูจากบล็อกนี้ที่เป็นพื้นด้านหลังของส่วน comment จะเห็นเป็นกระดาษสีครีม มีเส้นประสีฟ้า (โค้ดนี้ต้องเอาไปไว้ใส่ในส่วนของการตกแต่งบล็อก) ไฟล์รูป สีเส้น แบบเส้น ขนาดเส้น เปลี่ยนเองได้ตามใจชอบค่ะ

div.comment_item {
border: dashed 2px #A4D3EE;
background-image:url("http://gotoknow.org/file/sspdnong/Paper.jpg");
background-repeat:repeat}

โค้ด background ของฟอร์ม
ตัวอย่าง: ดูจากบล็อกนี้ที่เป็นพื้นด้านหลังของส่วนฟอร์ม เวลาคลิ๊ก popup เพื่อจะ comment จะเห็นเป็นรูปดอกไม้สีฟ้า มีขอบจุดๆ สีฟ้า (โค้ดนี้ต้องเอาไปไว้ใส่ในส่วนของการตกแต่งบล็อก) ไฟล์รูป สีเส้น แบบเส้น ขนาดเส้น เปลี่ยนเองได้ตามใจชอบค่ะ

form{border: dotted 2px #259BC7;
background-image:url("http://gotoknow.org/file/sspdnong/blue-background.jpg");
background-repeat:repeat}

คำสั่งเส้นชนิดต่างๆ พร้อมตัวอย่าง ให้ไว้เพื่อไปแก้ใช้เอง
{border: dashed} - - - - - - - - - - -
{border: dotted} ........................
{border: solid} __________
{border: double} =========

หมายเหตุ:
* ที่เห็น code เขียนว่า 2px คือเส้นขนาด 2 pixels อยากให้ใหญ่ก็ใส่ตัวเลขเพิ่มขึ้น อยากให้เล็กก็ใส่ตัวเลขลดลง
* #000000 คือตัวค่าสี สามารถเปลี่ยนเป็นสีที่ต้องการได้โดยดูจากชาร์ตที่ทำไว้ให้ในบันทึกโค้ดสีเพื่อการตกแต่งบล็อก

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

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

เขียนใน GotoKnow โดย Little Jazz
ใน Little Theme

คำสำคัญ (Tags): #background#comment#css#form#โค้ด

หมายเลขบันทึก: 102502เขียนเมื่อ 11 มิถุนายน 2007 16:32 น. ()แก้ไขเมื่อ 20 มิถุนายน 2012 22:34 น. ()สัญญาอนุญาต: จำนวนที่อ่าน

ความเห็น (46)

Sasinand

เขียนเมื่อ 11 มิถุนายน 2007 17:24 น. ()

สวัสดีค่ะ

ขอบคุณค่ะ

นำไปใช้แล้วค่ะ

สีฟ้าตามตัวอย่างเลย ชอบสีฟ้า

และฟ้า +น้ำตาลไหม้เข้ากันพอดีเลยกับพื้นหลัง

ทำเองไม่ได้หรอกค่ะ แต่พอใช้โปรแกรมที่ทำมาดีแล้ว เป็นค่ะ

กมลวัลย์

เขียนเมื่อ 11 มิถุนายน 2007 20:42 น. ()

สวัสดีค่ะ คุณLittle Jazz \(^o^)/

ดิฉันเสียอีกต้องขอบคุณหลายๆ ที่เขียน code ให้พวกเราได้ใช้ ^ ^

แค่เปลี่ยนสีหรือเปลี่ยนรูปแบคกราวน์เท่านั้น walla! อย่างกับบะหมี่สำเร็จรูปเลย...เพียงเติมน้ำร้อน 5555 รู้สึกว่าตัวเองขี้เกียจยังไงชอบกล ^ ^

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

ขอบคุณอีกครั้งนะคะ...

อิอิ..เราตาไว เห็นแล้วนะว่าเคอร์เซอร์กลายเป็นหนูน้อยนุ่งกระโปรงน่ารัก.... ^ ^

พิชัย กรรณกุลสุนทร

เขียนเมื่อ 11 มิถุนายน 2007 21:51 น. ()

สวัสดีครับคุณ little Jazz

ติดใจอ่านบันทึกนี้นี้มานานแล้ว แต่ไม่ได้มีส่วนร่วมอะไร เพราะมัวแต่อ่าน อ่าน อ่าน และนึกชอบใจอยู่ในใจตามประสาคนคอศิลปะเดียวกัน

ชอบใจว่าช่างมีไอเดียและมีน้ำใจเผื่อแผ่

ผมเองอยากตกแต่งธีมบันทึกของคนเองบ้าง เข้าไปเห็นตั้งแต่ธีม ดาวประดับใจก็อยากได้(แต่อยากได้ไม่เหมือนใคร)

เลยวานรบกวนขอคุณ little Jazz (เสียดื้อๆ) ว่าช่วยออกแบบธีมให้ผมหน่อย เอาตามสไตล์ของคุณแต่มีบุคลิกผม(พูดง่ายๆ) ไม่ทราบว่าจะรบกวนเกินไปไหม?

หากตกลง จะเชิญมาแอ่วเจียงใหม่บ้าง จะชวนบรรยายให้นศ.ศิลปะฟังแล้ว จะพาไปกินของลำๆคนเมือง อยากกินอะไรก็บอกได้(ติดสินบนซะงั้น?) :)

ขจิต ฝอยทอง

เขียนเมื่อ 11 มิถุนายน 2007 22:10 น. ()

ตามมาดู
ว่างๆๆจะเอาไปใช้บ้าง
ขอบคุณครับผม

Little Jazz