Jennessa's Blog: แต่งบลอคง่าย ๆ ด้วยตัวคุณเอง

ความเดิมตอนที่แล้ว พูดถึง การใส่สีสันให้กับปุ่มกดในช่องใส่ comment นะคะ แต่ว่ายังเขียนไม่หมด แบ่งออกมาเป็นอีกตอนนึง ซึ่งนี่คงจะเป็นตอนสุดท้ายของซีรี่ส์นี้แล้วค่ะ (พูดยังก๊ะหนังเกาหลี 55)

ตอนนี้ก็ยังเกี่ยวกับปุ่มกดเหมือนกันค่ะ (เบื่อกันรึยัง :D) ไปดูกันเลยค่ะ

1. ใส่ background ให้กับปุ่มกด โดยไปที่ แก้ CSS ด้วยตัวเอง แล้วหาคำว่า input ค่ะ ดังข้างล่าง

input{
font:11px Tahoma,"MS Sans Serif";
border: 1px solid;
background-image: url(http://jennessa.exteen.com/images/bck-234.gif);
}

เพิ่มตรง background-image เข้าไปค่ะ แล้วใส่ url ของรูปที่ต้องการใช้เป็น background เข้าไปตรงที่ไฮไลท์ไว้นะคะ ดูวิธีการเอา url ของรูปได้ที่นี่ค่ะ Click

ตัวอย่างปุ่มที่ใส่ BG แล้ว ---->

.

2. ใส่พื้นหลังเป็นแบบไล่สี โดยไปที่ แก้ที่ input เหมือนเดิมค่ะ แล้วเพิ่ม code เข้าไปดังข้างล่างค่ะ

input{
font:11px Tahoma,"MS Sans Serif";
border: 1px solid;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr='#ffffff',EndColorStr='#ffcccc');
}

StartColorStr คือสีเริ่มต้น และ EndColorStr คือสีสุดท้ายค่ะ ไล่จากบนลงล่าง จากตัวอย่างเจนเนสซ่าใส่สีเริ่มต้นเป็นสีขาว สีสุดท้ายเป็นสีชมพู พื้นปุ่มมันก็จะเป็นพื้นสีไล่จากขาวมาชมพูค่ะ

ตัวอย่างปุ่มที่ไล่สีแล้ว

*** การแก้ที่ input จะทำให้ช่องที่ไว้ใส่ชื่อ กับ url ของผู้คอมเมนต์เปลี่ยนไปตามปุ่มด้วยนะคะ

จบแล้วค่า สำหรับการใส่ลูกเล่นให้ช่อง comment มีทั้งหมด 4 ตอน สามารถกลับไปดูตอนที่แล้วได้นะคะ ดังนี้