การแต่งบล้อกง่าย ๆ สไตล์อิงจันทร์ " ภาพพื้นหลัง"

  ครูอิงไม่ใช่ผู้เชี่ยวชาญนะคะ บันทึกนี้เขียนจากประสบการณ์ในการลองผิดลองถูกเท่านั้น ขออภัยผู้ที่แต่งบล็อกเก่งแล้วด้วยนะคะ มีอะไรก็ช่วยเม้นท์เพิ่มเติมด้วยนะคะ  

 

       เมื่อบันทึกก่อนครูอิงได้เล่าประสบการณ์เรื่องการเปลี่ยนภาพที่หัวบล็อกไปแล้ว บันทึกนี้ครูอิงจะเล่าถึงประสบการณ์การทำภาพพื้นหลัง (BACKGROUND)

       บล็อก "ลานดินกลิ่นหญ้า" ที่เห็นอยู่ขณะนี้ ครูอิงใส่โค้ดนี้ใน CSS ค่ะ (เข้าไปที่จัดการบล็อก  เลือกตกแต่ง   เลือก แก้ไข  CSS ที่ตกแต่งมาเอง)

div#subtitle {background:#4F94CD;}

div#ribbon{background:#36648B;}

(1) div#page-wrapper {background-image: none;}

(2) div#page-wrapper {background-image:url(http://gotoknow.org/file/siriporn5633/suiren-4.jpg);} 

(3)div#title{font-size: big; color:#836FFF; background:#F0FFFF; background-image:url(http://gotoknow.org/file/ruschadawon/untitled305.GIF);background-repeat:no-repeat;background-position:bottom;   height:420px;}
 

(4) <STYLE>TABLE {background-color: transparent;border-style: none;border: 1;-spacing: none;}TD {border: none;border-color: none;background: none;}</STYLE><STYLE>body{background-image:url("http://gotoknow.org/file/ruschadawon/untitled293.jpg");}</STYLE><STYLE>body{background-attachment: fixed;}</STYLE>

 

ส่วนที่ (1) คือ ส่วนที่เราเขียนบันทึกค่ะ  เป็นส่วนที่เป็นเหมือนกล่องข้อความสีขาวพาดอยู่ตรงกลางหน่ะค่ะ เรียกว่า  page จะสังเกตว่าไม่ว่าจะใช้ธีมใด ก็จะเป็นสีขาว ถ้าเราต้องการตัดกล่องสีขาวออกไป ก็จะต้องใส่คำว่า -wrapper ต่อท้ายค่ะ หน้าบล็อกของเพื่อน ๆ ก็จะเป็นสีเดียวกับภาพพื้นหลังทั้งหมด ไม่มีพาดขาวตรงกลาง อย่างเช่นบล็อกของครูอิง บล็อกนี้หน่ะค่ะ http://gotoknow.org/blog/ruschadawon-taltal/303000 ลองคลิ๊กไปดูนะคะ หรือบล็อกนี้ก็ใช่ค่ะ http://gotoknow.org/blog/rimfaa/322471

ส่วนที่ (2) ครูอิงต้องการใส่ภาพพื้นหลัง ใน page ครูอิงก็ copy   (URL)  ของภาพคือเจ้าตัวนี้ http://gotoknow.org/file/siriporn5633/suiren-4.jpg ไปใส่ในวงเล็บหน่ะค่ะ(วิธีหา(URL) ของภาพอยู่ในบันทึกที่แล้วนะคะ) ก็จะได้พื้นหลังใน page เป็นลายดอกไม้สีฟ้า ๆ นี่ไงคะ ต้องไม่ลืมใส่-wrapper นะคะ

ส่วนที่ (3) ตรงนี้เป็นส่วนของหัวบล็อก ที่ครูอิงนำเสนอไปแล้ว เมื่อบันทึกที่แล้ว ผ่านเลยนะคะ

ส่วนที่ (4) ตรงนี้เป็นส่วนของด้านข้างทั้งสองข้าง ซึ่งของครูอิงจะเป็นภาพนี้ค่ะ

                                    Bg1-1

ไม่ทราบเพื่อน ๆ สังเกตกันหรือไม่ว่า ภาพพื้นหลังด้านข้างส่วนมากจะเลือนขึ้นเลื่อนลงได้ ครูอิงไม่ชอบเลยค่ะ ครูอิงอยากให้ มันหยุดอยู่กับที่ เมื่อครูอิงใส่ (URL) ของภาพคือเจ้าตัวนี้ http://gotoknow.org/file/ruschadawon/untitled305.GIF ไปในวงเล็บเสร็จ ครูอิงก็จะต่อท้ายด้วยคำนี้ค่ะ  fixed  แค่นี้ ภาพด้านข้างของครูอิงก็จะหยุดอยู่กับที่หล่ะค่ะ  ลองดูซิคะ 

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

         ส่วนมากครูอิงจะใช้บริการภาพพื้นหลังจากที่นี่ค่ะ http://www.bloggang.com/viewdiary.php?id=auntymod&month=07-2005&date=15&group=12&blog=1

ชอบพื้นหลังสีอะไร คลิ๊กเอา (URL) ไปเปลี่ยนในวงเล็บ  (4)

 









บันทึกนี้เขียนที่ GotoKnow โดย  ใน ลานดินกลิ่นหญ้า

คำสำคัญ (Tags)#ภาพพื้นหลัง

หมายเลขบันทึก: 307292, เขียน: 21 Oct 2009 @ 07:03, แก้ไข, 06 Sep 2013 @ 21:45, สัญญาอนุญาต: ครีเอทีฟคอมมอนส์แบบ แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกัน, ความเห็น: 20, อ่าน: คลิก
บันทึกที่เกี่ยวข้อง
บันทึกล่าสุด


ความเห็น (20)

มนัสนันท์
เขียนเมื่อ 21 Oct 2009 @ 07:30

ขอบคุณสำหรับความรู้ดีๆนะคะ ครูพี่อิง จะลองนำไปตกแต่งดูนะคะ

ต่าย
เขียนเมื่อ 21 Oct 2009 @ 07:36

น่าสนใจค่ะ จะพยายามลองทำค่ะ

@space@
เขียนเมื่อ 21 Oct 2009 @ 07:37

พี่คงต้องศึกษานานหน่อย แต่จะลองดูค่ะ

ขอบคุณเคล็บลับที่นำมาแบ่งปันนะคะน้องสาว

 

nuch
เขียนเมื่อ 21 Oct 2009 @ 10:32

ขอบคุณสำหรับคำแนะนำค่ะ ได้ประโยชน์ดีค่ะ

nuch
เขียนเมื่อ 21 Oct 2009 @ 16:46

อีกครั้ง

เพลงเพราะจังเลยค่ะ เพลงอะไรค่ะ (บอกหน่อยได้ไหม)

ขอบคุณล่วงหน้าค่ะ

nuch
เขียนเมื่อ 21 Oct 2009 @ 16:49

อีกครั้ง

เพลงเพราะจังเลยค่ะ เพลงอะไรค่ะ (บอกหน่อยได้ไหม)

ขอบคุณล่วงหน้าค่ะ

สวัสดีค่ะน้องแมว

          น้องแมวก็แต่งบล็อกเก่งออกค่ะ พี่อิงเคยเห็นมาแล้ว

         มีอะไรเพิ่มเติม เม้นท์ เสริมให้ด้วยนะคะ พี่อิงก็ งู ๆ ปลา ๆ ค่ะ

สวัสดีค่ะ คุณต่าย

      ลองดูนะคะ ขอบคุณค่ะที่แวะเข้ามาทักทายกัน

สวัสดีค่ะพี่ครูอี๊ด

          อยากได้แบบไหนบอกนะคะ  จะให้ช่วยทำให้ก็ โอ เค เลยค่ะ  ส่งมาทางเมลนะคะ

สวัสดีค่ะคุณ nuch

          ครูอิงชอบเพลงนี้ที่มันเป็นภาษาใต้  และ จังหวะมันส์ดีค่ะ

          ชื่อเพลง รักมั้ย  ของ แอม  อินทิรา  ค่ะ

          ขอบคุณนะคะที่แวะมาฟังเพลง มากกว่า 1 รอบ  มีความสุขเสมอ ๆ นะคะ

ณัฐรดา
เขียนเมื่อ 21 Oct 2009 @ 18:46

สวัสดีค่ะ

ค่อยๆศึกษาค่ะ เดี๋ยวจะไปลองทำดูบ้างค่ะ

ขอบคุณมากนะคะ

สวัสดีค่ะ คุณ ณัฐรดา

         ลองดูนะคะ  ติดขัดอะไรก็เม้นท์ถามได้ค่ะ  ขอบคุณค่ะที่แวะมาทักทายกัน

หมูจ๋า
เขียนเมื่อ 21 Oct 2009 @ 21:30

ว้าว สุดยอดเลยหนูจะทำได้หรือเปล่าน๊อ

   เอารูปนี้มาฝากค่ะ

ขอบคุณมากๆๆค่ะครูอิง

กำลังพยายามทำ BG ค่ะ ตอนนี้เลยต้องศึกษาเรื่องโค้ดให้เข้าใจก่อน

ครูอิงอธิบายอ่านแล้วเข้าใจง่าย ดีมากๆๆเลยค่า

^____^

krutoom
เขียนเมื่อ 22 Oct 2009 @ 12:04

สวัสดีค่ะครูอิงนำเสนอได้ดีมากๆ..อยากหัดทำหัวบล็อกค่ะจะทำได้มั้ยหนอ....ครูอิงเก่งมากๆ..

สวัสดีครับ เข้ามาเรียนรู้วิธีแต่งblog สวย ๆ แบบคุณครูอิงจันทร์ขอรับ ขอบคุณครับ

เด็กใหม่มือเพิ่งหัดทำวันนี้เอง ขอบคุณมากที่ให้ความรู้ แต่ได้ฟังเพลงแล้วอยากรู้วิธีการใส่เสียงเพลงบ้างค่ะ ขอคำแนะด้วยค่ะ เพลงไพเราะน่าฟังเพลินดี ทำให้นึกเห็นภาพคุณอิงเต็มรูปแบบว่า ถ้าร้องเพลงไปด้วยและเต้นด้วยนะแจ๋วจริง

ภาพที่โชว์เต้นเป็นคุณอิงด้วยนะน่ารักดีค่ะ

กานต์
เขียนเมื่อ 31 Oct 2009 @ 12:14

มาเรียนทำบล๊อก จากคุณครูค่ะ เก่งจัง ขอเป็นลูกศิษย์โค่งด้วยคน อยากทำอักษรให้ใหญ่กว่านี้สักนิด เปลี่ยนสีบล็อก ลูกเล่นต่างๆ รวมทั้งเสียเพลงด้วย คุณครูเก่งจริงๆ ขอแสดงความชื่นชมด้วยคน ขอบคุณล่วงหน้าค่ะ

 

 

กานต์
เขียนเมื่อ 01 Nov 2009 @ 08:33

มาชวนไปลอยกระทงค่ะ

poungharm
เขียนเมื่อ 19 Nov 2009 @ 00:51

สวัสดีค่ะคุณครูอิงจันทร์

  • เคยเห็นบล็อกของคุณครูสวย ๆ
  • นึกอยากทำบ้าง กะจะเข้ามาถาม
  • ก็พอดีมาได้เจอบันทึกของคุณครูได้เขียนแนะนำการตกแต่งบล็อกเอาไว้แล้ว
  • ดีใจมาก!!!!!!!!!!!!
  • ขออนุญาตเอาไปแต่งบล็อกของตนเองบ้างนะคะ
  • ขอบคุณคะ