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