ลองใส่ bg เพิ่มสีสันให้บล็อกกันค่ะ

สุธรา
ติดตาม ผู้ติดตาม 
ติดต่อ

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

ขั้นแรก เป็นเรื่องของรูปที่นำมาใช้นะคะขนาดของรูปไม่ได้ฟิคตายตัวค่ะ ว่าจะต้องมีขนาดกว้างยาวเท่าไหร่ แต่ แนะนำว่าไม่ควรมีขนาดใหญ่เกินไปค่ะ เพราะจะทำให้หน้าเพจของบล็อกแสดงผลได้ช้าค่ะ เมื่อได้ขนาดของรูปตามต้องการแล้ว ก็แต่งให้เต็มที่ด้วยโปรแกรมตกแต่งรูปภาพทั่วไปค่ะ ตอน save รูป save เป็นไฟล์ .jpg หรือ .gif นะคะ

ขั้นที่ 2 เราจะต้องอัพโหลดไฟล์รูปภาพ ขึ้นมาไว้ในไฟล์อัลบั้มของเราก่อนค่ะ ดูวิธีการอัพโหลดไฟล์ที่นี่เลยค่ะ วิธีการอัพโหลดไฟล์

ขั้นที่ 3 มาดูโค๊ดที่ใช้กันค่ะ 
CSS code ที่ใส่ในการตกแต่ง

div#page-wrapper {
              background:#FCA4E9;
              background-image: url("http://learners.in.th/file/tozusu/titlepink.gif");
              background-repeat:repeat;}

 
background คือ ส่วนของโค๊ดสีของพื้นหลังค่ะ ถ้าต้องการเปลี่ยนสีพื้นหลังอย่างเดียวก็ใส่โค็ดบรรทัดนี้เข้าไปอย่างเดียวก็ได้ค่ะ
background-image คือ ไฟล์รูปภาพที่จะนำมาใส่ค่ะ เราจะต้องเอา url ของไฟล์รูปที่เราอัพโหลดในขั้นที่2 มาใส่ในวงเล็บค่ะ
background-repeat คือ การกำหนดใส่แสดงรูปซ้ำจนเต็มพื้นที่ค่ะ เช่นถ้ารูปเราเล็กกว่าขนาด title ที่เว็บกำหนดไว้ ก็เขียนคำสั่งให้แสดงรูปต่อๆ กันจนเต็มค่ะ

ขั้นที่ 4 นำโค๊ดไปใช้งานจริงกันค่ะ  โดยการ copy โค๊ดในขั้นที่3 แล้วเปลี่ยนบางส่วนให้เป็นของเราค่ะ จากนั้นก็นำไปวางในหน้า ตกแต่งบล็อก แนะนำการตกแต่งบล็อก, ตกแต่งแพลนเน็ต แนะนำการตกแต่งแพลนเน็ต หรือ ตกแต่งหน้าประวัติ แนะนำการตกแต่งแพลนเน็ต ก็ได้ค่ะ ไว้ในส่วนที่เขียนว่า "CSS ที่ตกแต่งมาเอง" นะคะ ซึ่งโค๊ด css ส่วนต่างๆ สามารถนำมาต่อกันได้ค่ะ โดยโค็ดแต่ละส่วนจะต้องมีปีกกาเปิดและปิดเป็นตัวกั้นค่ะ เช่น
       div#title{..............
                       .............}
       body{............
                  .............}

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

สุดท้ายก็เหมือนเดิมค่ะ มี bg มาฝากให้ลองไปใช้เล่นๆ ก่อนลงมือทำจริงๆ ค่ะ

http://learners.in.th/file/tozusu/bg-mygirl.jpg

http://learners.in.th/file/tozusu/sidebar2bear.jpg

http://learners.in.th/file/tozusu/titlepink.gif

 

http://learners.in.th/file/tozusu/r11_6.gif

 

http://learners.in.th/file/tozusu/00000215.gif

 

บันทึกนี้เขียนที่ GotoKnow โดย  ใน Theme For You = บล็อกสวยด้วยธีม =



ความเห็น (14)

เขียนเมื่อ 
ขอบคุณค่ะ
นู๋น้ำเย็น
IP: xxx.120.62.166
เขียนเมื่อ 
สวยดีค่ะว่าง ๆ จะลองเอาไปใช้บ้างนะคะ
เขียนเมื่อ 
ดีเลยค่ะ บล็อกจะได้สวยๆ

ขอบคุณค่ะ  จะลองไปทำดูนะค่ะ

เขียนเมื่อ 
ไม่เข้าใจตรงไหนก็ฝากคำถามไว้ได้เลยนะคะ
เขียนเมื่อ 

แจ้งการเปลี่ยนโค๊ดส่วนพื้นหลังนะคะ
เปลี่ยนจาก body เป็น div#page-wrapper นอกจากนี้แล้วก็เหมือนเดิมค่ะ

ลองไปใช้แล้ว OK ค่ะ ขอบคุณนะคะ

เขียนเมื่อ 

ขอบคุณครับ

^_^

เขียนเมื่อ 

ว่าแต่...ตั้งแต่เปลี่ยนระบบนี่...

ธีมที่ใช้อยู่ดูเพี้ยนๆ ไปเลย

 

เขียนเมื่อ 
P

bunpot

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

เขียนเมื่อ 
ขอบคุณค่ะ  สวยจริงๆ
เขียนเมื่อ 
สงสัยต้องขยันทำหน่อยแล้วค่ะ ได้รับคำชมแบบนี้ ขอบคุณนะคะ

http://learners.in.th/file/tozusu/bg-mygirl.jpg

เขียนเมื่อ 

ขอบคุณค่ะ ขออนุญาตนำไปใช้บ้างนะคะ

หมายเลขบันทึก

94950

เขียน

08 May 2007 @ 11:27
()

แก้ไข

16 Jun 2012 @ 00:21
()

สัญญาอนุญาต

สงวนสิทธิ์ทุกประการ
ความเห็น: 14, อ่าน: คลิก