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

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

 div#subtitle { font-size: medium; color:#FAEDE6;}
div#container {width: 840px; background: #ffffff;}
div#sidebar2 {width: 215px;
background-image:url("/file/jantana811/content_bg.gif");
border: 0px solid #ffffff;}
div#content2 {background: #ffffff; width: 595px; 
background-image:url("/file/jantana811/content2_bg.gif");
border: 0px solid #ffffff;}
body{ background: #FAEDE6;
background-image: url("/file/jantana811/bg_orange.gif");
background-repeat: repeat-x;}
div#title{padding: 10px 4px 35px;  
font-size: big; color:#FAEDE6; 
background:#E96324;  
background-image:url("/file/jantana811/banner1.jpg ");  
background-repeat:no-repeat;  
background-position:center center;  
height:35px;
div#title span {display:none;}

บรรทัดที่ 4. background-image:url("/file/jantana811/content_bg.gif"); จะเป็นในส่วนของภาพด้านขวาของบล็อกค่ะ ภาพที่ดิฉันนำมาใส่นั้นมีขนาด width=400 pixel และ high=1 pixel ค่ะ <p></p><p>สามารถทำได้โดยการนำไฟล์ภาพที่ได้ใส่เข้าไปใน”ไฟล์อัลบัม” จากนั้นก็ copy shortcut ไฟล์ภาพที่ได้ แล้วก็ตัดเอาเฉพาะส่วนที่ต่อจาก http://gotoknow.org เท่านั้นค่ะ ซึ่งก็ทำเหมือนกันกับครั้งที่แล้วนะคะ ถ้าใครยังไม่ค่อยถนัดก็สามารถกลับไปดูได้ที่นี่ค่ะ การทำCSSครั้งแรก </p><p>ส่วนบรรทัดที่ 7. background-image:url("/file/jantana811/content2_bg.gif");ก็จะเป็นในส่วนของภาพด้านซ้ายของบล็อกค่ะ ซึ่งขนาดภาพที่ใส่เข้าไปนั้นคือ width=600 pixel และ high=1 pixel ค่ะ ขั้นตอนต่างๆก็เมือนกับภาพด้านขวาค่ะ</p><p>ส่วนค่าสีและความเข้มสีที่ใช้ในการทำเป็นพื้นหลังของบล็อกนั้นดิฉันใช้ ค่าสี 8% และความเข้มสี 100% ค่ะ ส่วนท่านใดที่ต้องการทำสีอื่นๆที่ไม่ใช่สีเดียวกับของดิฉันก็สามารถเทียบค่าสีได้จากบล็อกของอาจารย์จันทวรรณ ที่นี่ค่ะ ภาพชุดสีเพื่อใช้ในเปลี่ยนสีของบล็อก เพียงแค่นี้ก็จะได้สีที่ทำให้บล็อกของคุณดูมีความโดดเด่นขึ้นมาจากพื้นหลังแล้วค่ะ ส่วนใครที่ theme เป็นสีส้มแบบนี้ก็สามารถเอา code นี้ไปใช้ได้แบบไม่ต้องเสียเวลานั่งทำก็ได้ค่ะ แต่อาจจะเปลี่ยนภาพที่เป็น banner ด้านบนให้เป็นของตัวเองได้โดยเอาไฟล์ภาพมาแปะไว้ที่บรรทัดนี้ค่ะ 15.background-image:url("/file/jantana811/banner1.jpg ");  </p><p>ปล.ภาพที่เป็นรูปดาวนั้นดิฉันได้มาจาก gettyimages  ค่ะ</p><p> </p>