การทำ CSS เพื่อการตกแต่ง Blog

CSS Design

มาตรฐานการตกแต่ง Blog โดยใช้ CSS

1. การตั้งค่า ค่าสีใน Blog ให้เข้ากับ Theme ที่เราทำ

ค่าสี : จะบอกเป็นตัวเลขในแต่ละสี เช่นค่าสี 12 จะออกสีส้มแกมนำตาล (ดูในรูปที่ 2)

ความเข้ม : ความเข้มของสีน้อยไปมาก

2. ส่วนนี้จะใส่ลงใน CSS โดยแก้ไขเพียง Link รูปภาพที่เราตกแต่งหรือนำมาใส่ในส่วนต่างๆ ของ Blog

div#container {
           width: 810px; //ความกว้าง Blog ทั้งกรอบ
           border: dashed 3px;
}
div#content2 {
           width: 579px; //ความกว้าง Blog ส่วนอัพเดทข้อความ
           background-image: url("Link รูปภาพทำพื้น Blog");
           background-repeat:repeat;
        background-position:left top;
}
div#sidebar2 {width: 221px;
}
div#subtitle {font-size:medium;}
body{
          background:#000000; //พื้นสีดำกรณีไม่มีรูป หรือ ลบส่วน Link ออก
         background-image: url("Link รูป ทำ Background");
          background-repeat:repeat;
}
div#title {
         padding:10px 10px 40px;
         font-size:;
         color:#ffffff;
         background:#000000;
         background-image:url("link รูปทำส่วนหัว");
         background-repeat:no-repeat;
         background-position:center center;height:100px;
}
div#title span {display:none;
}
form{
         color:#0863de;
         border: dotted 2px #0863de;
}
div#footer {
         font-size: 0.8em;
         clear: both;
         color: #FFFFFF;
         background-image:url("Link พื้นรูปส่วนล่าง");

3. เมื่อเราแก้ไขข้อความสีน้ำเงินให้เป็น Link รูปแล้ว Copy มาวางในช่อง CSS

---------------------------------------------------------------------------------

หมายเหตุ : link รูป copy link มาจากเว็บอ้างอิงจากที่ไหนก็ได้หรือ นำไฟล์ที่เราจัดเก็บเองจากเว็บนี้ก็จะโหลดได้เร็วกว่าดูวิธีได้ที่ http://gotoknow.org/blog/aratus/90148

Download PDF File เพื่อดูรูปและขั้นตอน > http://gotoknow.org/file/anat_ta/CSSGotoKnow.pdf

เขียนใน GotoKnow โดย Anat
ใน Anat's Blog - IT Update

คำสำคัญ (Tags): #css#การตกแต่ง blog

หมายเลขบันทึก: 91388เขียนเมื่อ 20 เมษายน 2007 12:22 น. ()แก้ไขเมื่อ 19 พฤษภาคม 2012 02:53 น. ()สัญญาอนุญาต: จำนวนที่อ่าน