Zaiki mizu{ฮูเล่!!}

ว่างมาก ฮ่าๆๆ
(จริงๆคือใกล้เปิดเทอมแล้ว เลยคิดว่าควรทำอะไรสักอย่างให้เป็นชิ้นเป็นอัน...)
วันนี้ไซจะมาอธิบายเกี่ยวกับโค้ดหมวดต่างๆ ที่จำเป็นต่อการตกแต่งบล็อกนะเค่อะ
มีหมวดใหญ่ๆคือ

#body,#header, #neck, #belly, #leg, #footer

ซึ่งในโค้ดนั้นจะมีส่วนของคอมเม้น,โปรไฟร์ ฯลฯ อยู่ ไซจะอธิบายตามหมวดๆแล้วกัน
ก่อนอื่น..ไซขอยืมส่วนของบล็อกจากมิฮะซังนะคะ



เอาล่ะ GO GO GO!!!!~
(แปะโค้ดต้นแบบก่อน...)





/*=====================================*/
/* Simple Reset - Not Editable*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}

/* General */

body {
background:#fbfcfc url(http://g.exteen.com/t/simple/bck.gif) repeat top left;
color:#333;
font:12px Tahoma, "MS Sans Serif";
line-height:1.5em;
text-align:center;
}

a:link, a:visited{
color:#0054a6;
text-decoration:none;
}

a:hover, a:active{
color:#0081ff;
}

#page{
margin:auto;
padding-top:15px;
text-align:left;
width:780px;
}

#header, #neck, #belly, #leg, #footer{
float:left;
width:780px;
}


/*=====================================*/
/* Header */

#header{
background:#FFF;
padding:20px 0px 0px 0px;
text-align:center;
position:relative;
}

#header h1 a{
color:#666;
font-size:24px;
}

#header h1 a:hover{
color:#999;
}

#header h2{
font-size:12px;
margin:5px 0px 5px 0px;
}

#coverimage{
background:url(http://g.exteen.com/t/simple/cover.jpg) no-repeat;
height:100px;
width:730px;
margin-left:25px !important;
margin-left:0px; /*Fix IE Bug*/
}

/*=====================================*/
/* Neck Menu */

#neck{
background:#FFF;
}

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

#neck .module ul{
display:inline;
margin:0px;
padding:0px;
}

#neck .module h2{
display:none;
}

#neck .module li{
border-right:1px solid #CCC;
display:inline;
padding:0px 10px 0px 10px;
}

/*=====================================*/
/* Content */

#belly{
background:#FFF;
}

#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{
float:left;
margin-bottom:15px;
border-bottom:1px solid #CCC;
}

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

.entry .title h2{
font-size:18px;
}

.entry .title h2 a{
color:#949494;
}

.entry .title h2 a:hover{
color:#CCC;
}

.entry .title span{
color:#666;
font-size:10px;
}

.entry .post{
float:left;
}

.entry .post p{
margin-bottom:10px;
}

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

.entry .info .tag{
float:left;
font-size:10px;
width:350px;
}

.entry .info .coms{
float:right;
}

/*=====================================*/
/* Sidebars */

#sidebar, #sidebar2{
background:#ebebeb;
display:inline;
float:right;
margin:5px 25px 0px 0px;
width:225px;
}

#sidebar2{
display:none;
}

#sidebar .module, #sidebar2 .module{
margin:5px 5px 15px 5px;
}

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

#sidebar .module h2, #sidebar2 .module h2{
border-bottom:1px solid #CCC;
font-size:18px;
}

a.archive{
background:url(http://g.exteen.com/t/simple/icon_archive.gif) no-repeat;
width:12px;
height:12px;
padding-left:15px;
margin-left:4px;
}

/*=====================================*/
/* Configure each module */

/* Profile */
#profile{
width:95%;
height:64px;
}

#profile img{
float:left;
margin-right:10px;
}

#profile span{
display:block;
}

#profile .info{
width:100% !important;
width:60%;
}

/* Tags */
#tags li{
display:inline;
margin-right:5px;
}

/*=====================================*/
/* Comment Form */

#commentform{
width:100%;
background:#EEE;
float:left;
}

#commentform form{
margin:5px;
}

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

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

#commentform label{
float:left;
width:150px;
}

#commentform input.textbox{
width:150px;
}

#commentform textarea{
width:310px;
height:150px;
}

/*=====================================*/
/* Comment (Showing Area) */

.comment{
border-bottom:1px solid #DDD;
float:left;
margin:5px 0px 5px 0px;
padding-bottom:5px;
width:100%;
}

.comment .post{
float:right;
width:330px;
}

.comment .post p{
margin-bottom:10px;
}

.comment .info{
float:left;
font-size:10px;
width:150px;
margin-right:10px;
}

.comment .info img{
width:32px;
}

/*=====================================*/
/* Leg Menu */

#leg{
background:#FFF;
}

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

#leg .module ul{
display:inline;
margin:0px;
padding:0px;
}

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

#leg .module li{
border-right:1px solid #CCC;
display:inline;
padding:0px 10px 0px 10px;
}

/*=====================================*/
/* Footer */

#footer{
background:#FFF;
height:60px;
}

#footer p{
background:#EEE;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
font-size:10px;
text-align:center;
margin:5px 25px 0px 25px;
padding:5px;
}

/*=====================================*/
.navbar{
float:left;
}

.commentmanage{
clear:both;
}

/*PNG support for IE*/
#header, #neck, #belly, #leg, #footer { behavior: url(/global/iepngfix.htc) }
#sidebar .module h2, #sidebar2 .module h2{
behavior: url(/global/iepngfix.htc)
}











/*Normal Theme for the new exteen*/ /*Copyright by Etceto co,ltd. 2007*/ /*=====================================*/
/* Simple Reset - Not Editable*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}

(โค้ดแผงข้างบนไม่ต้องเปลี่ยนมันก็ได้)

/* General */

body {
background:#FBFCFC url(http://g.exteen.com/t/simple/bck.gif) repeat top left;
(<< ส่วนนี้คือพื้นหลังถ้าจะเปลี่ยน BG ให้นำ url มาใส่แทนที่ขีดเส้นใต้ แต่ถ้าจะให้BGเป็นสีธรรมดา(เหมือนบล็อกไซที่เป็นสีชมพู)ให้ลบ url ที่มีอยู่ซะ แล้วเปลี่ยนโค้ดสีที่เป็นตัวหนาแทน)
color:#333; (<< สีตัวอักษรทั่วไป(ของไซเป็นสีชมพู) ถ้าจะเปลี่ยนก็นำโค้ดสีมาก็อปวางได้เลย)
font:12px Tahoma, "MS Sans Serif"; (<< ขนาดและฟ้อนต์ของตัวอักษร)
line-height:1.5em; (<< ระยะห่างของแต่ละบรรทัด(โค้ดที่ให้มาสวยที่สุดแล้ว ไม่ต้องเปลี่ยน))
text-align:center; (<< ลักษณะการวางบล็อก center คืออยู่ตรงกลาง ถ้าจะเปลี่ยนก็ left right ธรรมดา)
}

(อันที่ี่จริงไม่ต้องเปลี่ยนมันก็ได้นะ เพราะไซว่าที่เขาให้มามันก็สวยอยู่แล้ว)


a:link, a:visited{
color:#0054a6; (<< สีของลิ้งค์)
text-decoration:none;
}

a:hover, a:active{
color:#0081ff; (<< สีของลิ้งค์ขณะที่เอาเม้าส์วางอยู่)
}

#page{
margin:auto; (<<ขอบ ไม่ต้องไปเปลี่ยนมันหรอกเดี๋ยวยุ่งยากกว่าเดิม =w=)
padding-top:15px; (<<ที่รอง อันนี้ก็ไม่ต้องเปลี่ยน)
text-align:left; (<<การจัดวางเนื้อหา..ถ้าจะเปลี่ยนให้เนื้อหาอยู่ด้านขวาก็แปะ right แทนที่ left ให้อยู่ตรงกลางก็ center )
width:780px; (<<ความกว้างของเอนทรี่ พูดงี้แล้วกัน ถ้าเทียบกับบล็อกไซก็คือความกว้างของพื้นที่สีขาวๆ)
}

#header, #neck, #belly, #leg, #footer{
float:left; (จะปรับเป็น left or right ก็ได้แต่อย่าเปลี่ยนเป็น center เพราะจะทำให้บล็อกเละ...แต่จริงๆไม่ต้องเปลี่ยนมันกันได้)
width:780px; (ให้เปลี่ยนเป็น100%เพราะมันจะทำให้การตกแต่งบล็อกของเราง่ายขึ้น)
}



/*=====================================*/
/* Header */


#header{
background:#FFF; (<< พื้นหลังส่วนของหัวบล็อก)
padding:20px 0px 0px 0px; (<< ความห่าง... โดยจะเรียงเป็น บน ขวา ล่าง ซ้าย)
text-align:center;
position:relative;
}

#header h1 a{
color:#666; (<<สีของของชื่อบล็อก..ข้างบนหัวบล็อกมันจะมีชื่อ (ของไซเป็น"Zaiki mizu{ฮูเล่}" < สีของอันนี้แหละ))
font-size:24px; (<< ขนาดอักษร)
}

#header h1 a:hover{
color:#999; (<< สีของอักษรขณะเอาเม้าส์ไปวาง(ตรงชื่อบล็อก))
}

#header h2{
font-size:12px; (<< ขนาดของคำอธิบายข้างใต้ชื่อบล็อก)
margin:5px 0px 5px 0px; (<< ความห่าง... โดยจะเรียงเป็น บน ขวา ล่าง ซ้าย)
}

#coverimage{
background:url(http://g.exteen.com/t/simple/cover.jpg) no-repeat; (<< รูปหัวบล็อกให้เปลี่ยน url แทนที่ขีดเส้นใต้(ของไซเป็นสีชมพูๆเขียนว่า A perfact DAY ไง~))
height:100px; (<< ความสูงภาพของหัวบล็อกต้องปรับให้เท่ากับภาพนะจ๊ะ~)
width:730px; (<< ความกว้าง)
margin-left:25px !important; (<< ระยะห่างของภาพจากขอบด้านซ้าย)
margin-left:0px; /*Fix IE Bug*/
}

/*=======================================*/
/* Neck Menu */

#neck{
background:#FFF; (<<พื้นหลัง"ขอบ"ของ neck )
}

#neck .module{
background:#d7d7d7; (<<สีของ neck )
display:inline;
float:left; (<<กำหนดว่าส่วนของเมนูอยู่ตรงไหน ถ้าจะให้อยู่ด้านขวาก็ right)
margin:0px 0px 0px 25px; (<<ระยะห่างจากขอบ(ซ้ายขวา))
padding:2px 0px 5px 0px; (<<ระยะห่างจากขอบ(บนล่าง))
width:730px; (<<ความกว้างของระยะเมนู)
}

#neck .module ul{
display:inline;
margin:0px;
padding:0px;
}

#neck .module h2{
display:none;
}

#neck .module li{
border-right:1px solid #CCC; (<<สีของเส้นขคั่นเมนู)
display:inline; (<<ให้เมนูอยู่บรรทัดเดียวกัน ถ้าจะให้เรียงต่อกันเป็นบรรทัดก็ลบ inline ออกซะ)
padding:0px 10px 0px 10px; (<<ระยะความห่างของเมนูและเส้น)
}

/*=======================================*/
/* Content */

#belly{
background:#FFF; (<<สีของพื้นที่ส่วนเนื้อหาเอนทรี่(belly))
}

#content{
display:inline;(<<)
float:left; (<<ให้เนื้อหาอยู่ด้านขวาหรือซ้ายของ belly)
margin:10px 15px 0px 25px; (<<ระยะห่างจากขอบ โดยเรียงเป็น บนขวาล่างซ้าย)
width:490px; (<<ความกว้างของเนื้อหา(belly))
/*Fix too large image makes content drop problem in IE*/
overflow:visible !important;
overflow:hidden;
}

.entry{
float:left;
margin-bottom:15px; (<<ความห่างของเส้นกับชื่อเอนทรี่)
border-bottom:1px solid #CCC; (<<สีขอเส้นกั้นเอนทรี่)
}

.entry .title{
display:block;
float:left;
margin-bottom:10px; (<<ความห่างของชื่อเอนทร่กับเนื้อหา)
width:100%; (<<ไม่ต้องไปเปลี่ยนมันเหรอ =w=~)
}

.entry .title h2{
font-size:18px; (<< ขนาดอักษรของชื่อเอนทรี่)
}

.entry .title h2 a{
color:#949494;
}

.entry .title h2 a:hover{
color:#CCC; (<<สีของชื่อเอนทรี่)
}

.entry .title span{
color:#666; (<<สีของวันที่ล่างชื่อเอนทรี่)
font-size:10px; (<<ขนาดของวันที่ล่างชื่อเอนทรี่)
}

.entry .post{
float:left;
}

.entry .post p{
margin-bottom:10px;
}

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

.entry .info .tag{
float:left; (<<ให้ tag อยู่ด้านซ้าย...)
font-size:10px; (<<ขนาดอักษรในส่วนของ tag)
width:350px; (<<ความกว้างส่วนของ tag.)
}

.entry .info .coms{
float:right;
}

/*=======================================*/
/* Sidebars */

#sidebar, #sidebar2{
background:#ebebeb; (<<สีของไซท์บาร์)
display:inline;
float:right; (<<ให้ไซท์บาร์อยู่ด้านขวา ถ้าจะให้อยู่ด้านซ้านก็ left ไซแนะนำให้อยู่ด้านซ้ายนะ *.* เพราะมันจะช่วยให้บล็อกไม่แหก...)
margin:5px 25px 0px 0px; (<< กำหนดย่อหน้าของไซท์บาร์...เรียงเป็นบนขวาล่างซ้าย)
width:225px; (<<ความกว้างของไซท์บาร์)
}

#sidebar2{
display:none;
}
#sidebar .module, #sidebar2 .module{
margin:5px 5px 15px 5px; (<< ความห่างของแต่ละบรรทัด ที่เขาให้อยู่ก็สวยอยู่แล้วนะ...)
}

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

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

a.archive{
background:url(http://g.exteen.com/t/simple/icon_archive.gif) no-repeat;
width:12px; (<<ความกว้างของรูป)
height:12px; (<<ความสูง)
padding-left:15px;
margin-left:4px;
}

/*=======================================*/
/* Configure each module */

/* Profile */
#profile{
width:95%; (<<ความกว้างส่วนของประวัติ)
height:64px; (<<ความห่างของหัวข้อแรกกับประวัติ)
}

#profile img{
float:left; (<<รูปตัวแทนอยู่ซ้ายหรือขวา? ซ้ายกด1 ขวากด2 ม๊ายช๊ายย ซาย left ขวา right )
margin-right:10px; (<<ความห่างของนามแฝง&View my profile กับรูปตัวแทน)
}

#profile span{
display:block; (<< ให้ นามแฝง&View my profile อยู่นละบรรทัด)
}

#profile .info{
width:100% !important;
width:60%;
}

/* Tags */
#tags li{
display:inline;
margin-right:5px;
}

/*=======================================*/
/* Comment Form */

#commentform{
width:100%;
background:#EEE; (<<สีของกล่องคอมเม้น )
float:left;
}

#commentform form{
margin:5px; (<<ระยะห่างจากขอบ)
}

#commentform h3{
font-size:16px; (<<ขนาดของหัวข้อ(Comment))
font-weight:bold;
}

#commentform .formrow{
border-top:1px solid #DDD;
padding:2px; (<<ระยะห่าง)
}

#commentform label{
float:left;
width:150px;
}

#commentform input.textbox{
width:150px;
}

#commentform textarea{
width:310px; (<<ความกว้างของกล่องใส่ข้อความ)
height:150px; (<<ความยาวของกล่องใส่ข้อความ)
}

/*=======================================*/
/* Comment (Showing Area) */

.comment{
border-bottom:1px solid #DDD; (<<สีเส้นคั่นคอมเม้น)
float:left;
margin:5px 0px 5px 0px;
padding-bottom:5px;
width:100%;
}

.comment .post{
float:right; (<<ให้ข้อความที่โพสอยู่ด้านซ้ายหรือขวา โดยสลับกับชื่อคนเม้น)
width:330px; (<<ความกว้างของคอมเม้นที่โพส)
}

.comment .post p{
margin-bottom:10px;
}

.comment .info{
float:left;
font-size:10px; (<<ขนาดชื่อของคนเม้น)
width:150px; (<<ความกว้างของเนื้อหาชื่อของคนเม้น)
margin-right:10px;
}

.comment .info img{
width:32px;
}

/*=======================================*/
/* Leg Menu */

#leg{
background:#FFF; (<<สีพื้นหลังของ leg(ส่วนนอก))
}

#leg .module{
background:#d7d7d7; (<<สีพื้นหลังของ leg(ส่วนใน))
display:inline;
float:left; (<<อยู่ด้านซ้าย)
margin:0px 0px 0px 25px; (<<ระยะห่างจากขอบ)
padding:2px 0px 5px 0px; (<<ระยะห่างจากขอบโดยมีผลกับความห่างของแต่ละบรรทัด)
width:730px; (<<ความกว้างของ leg )
}

#leg .module ul{
display:inline;
margin:0px;
padding:0px;
}

#leg .module h2{
font-size:12px; (<<ขนาดของอักษร)
font-weight:bold;
display:inline;
}

#leg .module li{
border-right:1px solid #CCC;
display:inline;
padding:0px 10px 0px 10px;
}

/*=======================================*/
/* Footer */

#footer{
background:#FFF; (<<พื้นหลังของ footer(ส่วนนอก))
height:60px; (<<ความสูง)
}

#footer p{
background:#EEE; (<<พื้นหลังของfooter(ส่วนใน))
border-top:1px solid #CCC;(<<ขนาด+สีของเส้นคั่น(ล่าง))
border-bottom:1px solid #CCC; (<<ขนาด+สีของเส้นคั่น(บน))
font-size:10px; (<<ขนาดตัวอักษรในfooter)
text-align:center; (<<ให้ตัวอักษรอยู่ตรงกลาง.. ถ้าซ้าย left ขวา right)
margin:5px 25px 0px 25px; (<<ระยะห่างจากขอบ เรียงเป็นบนขวาล่างซ้าย)
padding:5px;
}

/*=======================================*/
.navbar{
float:left;
}

.commentmanage{
clear:both;
}

/*PNG support for IE*/
#header, #neck, #belly, #leg, #footer { behavior: url(/global/iepngfix.htc) }
#sidebar .module h2, #sidebar2 .module h2{
behavior: url(/global/iepngfix.htc)
}







มือใหม่หัด How to
จะงงมั้นเนี้ย ฮ่าๆๆ
ฮาวทูแรกก็เสร็จสมบูรณ์..

ปล.โค้ดสีหาได้จาก www.google.co.th โดยพิมพ์ว่า"โค้ดสี"
me/ โดนตบ