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

Background

บทความนี้จะสอนให้ตกแต่งพื้นหลังของ 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;
}


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

ตอนนี้มีความคิดเห็น : 19 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ขอบคุณมากครับ ชัดเลยทีนี้...

  1. ถ้าเกิดว่าต้องการให้เป็นแค่ภาพเดียวไม่มีการTileต้องทำยังไงน่ะครับ เพราะที่Blogของผมมันเป็นแบบTileอะครับ ถ้าเลือกพิกัดมันก็ได้แค่ภาพเล็กๆ มันไม่ยอมใหญ่น่ะครับ พอเพิ่มขนาดเป็น1600*900มันก็ยังย่อให้เหลือเท่าเดิมเลยครับ ขอบคุณมากครับ

    body {
    font: $(body.font);
    color: $(body.text.color);
    background-image: url(http://lh5.ggpht.com/_EYq7aopFBcY/THd1qR5s8CI/AAAAAAAAABo/kxyR8DVjvew/ACE.jpg) ;
    background-attachment: fixed;

  1. หวัดดีค่ะอ.hack เห็นหายเงียบไปนานไม่ได้ไปไหนหรอกค่ะก็ยังวนเวียนแถวๆๆนี่แหละ ^__^
    ปรับแต่งบล๊อคไปเรื่อยๆค่ะ ตอนนี้เพิ่งจะเปลี่ยน blackground โดยนำโค้ดมาจากเว็บหนึ่ง แต่พอเปลี่ยนแล้วเมื่อเวลาที่เราเปิดเมนูใหม่ขึ้นมา หรือเปิดบล๊อคของเราขึ้นมา สีพื้นของหน้าบล๊อคมันจะขึ้นเป็นสีธีมก่อนค่ะ ต้องรอโหลดสักพักรูปถึงจะขึ้น ไม่อยากให้เป็นอย่างนั้น เท่าที่ดูจากบล๊อคอื่นที่เค้าใช้blackground จากเว็บเดียวกัน เวลาเปิดหน้าบล๊อคหรือเปลี่ยนหน้าใหม่บล๊อคของเขาจะขึ้นรูป blackground ขึ้นมาเลย ไม่มีสีธีมขึ้นมาก่อน อยากแก้ให้เป็นแบบนั้นค่ะ อ.hack พอจะมีคำแนะนำมั้ย แม่แบบที่ใช้บังคับให้เลือกสีธีมด้วย หาวิธีแก้ไม่ได้จริงๆ ช่วยหน่อยนะค่ะ T__T

  1. @ คุณ Joy : พอดีว่าตอนนี้ผมแข่งขัน SEO อยู่เลยไม่ค่อยว่างเข้ามาบล็อกนี้เท่าไหร่ครับ

    ปัญหานี้เกิดจากรูปมีขนาดไฟล์ใหญ่เกินไปครับจึงโหลดได้ช้า ควรบันทึกรูปให้เป็นไฟล์ jpeg หรือ gif เพื่อให้โหลดได้เร็วขึ้นครับผม

    อีกอย่างหนึ่งที่มีส่วนคือ host ที่เราฝากรูปเอาไว้ครับ

  1. สวัสดีครับ
    ถ้ารูปเราเป็น สกุล bmp จะแก้ไขให้เป็น jpeg หรือ gif ได้หรือป่าวครับ

  1. @ ขจรลาภ : เปลี่ยนได้ครับ อาจจะใช้ Photoshop หรือโปรแกรม right click image converter ก็ง่ายดีครับ
    right click image converter หาได้จาก Google ได้เลยครับ

  1. ขอบคุณครับ

  1. ถ้าอยากจะเปลี่ยน bg ตรงส่วนด้านใน ที่เป็นตัวบทความหล่ะคะ ต้องทำไง ขอบคุณคะ

  1. @ polo : ใช้วิธีตามบทความนี้ครับ
    http://www.hackublog.com/2010/05/different-textstyle-in-your-post.html

  1. มันไม่เปลี่ยนให้อ่ะค่ะ
    ใช้โคดอันนี้ถุกไหมค่ะ
    body {
    background-image: url(http://upic.me/show/20346795 ) ;
    background-repeat: repeat ;
    }

  1. @~✖lด็กสOeดาว✖~ : โค้ดไม่ถูกครับ ใช้โค้ด


    body {
    background-image: url(http://upic.me/i/xu/cat_3.jpg) ;
    background-repeat: repeat ;
    }

    ผมแนะนำให้ฝากรูปไว้บนบล้อกเราเองดีกว่าครับ จะได้ไม่โดนลบรูป (วิธีหาจากสารบัญครับ)

  1. อยากจะให้backgroundg เป็นแบบภาพเดียวใหญ่ๆเลยค่ะ
    ตอนนี้ที่ทำเสร็จมันยังเป็นภาพเล็กหลายๆภาพอยู่ค่ะ
    มีธีแก้ไขไหมค่ะ

  1. @~✖lด็กสOeดาว✖~ : ให้ใช้โค้ดในข้อ 7 และใช้รูปภาพขนาดพอดีกับหน้าจอ ประมาณ 960x800 หรือ 1024x800 ครับ

  1. น้องใหม่คับรายงานตัวคับ (รับลูกศิษย์มั้ยคับ)อยากเปงจังเลย

  1. อีกเรื่องคับทำหนังสือขายมั้ยผมจะได้อุดหนุน

  1. ผมมีโค้ด blogger แบบนี้อะ ครับ ยากใส่ รูป background ทั้ง 2 ข้างอะ ครับ

    ต้องนำ html รูปมาใส่ ตรงใหน อะ ครับ

  1. อยากทำปุ่มกดไลค์ในบล็อกทำไงค่ะมือใหม่ค่ะ

  1. ผมหาโค้ดตามหัวข้อที่ 2 ไม่เจอ วันแสดงผลเยอะมาก แต่ค้นหา คำ หรือ ข้อความ หรือ โค้ดนั้นไม่เจอ มีภาพลักษณะหรือตำแหน่งไหม่ครับ เผื่อพอจะมองภาพออก

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel