มาใส่รูปและสี Background ข้างหลัง Blog กัน
Posted on 21/4/2006 by hoho in BlogKa || 0 comments
ที่ BlogKa.com นีเราสามารถแก้ไข Template หรือหน้าตาของ Blog เราได้เองนะ โดยเป็น CSS Template
ถ้าใครทำเว็บเป็นมาก่อนละก็ จะเพิ่มหรือลบอะไรก็หมูมากๆเลย ใช้ html ได้เลย แนะนำให้ใช้ template minimal ก่อนเพราะจะแก้ไขง่าย
แต่คนที่ไม่เป็นก็ไม่ต้องกลัว ง่ายมากครับ
เริ่มแก้ไข Template
1. Upload รูปที่เราต้องการจะใช้เป็นฉากหลังเข้าไปก่อน แล้ว copy link ที่ได้ออกมา
2. แก้ไข Template โดยกดที่ ชื่อ Blog ของเรา หรือที่คำว่าแก้ไข แล้วเลือกเมนูด้านบนที่เขียนว่า Template แล้วเลือกแก้ไข Template
ชื่อ Blog หรือ แก้ไข >> Template >> แก้ไข Template
เอา mouse คลิ๊กแล้วกด ctrl+a แล้วคลิ๊กขวา copy ข้อความทั้งหมดไว้ก่อน แล้วเอาไปแปะใน notepad เพื่อสำรองข้อมูลไว้ก่อนแก้ไข
3. หาคำว่า body{ ... } ระหว่างคำว่า (ปกติจะอยู่บนสุด)
4. เติมข้อความแสดงภาำำพ background ลงไประหว่าง body{ ... } ดังนี้
background:url(URL ที่ copy มา) no-repeat fixed;
เช่น
body{
background:url(http://www.blogka.com/uploads/h/hoho/9.jpg) no-repeat fixed;
margin:0;
font: 10pt/14pt 'Lucida Grande', Verdana, Helvetica, sans-serif;
}
เราก็จะได้รูป background อยู่ด้านหลังชิดมุมบนซ้ายแล้ว โดยทีเลื่อนอ่าน blog รูปก็ยังกับที่
ถ้าไม่ต้องการให้อยู่กับที่ก็เอา fixed ออก
background:url(http://www.blogka.com/uploads/h/hoho/9.jpg) no-repeat;
ต้องการให้ชิดมุมต่างๆ
ก็เติมข้อความนี้เข้าไป
ชิดบนซ้าย top left
ชิดบนกลาง top center
ชิดบนขวา top right
ชิดล่างซ้าย bottom left
ชิดล่างกลาง bottom center
ชิดล่างขวา bottom right
background:url(http://www.blogka.com/uploads/h/hoho/9.jpg) no-repeat bottom right fixed;
ใส่สีข้างหลัง Blog
ก็เติมค่าสี หรือชื่อสี red green blue white black ลงไป
ตัวอย่างใส่สีแดง
background:url(http://www.blogka.com/uploads/h/hoho/9.jpg) #FF0000 no-repeat top center fixed;
หรือ
background:url(http://www.blogka.com/uploads/h/hoho/9.jpg) red no-repeat top center fixed;
สุดท้ายก็ได้แบบนี้ แบบ http://admin.blogka.com
body{
background:url(http://www.blogka.com/uploads/h/hoho/9.jpg) #FFFFFF no-repeat bottom right fixed;
margin:0;
font: 10pt/14pt 'Lucida Grande', Verdana, Helvetica, sans-serif;
}
ลองแก้ไขดูนะครับ ไม่ยาก แต่ต้อง backup ไว้ก่อนเสมอนะครับ
