ทำตัววิ่งบน blog เผื่อว่า อ. ฐิติพร จะสนใจ   »   Emma Watson will enter Brown University - Erin Andrews video peep - Tour de france stage 17 results - So you think you can dance results july 23 - Michael Jackson Memorial Booklet Program ทั้งแบบตัววิ่งและเป็น link

วันอังคารที่ 3 พฤศจิกายน พ.ศ. 2552

เรื่องที่ 19.ทำภาพพื้นหลัง (background) ใน blog



ทำภาพพื้นหลัง หรือ background

นักเรียนคงสังเกตุว่า blog วิชามีรูปพื้นหลัง หน้าตาเป็นเครื่องคอมพิวเตอร์ครับ
นี้ก็เป็นงานที่เราจะทำในเรื่องนี้ครับ

ก่อนเริ่ม ต้องมีรูปที่จะทำ background จาก website ก่อนนะครับ
อย่างรูปที่ผมใช้มาจาก http://image.fg-a.com/0_bk_5.gif ครับ


1. ที่หน้า blog ก็ click ไปที่  "ปรับแต่ง" (บนขวา ครับ)
2. ต่อที่ "แก้ไข HTML" ครับ
3. ปกติ การแก้ไข HTML อาจสร้างอันตรายต่อ blog ทั้ง blog ได้ จึงนิยมบันทึกตัวต้นฉบับไว้ก่อน โดยเลือก "ดาวน์โหลดแม่แบบฉบับเต็ม"
4. แต่ที่เราจะแก้ไข เป็นเพียงจุดเล็ก ๆ คงไม่สร้างอันตรายอะไร ก็จะข้ามกันบันทึกตัวต้นฉบับไปก็ได้ครับ
5.กด Ctrl+F เพื่อค้นหาคำสั่งว่า "background:$bgcolor"    ครับ

เมื่อเจอแล้ว ก็พิมพ์ค่า (จะ copy มาก็ไวดีครับ) URL ที่มี รูป ที่จะนำมาใส่ background




งานมีแค่นี้เอง แต่ .... แต่ อย่าเพิ่ง click คำสั่ง "บันทึกแม่แบบ" นะ... click ปุ่ม "แสดงตัวอย่าง" ก่อนนะ เกิดการเปลี่ยนแปลง
ที่ต้องการหรือเปล่า
หากมีปัญหา ให้เลือก "ล้างข้อมูลการแก้ไข" ก็จะคืน HTML code กลับไปสู่สภาพก่อนหน้าจะพิมพ์เพิ่มเติม แล้วลองแก้ไขใหม่

โชคดีครับ

11 ความคิดเห็น:

  1. ลองทำแล้วนะคะ ตอนแรกหา background.... ที่อาจารย์ว่าไม่เจอค่ะ
    เลยเปลี่ยน template ใหม่ แล้วเจอ แต่ก็มีปัญหา หลังจากใส่ background ใหม่
    แล้วไม่มันสวยอ่ะค่ะ เดี๋ยวจะลองปรับปรุงแก้ไขต่อไปนะคะ

    ตอบลบ
  2. อาจารย์ค่ะ ปูทำแล้วนะคะ แต่เหมือนกันบล็อกปูมันจะไม่ transparency ค่ะ มันเลยไม่เห็น background ที่เปลี่ยนค่ะ จะเห็นแต่ขอบด้านข้างค่ะ แล้วก็ปูปรับแก้ไข shoutbox แล้วนะคะ

    ตอบลบ
  3. เปลี่ยน background ใหม่แล้วค่ะ ยังไม่ค่อยถูกใจเท่าไหร่
    จะพยายามค้นหาต่อไปค่ะ

    ตอบลบ
  4. อาจารย์ค่ะ ปูปรับcode อีกรอบนะคะ ลองแวะไปดูด้วยค่ะ

    ทีแรกจะเปลี่ยน template ใหม่เลย มันฟ้องว่า gadget ที่มีอยู่จะหายหมดเลยต้องเปลี่ยนใจค่ะ ขี้เกียจทำใหม่

    ตอบลบ
  5. เพิ่งแวะไป เห็นแต่ pooka ครับ ทำไงดี

    ตอบลบ
  6. หลาย ๆ ครั้งที่ผมทำโปรแกรมอยู่ ใช้เวลากับมันนานถึงนานมาก ที่จริงงานก็เสร็จแล้ว แต่ในใจคิดว่า ขออีกนิดหนึ่ง อีกนิดนึง แล้วเจ้า นิดนึงที่ว่า มันก็ทำให้โปรแกรมผมหายไปต่อหน้าต่อตา
    หวังว่า ปัญหาของ อ. ปู คงเป็นเรื่องเล็กน้อยนะครับ หรือหากเป็นเรื่องไม่เล็กน้อย แต่คงไม่ท้อนะครับ

    ตอบลบ
  7. สวัสดีค่ะคุณครู
    ไม่ได้มัวแต่เลี้ยงลูกนะคะ
    ตอนกลางวันทำเสร็จแล้วแต่ยังไม่ทันบันทึกแม่แบบ
    ไฟพายัพก้อดับไปซะก่อน เนตเจ๊ง
    ตอนนี้เอาการบ้านกลับมาทำที่บ้านเรียบร้อยแล้วนะคะ
    อาจจะดูยาก ไว้จะมาปรับแก้อีกทีค่ะ ถ้าหากได้รูปที่ถูกใจกว่านี้ค่ะ

    ตอบลบ
  8. อาจารย์ค่ะ ขยายความหน่อยค่ะ เห็นแต่ pucca หมายความว่ายังไงค่ะ ไม่เห็นตัวอักษรเลย หรือว่ามันเห็น pucca ชัดไป หรือ...

    แต่หนูว่ามันก็พออ่านได้อยู่นาาาา

    ตอบลบ
  9. อาจารย์ค่ะ ที่หนูเคยลองเสนอให้อาจารย์ fix background นะคะ ก่อนอื่นก็ต้องขอบคุณพี่เก๋ค่ะที่แนะนำคำสั่งให้ค่ะ โดยปูไปดูที่ blog ของครูดาวที่ทำ link ไปยัง background สวย ๆ ค่ะ จะเห็นว่าที่ link จะมีคำสั่งอยู่ค่ะ หลังจากใส่ค่ะ url ของ background ก็เพิ่มคำสั่งดังนี้นะคะ
    (http://ที่อยู่ของรูปค่ะ);background-position: center; (กำหนดตำแหน่งการวางภาพของ background ค่ะ
    background-repeat:no-repeat; (กำหนดว่าจะเล่นรูปซ้ำหรือไม่ ถ้าภาพเล็ก คำสั่งนี้ต้องเอาออกค่ะ
    background-attachment: fixed; ส่วนคำสั่งสุดท้ายนี้เป็นการ fix ภาพหลังไม่ให้มันเคลือนไปตามบทความค่ะ

    หวังว่าคงจะมีประโยชน์กับเพื่อน ๆ คนอื่นด้วยนะคะ

    ตอบลบ
  10. การแก้ไข code html เป็นส่วนที่ผมกลัว และ ปอดมากที่สุดครับ จึงจะเห็นได้ว่า ความรู้ที่ผมเอามาแลกเปลี่ยน จะเลี่ยงส่วนนี้มากที่สุดเท่าที่จะทำได้ หากต้องทำจะแก้เพียงเล็ก ๆ น้อย ๆ ครับ

    ตอบลบ