Blog ในแบบของเรา : การเปลี่ยนพื้นหลังของ blog





การทำ bloggang ให้เป็นตัวของตัวเอง: เปลี่ยนพื้นหลังของ blog




พื้นหลังหรือ background นั้นมีหลายแห่งที่เปลี่ยนได้ครับ ได้แก่ พื้นหลังของทั้ง blog ในช่องใส่ข้อความ (text area) หรือแม้แต่ เราจะสร้างตารางขึ้นมาแล้วใส่สี ใส่ภาพลงไปก็ได้คับ นอกจากนี้หลักการนี้ยังใช้กับกรณีของการทำกรอบที่ลบมุม (round corner table) ด้วยครับ


การเปลี่ยนพื้นหลังของ blog



การใช้ภาพเป็นพื้นหลัง

หากต้องการเป็นภาพ ต้องไปหาภาพที่ต้องการ แล้วไปเก็บไว้ใน host พร้อมทั้งเอา url ที่จะใช้มาครับ สำหรับคำสั่งเปลี่ยนพื้นหลังของ blog มีดังนี้ครับ



มาดูทีละคำสั่งเหมือนเดิมครับ
background-image: ...; คำสั่งนี้เป็นคำสั่งแทรกภาพที่จะใช้เป็น background ภาพที่ใช้ หากมีขนาดใหญ่มาก ๆ ก็จะทำให้ล้นจอครับ ควรเลือกภาพที่มีขนาดเล็กกว่าจอโดยทั่วไป ได้แก่ 1028x768 pixel ครับ หรือถ้าเล็ก ๆ กว่านั้น ก็อาจจะใช้ได้ โดยใส่คำสั่ง repeat ให้มันซ้ำ ๆ ไปเอง

backgroud-repeat: ...; คำสั่งนี้ใช้เมื่อภาพมีขนาดเล็ก ๆ ครับ โดยจะทำให้ภาพมันมากขึ้นและเรียงซ้อนกันจนเต็มจอไปเอง ถ้าเป็นใน window ก็จะเหมือนคำสั่ง tile เวลาเราเอาภาพเล็ก ๆ มาทำเป็น background น่ะครับ โดยเราจะเลือก repeat และกรณีที่เราใช้ภาพใหญ่ ก็ระบุไปว่า no-repeat โปรดสังเกตว่ามี hyphen (-) ตามหลังด้วยนะครับ ไม่เหมือนกับการใช้ tag html ทั่วไป

background-position: ...; คำสั่งนี้ ใช้ระบุตำแหน่งที่เริ่มว่าง background ครับ มีหลายแบบให้เลือก ก็ตามตำแหน่งล่ะครับ เช่น top left, top right, bottom left, bottom right, right middle, top อะไรแบบนี้ครับ แต่ว่า คำสั่งเหล่านี้ จะไม่มีประโยชน์เมื่อ
  • ภาพใหญ่เต็มจอ เรียงตรงไหนก็เหมือนกัน
  • สั่งให้ภาพเล็ก แต่ repeat ก็จะได้ผล same same ล่ะครับ

background-color: ...; ก็ไว้สำหรับว่า หากภาพที่คุณใส่มามันเล็ก และไม่ได้สั่ง repeat ก็จะได้เห็นสีที่ต้องการ เวลาใส่ อาจจะใส่เป็น code สีหรือว่าเป็นชื่อสีก็ได้ครับ ตามใจชอบ สำหรับเรื่องสี เดี๋ยวจะมาว่ากันอีกทีนะครับ

background-attachment: ...; กรณีที่ไม่ได้สั่งคำสั่งนี้ไว้เลยภาพที่มีจะเลื่อนไปเวลาที่เรา move scrooll bar ขึ้นลงครับ เมื่อเราใส่คำสั่ง background-attachment: fixed ไว้ ภาพที่ได้ก็จะไม่เลื่อนตามเวลาขึ้นลงครับ สรุปว่า ถ้าต้องการให้เลื่อนได้ ไม่ต้องใส่คำสั่งนี้นะครับให้ลบออกเลย
ที่ต้องทำก็แค่ copy ทั้งคำสั่งไปวางไว้ในช่อง profile หรือในช่อง slogan ก็ได้ครับ ที่เดียวพอ สำหรับ background แบบอันเล็ก ๆ เรียงต่อกันหาตัวอย่างได้จาก google เลยครับ ใน blog ผมก็มี link นิดหน่อยครับ

หมายเหตุ สังเกตดี ๆ นะครับ เวลาที่เราไม่ต้องการคำสั่งไหน ก็เอาออกทั้งคำสั่งได้เลยครับ และ 1 คำสั่ง ประกอบด้วย backgroung-something: ...; นะครับ คือ ขึ้นต้นด้วยคำสั่งเลย และลงท้ายด้วย ; (เค้าเรียก semicolon หรือ colon ละหว่า?? น่าจะ semicolon นะครับ เพราะมี . เดียวด้านบน เหอ เหอ) ส่วนคำสั่งสุดท้ายก่อนปีกกา } เนี่ยต้องมี ; นำหน้าครับ

การใช้สีเป็นพื้นหลัง

ก็ใช้คำสั่งคล้าย ๆ เดิมล่ะครับ ไม่ได้ยากอะไร



แค่นี้ล่ะครับ

หากต้องการ effect ทำ backgroud ให้มี gradient ของสีก็ทำได้โดยใช้คำสั่งนี้ครับ

สีที่ต้องการจะอยู่ด้านล่างของหน้า',start color str='สีที่ต้องการไว้บนสุดของหน้า'gradeintType='0';">


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



[สมุดเยี่ยม]











Create Date : 30 มิถุนายน 2548
Last Update : 3 ธันวาคม 2549 0:10:36 น.
Counter : 2163 Pageviews.

16 comments
อุทยานแห่งชาติ รามคำแหง พายุสุริยะ
(7 ม.ค. 2564 18:02:14 น.)
4 วัน 3 คืน เที่ยวกระบี่ ดินแดนแห่งธรรมชาติจากผืนป่าสู่ท้องทะเลงาม (ตอนที่ 4: ทัวร์สี่เกาะ+ทะเลแหวก) เจ้าสำนักคันฉ่องวารี
(12 ม.ค. 2564 22:12:33 น.)
Food For Fun : Hot Work Misson #55 อาหารผู้สูงอายุ คนผ่านทางมาเจอ
(11 ม.ค. 2564 18:46:09 น.)
✿ ✿ Food For Fun :: Hot Wok Return #55 :: อาหารผู้สูงวัย "แกงจืดผักกาดขาวม้วนไส้หมูสับ" ✿ ✿ เนินน้ำ
(12 ม.ค. 2564 08:30:50 น.)
  
ได้ความรู้ดีคะ

อยากรู้ว่า การใส่ Bullet ในแต่ละหัวข้อแบบให้เหมือนกัน เวลาใส่ไปแล้วมันมีกรอบ ทำอย่างไรให้กรอบนั้นหายไปคะ

แล้วก็เวลาใส่ภาพในช่องคอมเม้นท์ เอาโค้ดไปไว้ในส่วนได้คะ คือมีโค้ดแต่ไม่รู้จะเอาไปไว้ตรงไหนอะคะ

ขอบคุณคะ
โดย: Angel Tanya วันที่: 30 มิถุนายน 2548 เวลา:3:00:20 น.
  
ช่วยกรุณา แนะนำเรื่องของ ฉากหลัง แบบนิ่ง ๆ อยู่กับที่ด้วยซิจ๊ะ แบบ ที่ตัวหนังสือเลื่อนไปแล้ว Background ยังอยู่กับที่อ่ะคะ
ช่วยหน่อยนะคะ ขอบคุรก๊าป
โดย: crazy lady thai (tukata001 ) วันที่: 30 มิถุนายน 2548 เวลา:3:03:03 น.
  
จัดการให้แล้วนะครับ ตามสั่ง พอดีพิมพ์ตกไปเพราะของผมไม่ได้ใช้แบบ fixed น่ะครับ
โดย: dont wanna no วันที่: 30 มิถุนายน 2548 เวลา:3:20:56 น.
  
อรุณสวัสดิ์ค่ะ ^^




...
โดย: ขอบคุณที่รักกัน (blueberry_cpie ) วันที่: 30 มิถุนายน 2548 เวลา:6:26:33 น.
  
แหะ ๆ เพิ่งไปอ่านเจอที่ไปตอบไว้ให้นะคะ
ขอบคุณนะคะ
ไว้ถ้าวันไหนขยัน ๆ จะลองทำตามที่แนะนำนะคะ
แล้วจะตามมาอ่านบ่อย ๆ จ๊า...
โดย: Angel Tanya วันที่: 9 กรกฎาคม 2548 เวลา:5:31:31 น.
  
ครับผม ยินดีครับ
โดย: dont no (dont log in) IP: 61.90.18.203 วันที่: 9 กรกฎาคม 2548 เวลา:11:38:59 น.
  
วันนี้มาเรื่อง background ค่ะ จะได้ไปขยายให้เพื่อนๆอีก ป้ามดให้เครดิตคุณอยู่แล้ว ยกให้เป็นจานวิ่งมาถามเป็นประจำ
โดย: ป้ามด วันที่: 20 กรกฎาคม 2548 เวลา:18:46:26 น.
  
วันนี้ยังนั่งตรงนี้ค่ะ
โดย: ป้ามด วันที่: 22 กรกฎาคม 2548 เวลา:7:48:48 น.
  
ขอบคุณมากคะ อธิบายได้เข้าใจง่าย เห็นภาพชัดเจนเลยคะ
โดย: beautyswan วันที่: 3 สิงหาคม 2548 เวลา:3:39:28 น.
  
ขอบคุณค่ะ สำหรับความรู้เรื่อง BG จะเอาไปลองใช้ดูนะคะ
โดย: clarinet วันที่: 11 กันยายน 2548 เวลา:18:27:02 น.
  
อันนี้ง่ายหน่อยค่ะ พอเล่นได้ขอบคุณค่ะ
โดย: ป่ามืด วันที่: 13 กันยายน 2548 เวลา:0:03:04 น.
  
มาอ่านเอาไปใช้อีกรอบครับ
โดย: เงือกลม วันที่: 28 กันยายน 2548 เวลา:9:46:33 น.
  
ยังงัยก้อยังทำมะเปนอ่ะ
โดย: s_manavvan IP: 203.146.216.21 วันที่: 26 ตุลาคม 2548 เวลา:14:29:18 น.
  
จะพยายามนำไปใช้ แต่ไม่ทราบว่าจะสำเร็จหรือป่าว
ถ้าไม่ได้ต้องทำไงค่ะ
โดย: ขึ้น15ค่ำ (ขึ้น15ค่ำ ) วันที่: 14 กุมภาพันธ์ 2550 เวลา:14:21:38 น.
  
สวัสดีค่ะเป็นคนแก่ที่เพิ่งเข้ามาหัดทำบล๊อกแบบ งง ไม่รู้อะไรเลย เพราะถามเจ้าพวกตัวแสบก็ไม่สามารถบอกให้เข้าใจ สงสัยสมองตัวเองจะรับไม่ได้มั้ง แต่ก็จะต้องหัดให้ได้เลยต้องรบกวนถามคุณค่ะ ก่อนอื่นก็ขอบคุณที่โพสต์เรื่องราวไว้เป็นความรู้ แต่อ่านแล้วยังไม่เข้าใจค่ะ คือว่า อย่างจะเปลี่ยน background นี่ เราอยู่ในหน้าปรับแต่ง webblog ใช่ไหมค่ะ แล้วเราคลิกเลือกรูปจากที่เก็บไว้ในเครื่อง แล้วทำไงต่อ code หรือ url ดูจากตรงไหน เอามาใส่ที่ไหนของหน้าที่เราเปิดอยู่ เอาแค่นี้ก่อนค่ะ ถามเอง งงเองเหมือนกัน ช่วยหน่อยค่ะขอบคุณ
โดย: i'm jaya วันที่: 21 ตุลาคม 2550 เวลา:4:12:48 น.
  
อยากทราบว่าทำยังไงให้บีจีเป็นสีทูโทนแบบป้ามดคะ คือป้าเค้าไม่ว่างอ่ะค่ะ ไม่อยู่บ้าน ไงคุณด้อนอนุเคราะห์ด้วยนะคะ ขอบคุณค่ะ
โดย: AmANiYA วันที่: 23 พฤศจิกายน 2550 เวลา:15:08:55 น.
ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
 *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 

Dontno-trips-confused.BlogGang.com

dont wanna no
Location :
  

[ดู Profile ทั้งหมด]
 ผู้ติดตามบล็อก : 2 คน [?]