วิธีเปลี่ยน background ของ blogger

บทความนี้จะสอนให้ตกแต่งพื้นหลังของ template ด้วยภาพที่คุณชื่นชอบ ซึ่งเพื่อความชัดเจนอาจจะสอนยาวสักหน่อย ขอเข้าเรื่องเลยครับผม

ขั้นตอนการเปลี่ยน

1. เตรียมภาพที่ต้องการทำเป็นพื้นหลังและ นำไปฝากไว้ที่ free file host ที่รู้จักเช่น

http://upic.me
http://www.sigmirror.com

เป็นต้น และเมื่อฝากภาพเสร็จแล้วให้คัดลอก URL ของภาพเก็บไว้ก่อน

2. loggin เข้า blogger >> ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ค้นหาโค้ด (กด Ctrl+F ช่วยค้นหา)

body {
background: ***ตรงนี้แต่ละคนอาจเจอโค้ดไม่เหมือนกัน*** ;
}

โค้ดนี้จะเป็น CSS โค้ดที่บอกภาพที่จะใช้เป็นพื้นหลัง

3. กรณีที่ใครต้องการใส่สีที่ต้องการ (ไม่ใช้ภาพ) เป็นพื้นหลังก็ให้เปลี่ยนโค้ดเป็น

body {
background-color:ใส่โค้สีที่ต้องการ;
}

เช่น ถ้าต้องการให้พื้นหลังเป็นสีเทาก็แก้เป็น

body {
background-color: #AAAAAA ;
}

แล้วทำการแสดงตัวอย่างดูก่อนว่าพึงพอใจหรือไม่ ถ้าชอบแล้วก็บันทึกจบขั้นตอนครับ

4. กรณีที่ต้องการใส่ภาพที่มีขนาดพอดีกับ template ก็ให้ใช้โค้ดนี้ครับ

body {
background-image: url( URL ของรูปจากข้อ 1 ) ;
}


5. กรณีที่ต้องการใส่รูปที่มีขนาดเล็กกว่า template อาจใช้โค้ดใดโค้ดหนึ่งต่อไปนี้

5.1 โค้ดนี้แปลว่าให้ภาพมีการปรากฎซ้ำๆ จนพอดีกับ template ครับ

body {
background-image: url( URL ของรูปจากข้อ 1 ) ;
background-repeat: repeat ;
}


5.2 โค้ดนี้แปลว่าให้ภาพมีการปรากฎซ้ำๆ ตามแนวนอน จนพอดีกับ template ครับ

body {
background-image: url( URL ของรูปจากข้อ 1 ) ;
background-repeat: repeat-x ;
}

5.3 โค้ดนี้แปลว่าให้ภาพมีการปรากฎซ้ำๆ ตามแนวตั้ง จนพอดีกับ template ครับ

body {
background-image: url( URL ของรูปจากข้อ 1 ) ;
background-repeat: repeat-y ;
}


6. กรณีที่ต้องการกำหนดตำแหน่งตายตัวก็ให้เพิ่มโค้ดต่อไปนี้เพิ่มเข้าไปครับ

body {
background-image: url( URL ของรูปจากข้อ 1 );
background-position: top left;
}

ซึ่งตำแหน่งที่กำหนดสามารถปรับเปลี่ยนโค้ดสีแดงด้วยโค้ดต่อไปนี้ตามความต้องการครับ

top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;

แต่ถ้าไม่ต้องการตำแหน่งข้างต้นอาจใช้โค้ดจัดแนวตามแกน x และ แกน y ดังนี้

body {
background-image: url( URL ของรูปจากข้อ 1 );
background-position: x% y% ;
}

หรือ

body {
background-image: url( URL ของรูปจากข้อ 1 );
background-position: x px y px ;
}


7. และถ้าหากต้องการให้พื้นหลังอยู่กับที่ไม่เคลื่อนที่ตามการเลื่อนของหน้าบล็อก ก็ให้เพิ่มโค้ด

background-attachment: fixed;

เพิ่มลงไปซึ่งจะได้เป็น

body {
background-color: #AAAAAA;
background-image: url(URL ของรูปจากข้อ 1);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}

โค้ดสีแดงสามารถปรับเปลี่ยนได้ตามความต้องการตามที่ได้กล่าวมาครับ

หมายเหตุ บางครั้งโค้ดเหล่านี้อาจถูกเขียนรวมกันเป็นบรรทัดเดียว เช่น จากโค้ดในข้อ 7. เขียนใหม่เป็น

body {
background-color: #AAAAAA;
background-image: url(URL ของรูปจากข้อ 1) no-repeat center center fixed;
}

หากอ่านแล้วยังมีข้อสงสัยอยู่สอบถามที่กล่องความคิดเห็นด้านล่างได้เลยครับผม