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

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

 

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

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

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

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

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

 

nuch
เขียนเมื่อ 

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

nuch
เขียนเมื่อ 

อีกครั้ง

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

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

nuch
เขียนเมื่อ 

อีกครั้ง

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

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

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

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

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

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

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

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

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

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

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

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

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

สวัสดีค่ะ

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

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

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

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

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

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

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

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

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

^____^

krutoom
เขียนเมื่อ 

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

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

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

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

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

 

 

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

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

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