=Souchan 4Freinds=

 

 **ส่วนที่เป็นสีแดงคือส่วนที่เราสามารถปรับค่าได้เอง

 

 Body

 

body : คือส่วนที่กำหนดค่าเริ่มต้นทั้งหมดของหน้าบล็อก  ซึ่งสามารถปรับสีของพื้นหลัง ภาพของพื้นหลัง สีของตัวอักษรในบล็อกและสีที่เกี่ยวกกับลิ้งค์

 

 

body {

background:#fbfcfc url(evflour-f04.gif) fixed center;<< ส่วนที่ใช้ปรับสีและภาพของของพื้นหลัง

color:#333;<<สีของตัวอักษรที่แสดงในบล็อก

font:12px Tahoma, "MS Sans Serif";

line-height:1.5em;

text-align:center;

 

}

 

Header

 

 

1.[#header]:เป็นส่วนที่เกี่ยวกับแสดงภาพของ header ส่วนนี้ใช้กำหนดสีพื้นหลังของHeader

 

#header{

background:#FFF; << รหัสสี ของ header

padding:20px 0px 0px 0px;

text-align:center;<< เกี่ยวกับการจัดตำแหน่งของตัวอักษรที่อยู่ใน header ค่าที่สามรถกำหนดได้ คือ  right left center

position:relative;

}

 

2.[#header h1]:เป็นส่วนที่เกี่ยวกับชื่อของ blog

#header h1 a{

color:#666; << รหัสสีของชื่อblog

font-size:24px; << ขนาดของตัวอักษร

}

 

 

#header h1 a:hover{

color:#999; << รหัสของสี เมื่อเอาเมาส์ไปชี้

}

 

3.[#header h2]:เป็นส่วนที่อธิบายสั้นๆเกี่ยวกับ Blog(อยู่ใต้ชื่อblog)

 

#header h2{

font-size:12px; << ขนาดของตัวอักษร

margin:5px 0px 5px 0px;

}

 

4.[#coverimage]:เป็นส่วนที่เกียวข้องกับรูปภาพที่อยู่ใน headerสามารถปรับขนาดของพื้นที่ ที่ใช้แสดงภาพได้

 

#coverimage{

background:url(cover.jpg) no-repeat;<< รูปภาพที่นำมาเป็นHeader

height:100px;<< ความสูงของภาพ

width:730px;<<ความกว้างของภาพ

margin-left:25px !important;

margin-left:0px; /*Fix IE Bug*/

}

 

 

 

Neck menu :  เป็นส่วนที่เกี่ยวกับ page ที่เราเขียนขึ้นเอง

 

 

 

 

1.[#neck module]:เป็นส่วนที่ใช้ปรับสีและกำหนดความกว้างของ neck menu

#neck .module{

background:#d7d7d7; << รหัสของสีพื้นหลัง ของ neck menu   

background-image:

url(stripe_89a212edfcf60b51f78832610399ded2.png); display:inline;<< ตรงนี้ทำให้ neck menu มีพื้นหลังเป็นรูปภาพ  

 

float:left;

margin:0px 0px 0px 25px;

padding:2px 0px 5px 0px;

width:730px;<< ความกว้างของ neck menu

}

 

 

2.[#neck module ul]:เป็น list ที่อยู่ในneck menu

#neck .module ul{

display:inline;

margin:0px;

padding:0px;

}

 

 [#neck .module li] :เมนูย่อยที่อยู่ใน list อีกที

#neck .module li{
border-right:1px solid #CCC; <<เป็นเส้นคั่นของแต่ละหัวข้อ
display:inline;
padding:0px 10px 0px 10px;
}

 

 

 

Content

 

 

1.[#belly]:เป็นส่วนที่ใช้กำหนดค่าพื้นหลังของส่วนที่แสดงเนื้อหาทั้งหมด

#belly{

background:#FFF; << รหัสสีของพื้นหลัง

}

 

2.[#content]:เป็นส่วนที่แสดงเนื้อหา( entry )ที่เราเขียน

#content{

display:inline;

float:left;

margin:10px 15px 0px 25px;

width:490px;

/*Fix too large image makes content drop problem in IE*/

overflow:visible !important;

overflow:hidden;

}

 

[.entry] :เกี่ยวกับตำแหน่งของเนื้อหาที่เราเขียนในบล็อก( entry )

.entry{
float:left;
margin-bottom:15px;
border-bottom:1px solid #CCC;
}


[.entry.title]: ส่วนนี้เกี่ยวกับตำแหน่งที่แสดงชื่อของ entry 

 

.entry .title{
display:block;
float:left;
margin-bottom:10px;
width:100%;
}

 

Entry title

 

[.entry .title h2]:ส่วนนี้เกี่ยวกับขนาดตัวอักษรของชื่อ entry

.entry .title h2{
font-size:18px;<< ขนาดของตัวอักอักษร
}



[.entry .title h2 a]:สีของชื่อ entry
.entry .title h2 a{
color:#FF1493; << รหัสของสี
}



[.entry .title h2 a:hover]: สีของชื่อ entry เมื่อเอาเมาส์ไปชี้

.entry .title h2 a:hover{
color:#CCC; << รหัสของสี
}

 

 

 

Entry title span

 

[.entry .title span]:เป็นส่วนที่บอกวันและเวลาที่เราเขียน entry นี้

.entry .title span{

color:#666;<<สีของตัวหนังสือ

font-size:10px;<<ขนาดของตัวหนังสือ
} 

  [entry .info]: เป็นส่วนที่แสดง tag และจำนวนคนที่เข้ามาcomment  

 

 

.entry .info{
float:left;
width:100%;
}

[.entry .info .tag]: เกี่ยวกับตำแหน่งที่แสดง tag 

.entry .info .tag{
float:left;<< ตำแหน่งของtag

font-size:10px;<< ขนาดของตัวอักษร
width:350px;<<ความของพื้นที่ที่แสดง tag

}

[.entry .info .coms]:เกี่ยวกับตำแหน่งที่แสดงจำนวนคนที่เข้ามาcomment
.entry .info .coms{
float:right;
}

 

 

 

 

 

Side bar

1.[#sidebar sidebar2]:เป็นส่วนที่แสดงเ กี่ยวกับหัวข้อของ entry ที่เขียนไปแล้ว ,link ,java scriptจากเว็บอื่นๆ

 

#sidebar, #sidebar2{

background:#ebebeb;<< รหัสสีพื้นหลังของ sidebar

display:inline;

float:right;

margin:5px 25px 0px 0px;

width:225px; 

background-image:url(stripe_89a212edfcf60b51f78832610399ded2.png); << ตรงนี้ทำให้ sidebars มีพื้นหลังเป็นรูปภาพ

}

 

2.[#sidebar .module ul, #sidebar2 .module ul]:เป็นส่วนที่แสดงเอนทรีที่อยู่ในหัวข้อต่างๆ

#sidebar .module ul, #sidebar2 .module ul{
margin:5px 0px 0px 5px;
padding:0;
list-style: none;
} 

3.[#sidebar .module h2, #sidebar2 .module h2]:เป็นส่วนที่เกี่ยวกับหัวข้อต่างๆที่อยู่ในside bar

ได้แก่

#previous : entry ที่แล้ว

#reccommend :  entryที่น่าสนใจ

#link : ลิงค์ที่ไปเว็บอื่น

#lastcomment : entryทีมีคนเข้ามาcommentล่าสุด

#categories : หมมวดหมู่ของ entry ที่เราตั้งไว้

 

#sidebar .module h2, #sidebar2 .module h2{
border-bottom:1px solid #CCC;<<เส้นใต้ที่อยู่ใต้หัวข้อ
font-size:18px;<<ขนาดของตัวอักษรที่แสดงหัวข้อ
}

 

 

 

 

 Profle

 

 

 

1.[#profile]:เป็นพื้นที่ที่ใช้แสดงเกี่ยวกับประวัติเจ้าของบล็อก

#profile{
width:95%;<<ความกว้างของพื้นที่
height:64px;<<ความสูงของพื้นที่
}
2.[#profile img]:เป็นส่วนที่แสดงรูปภาพประจำตัว
#profile img{
float:left;<<จัดตำแหน่งของภาพ
margin-right:10px;<<ระยะห่างของภาพจากขอบบน
}

3.[#profile span]:เป็นส่วนที่แสดงชื่อเจ้าของบล็อก
#profile span{
display:block;
}

 

 

4.[#profile .info]: เป็นส่วนที่กำหนดความกว้างให้กับโปรไฟล์
#profile .info{
width:100% !important;
width:60%;
}

 

 

Comment Form

 

 

 

1.[#commentform]:เป็นส่วนที่เกี่ยวกับการเขียนcomment

 

#commentform{

width:100%;

background:#EEE;<< สีของพื้นหลัง

float:left;

background-image:url (stripe_89a212edfcf60b51f78832610399ded2.png);

ตรงนี้ทำให้ commentform มีพื้นหลังเป็นรูปภาพ

}

 

2.[#commentform h3]: เป็นส่วนที่เกี่ยวกับหัวข้องของ commentform

#commentform h3{
font-size:16px;
font-weight:bold;
}

3.[#commentform .formrow] : เกี่ยวกับส่วนที่เป็นเส้นที่อยู่ใน commentform

#commentform .formrow{
border-top:1px solid #DDD;
padding:2px;
}

 

4.[#commentform input.textbox]:เป็นส่วนที่เกี่ยวกับขนาดของพื้นที่สำหรับพิมพ์ comment

#commentform input.textbox{
width:150px;<< ความกว้างของส่วนที่พิมพ์comment

}

[#commentform textarea]:ส่วนที่เป็นพื้นที่สำหรับพิมพ์ coment เรียกว่ากล่อง comment ละกัน

#commentform textarea{

width:310px;กำหนดความสูงของกล่อง comment

height:150px;กำหนดความกว้างของกล่อง comment

background-image:url (stripe_89a212edfcf60b51f78832610399ded2.png); }

ตรงนี้ทำให้กล่อง comment มีพื้นหลังเป็นรูปภาพ

 

 

Comment (Showing Area)

 

 

 

1.[.comment] : ส่วนที่แสดงคอมเม้นท์ทั้งหมด

.comment{
border-bottom:1px solid #FF7F24;＜＜ใช้ปรับค่าเส้นคั่นของแต่ละคอมเม้นท์  
float:left;
margin:5px 0px 5px 0px; << ระยะห่างระหว่างคอมเม้นท์กับเส้นคั่น

padding-bottom:5px; <<ระยะห่างระหว่างคอมเม้นท์กับเส้นใต้
width:100%;
}
2.[.comment .post] : ส่วนที่แสดง คอมเม้นท์
.comment .post {
float:right;<< ตำแหน่งของคอมเม้นท์
width:330px; <<ความกว้างของพื้นที่คอมเม้นท์
}

3.[.comment .info]  : เป็นส่วนที่แสดงข้อมูลของผู้ที่มาคอมเม้นท์ให้เรา
.comment .info{
float:left;
font-size:10px;<< ขนาดของตัวอักษรที่อยู่ในคอมเม้นท์
width:150px;<< ความกว้างของส่วนที่แสดงข้อมูลของผู้ที่มาคอมเม้นท์
margin-right:10px;
}



4. [comment .info img] : แสดงรูปประจำตัวของผู้ที่มาคอมเม้นท์
.comment .info img{

  width:23px;<<กำหนดขนาดของรูปผู้ที่มาคอมมเม้นท์

}

 

Leg menu : คล้ายๆกับ neck menuต่างกันแค่เพียงตำแหน่งที่อยู่เ่ท่านั้น

#leg{
background:url(picture.png) top left;

}

#leg .module{
background:#473e3c;
display:inline;
float:left;
margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;
width:730px;
}

 

[#leg .module ul ]:เป็น list ที่อยู่ใน leg menu
#leg .module ul{
display:inline;
margin:0px;
padding:0px;
}

#leg .module h2{
font-size:12px;
font-weight:bold;
display:inline;
}

 

[#leg .module li] :เมนูย่อยที่อยู่ใน list

#leg .module li{
border-right:1px solid #CCC;<<เป็นเส้นคั่นของแต่ละหัวข้อ

display:inline;
padding:0px 10px 0px 10px;
}

 

 

 

Footer

 

  

[#footer] :เป็นแถบที่อยู่ล่างสุด 

 

#footer{

background:#FFF; << สีพื้นหลังของFooter

height:60px;<<ความสูงของfooter

}

 

[#footer p] : เป็นส่วนที่เกี่ยวข้องกับตัวหนังสือที่อยู่ใน footer

#footer p{

background:#EEE;<< สีพื้นหลังของ#footer p

background-image:url(ที่อยู่ของรูปภาพ);<<เพิ่มพื้นหลังเป็นรูปภาพ

border-top:1px solid #CCC;<< เส้นขอบบน

border-bottom:1px solid #CCC;<< เส้นขอบล่าง

font-size:10px;<< ขนาดของตัวหนังสือ

text-align:center;<< ตำแหน่งของfooter

margin:5px 25px 0px 25px;

padding:5px;  }