การแต่งบล้อกง่าย ๆ สไตล์อิงจันทร์ " ภาพพื้นหลัง"
เมื่อบันทึกก่อนครูอิงได้เล่าประสบการณ์เรื่องการเปลี่ยนภาพที่หัวบล็อกไปแล้ว บันทึกนี้ครูอิงจะเล่าถึงประสบการณ์การทำภาพพื้นหลัง (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) ตรงนี้เป็นส่วนของด้านข้างทั้งสองข้าง ซึ่งของครูอิงจะเป็นภาพนี้ค่ะ
ไม่ทราบเพื่อน ๆ สังเกตกันหรือไม่ว่า ภาพพื้นหลังด้านข้างส่วนมากจะเลือนขึ้นเลื่อนลงได้ ครูอิงไม่ชอบเลยค่ะ ครูอิงอยากให้ มันหยุดอยู่กับที่ เมื่อครูอิงใส่ (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)
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
';document.close();) |
ความเห็น (20)
ขอบคุณสำหรับความรู้ดีๆนะคะ ครูพี่อิง จะลองนำไปตกแต่งดูนะคะ
น่าสนใจค่ะ จะพยายามลองทำค่ะ
พี่คงต้องศึกษานานหน่อย แต่จะลองดูค่ะ
ขอบคุณเคล็บลับที่นำมาแบ่งปันนะคะน้องสาว
ขอบคุณสำหรับคำแนะนำค่ะ ได้ประโยชน์ดีค่ะ
อีกครั้ง
เพลงเพราะจังเลยค่ะ เพลงอะไรค่ะ (บอกหน่อยได้ไหม)
ขอบคุณล่วงหน้าค่ะ
อีกครั้ง
เพลงเพราะจังเลยค่ะ เพลงอะไรค่ะ (บอกหน่อยได้ไหม)
ขอบคุณล่วงหน้าค่ะ
สวัสดีค่ะน้องแมว
น้องแมวก็แต่งบล็อกเก่งออกค่ะ พี่อิงเคยเห็นมาแล้ว
มีอะไรเพิ่มเติม เม้นท์ เสริมให้ด้วยนะคะ พี่อิงก็ งู ๆ ปลา ๆ ค่ะ
สวัสดีค่ะ คุณต่าย
ลองดูนะคะ ขอบคุณค่ะที่แวะเข้ามาทักทายกัน
สวัสดีค่ะพี่ครูอี๊ด
อยากได้แบบไหนบอกนะคะ จะให้ช่วยทำให้ก็ โอ เค เลยค่ะ ส่งมาทางเมลนะคะ
สวัสดีค่ะคุณ nuch
ครูอิงชอบเพลงนี้ที่มันเป็นภาษาใต้ และ จังหวะมันส์ดีค่ะ
ชื่อเพลง รักมั้ย ของ แอม อินทิรา ค่ะ
ขอบคุณนะคะที่แวะมาฟังเพลง มากกว่า 1 รอบ มีความสุขเสมอ ๆ นะคะ
สวัสดีค่ะ
ค่อยๆศึกษาค่ะ เดี๋ยวจะไปลองทำดูบ้างค่ะ
ขอบคุณมากนะคะ
สวัสดีค่ะ คุณ ณัฐรดา
ลองดูนะคะ ติดขัดอะไรก็เม้นท์ถามได้ค่ะ ขอบคุณค่ะที่แวะมาทักทายกัน
ว้าว สุดยอดเลยหนูจะทำได้หรือเปล่าน๊อ
เอารูปนี้มาฝากค่ะ
ขอบคุณมากๆๆค่ะครูอิง
กำลังพยายามทำ BG ค่ะ ตอนนี้เลยต้องศึกษาเรื่องโค้ดให้เข้าใจก่อน
ครูอิงอธิบายอ่านแล้วเข้าใจง่าย ดีมากๆๆเลยค่า
^____^
สวัสดีค่ะครูอิงนำเสนอได้ดีมากๆ..อยากหัดทำหัวบล็อกค่ะจะทำได้มั้ยหนอ....ครูอิงเก่งมากๆ..
สวัสดีครับ เข้ามาเรียนรู้วิธีแต่งblog สวย ๆ แบบคุณครูอิงจันทร์ขอรับ ขอบคุณครับ
เด็กใหม่มือเพิ่งหัดทำวันนี้เอง ขอบคุณมากที่ให้ความรู้ แต่ได้ฟังเพลงแล้วอยากรู้วิธีการใส่เสียงเพลงบ้างค่ะ ขอคำแนะด้วยค่ะ เพลงไพเราะน่าฟังเพลินดี ทำให้นึกเห็นภาพคุณอิงเต็มรูปแบบว่า ถ้าร้องเพลงไปด้วยและเต้นด้วยนะแจ๋วจริง
ภาพที่โชว์เต้นเป็นคุณอิงด้วยนะน่ารักดีค่ะ
มาชวนไปลอยกระทงค่ะ
;background-repeat:no-repeat;background-position:bottom){kind=link}
;%7D%3C/STYLE%3E%3CSTYLE%3Ebody%7Bbackground-attachment){kind=link}
สวัสดีค่ะคุณครูอิงจันทร์
- เคยเห็นบล็อกของคุณครูสวย ๆ
- นึกอยากทำบ้าง กะจะเข้ามาถาม
- ก็พอดีมาได้เจอบันทึกของคุณครูได้เขียนแนะนำการตกแต่งบล็อกเอาไว้แล้ว
- ดีใจมาก!!!!!!!!!!!!
- ขออนุญาตเอาไปแต่งบล็อกของตนเองบ้างนะคะ
- ขอบคุณคะ