css

 เริ่มใช้งาน blog อย่างจริงจัง ครั้งแรกค่ะ

ก่อนอื่นก็ต้องขออนุญาติอาจารย์จันทวรรณก่อนนะคะ ที่ดิฉันจะเอาโมเดลปลาทูของอาจารย์มาใช้ในการแก้ไข และตกแต่งเพิ่มเติมให้เป็นของตัวเอง เพราะว่าไม่อยากซ้ำกับใครค่ะ และดิฉันก็คิดว่าแต่ละคนก็อยากมีโฉมหน้าบล็อกที่ไม่ซ้ำใครด้วยเหมือนกันใช่รึเปล่าคะ ดังนั้นดิฉันขอเริ่มวิธีการแปลงโฉมบล็อก ณ บัดนี้ค่ะ แต่ตอนนี้ทำได้แค่เปลี่ยนภาพthemeด้านบนเท่านั้นค่ะ เพราะนั่งทำจนปวดหัว ปวดตาไปหมดแล้วค่ะ(ใจจริงอยากเปลี่ยน themeให้เป็นสีส้มทั้งหมดค่ะ) ก็ได้เท่านี้ก่อนละกันค่ะ ถ้าหากมีอะไรคืบหน้าจะรีบมารายงานค่า

เริ่มจาก code ตัวสีแดงๆที่อาจารย์จันทวรรณท่านให้มาก่อนนะคะ

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

ส่วนที่ต้องแก้ไขก็คือบรรทัดที่ 15 นั่นล่ะค่ะ เป็นส่วนที่เอาไว้ใส่รูปให้กับ theme ของเราไงล่ะคะ แต่ก่อนที่จะเปลี่ยนภาพได้นั้นเราก็ต้องนำภาพที่จะเอามาใส่ โดยขนาดของภาพที่จะใช้คือ width=850 pixel และ high=80 pixel ค่ะ  <p></p><p>



ต่อมาก็นำไฟล์ภาพที่ได้ใส่เข้าไปใน”ไฟล์อัลบัม” จากนั้นก็ copy shortcut ไฟล์ภาพที่ได้
ดังนี้</p><p></p><p>แล้วก็ตัด ส่วนที่เป็นสีชมพูออกไปเอาเฉพาะส่วนที่เหลือค่ะ
 http://gotoknow.org /file/jantana811/banner1.gif </p><p> แปะส่วนสีดำลงไปแทนที่ด้านล่างนะคะ
15.   background-image:url("/file/jantana811/banner1.gif");   </p><p>สุดท้ายก็บันทึกเก็บ แค่นี้ก็จะได้ theme ที่เป็นชื่อของเราเองแล้วค่ะ  </p><p>ปล.ภาพที่นำมาทำหัวของบล็อกนำมาจาก gettyimages ซึ่งได้เว็บนี้มาจากบล็อกของคุณมันทนา(http://gotoknow.org/blog/growthrings/56794) ค่ะ</p><p> </p>