в b è ä я s ™ `` SING.our.song version 31.0

โหมด : อยากเปลี่ยนธีมอ้ะ กร๊ากก!.
คำเตือน : ทนความรั่วของเจ้าของบลอคด้วยนะคะ
โปรแกรมที่ควรใช้ดูบลอคนี้ : Opera เท่านั้นนะคะ ถ้าเปิด firefox เนื้อหามันเลยบลอคคะ

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


กลับมากับการสอนอีกครั้งนะคะ!!!
คงคาดว่าจะเป็นกาสอนเรื่องของ css ครั้งสุดท้ายละมั้งคะ
เอิ๊กกก .. ก็ออกแนวหมดอะไรจะสอนแล้วอ้ะคะ ยังไงก็ตามขอขอบคุณทุกท่านนะคะ *โค้งงามๆ*
หรือถ้ามีอะไรสงสัยก็โพสต์ไว้เลยนะคะ (ที่คอมเมนต์ละคะ)


วันนี้จะมาสอนเรื่อง ธีมของยามาโมโตะ
ที่ผักได้ทำฟรีธีมเอาไว้นะคะ คลิกตามลิงค์นี้คะ



จะสอนแบบไม่มีภาพประกอบนะคะ
คือได้ทำการสอนแบบเบสิกไปแล้วเนอะ ครั้งนี้คงไม่จำเป็นอ้ะคะ (ขี้เกียจด้วยละ กร๊ากก!.)


มาเริ่มกันเลยนะคะ!!
.
.

/*Normal Theme for the new exteen*/
/*Copyright by Etceto co,ltd. 2007*/
/*Create by bbears --- http://bbears.exteen.com*/

/*=======================================================*/

/* 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-image: url(http://i81.photobucket.com/albums/j229/mytheme/exteen/free-hbdyama/bgcopy.jpg) fixed repeat; <<พื้นหลังของบลอค ได้ตั้งค่าเอาไว้ว่า fixed คือไม่ให้เคลื่อนตามบลอค แต่ภาพจะซ้ำๆ กันจนเต็มบลอคคะ
color: white; <<สีของตัวอักษรทั้งหน้าของบลอค
font:11px tahoma; <<ขนาดและชนิดของตัวอักษรนะคะ (ทั้งหน้าของบลอค)
line-height:1.5em;
text-align:center;
}

a img{ <<เวลาที่เรามีภาพเป็นลิงค์อ้ะคะ ให้มาเซ็ตตรงนี้ก่อนว่า ภาพก่อนที่จะโดนเมาส์คะ
border:0px solid #;
}

a:hover img{ <<ส่วนตรงนี้ก็เป็นเวลาที่เรามีภาพเป็นลิงค์อ้ะคะ ภาพหลังที่จะโดนเมาส์คะ
border:0px solid #444;
}

a:link, a:visited{ <<เป็นส่วนของลิงค์ทั้งบลอคอ้ะคะ ตรงนี้จะเป็นส่วนของก่อนมาส์มาชี้อ้ะคะ
color:#777; <<สีของตัวหนังสืออ้ะคะ
text-decoration:none;
font-size:11px; <<~ขนาดของตัวอักษรอ้ะคะ
letter-spacing:0px;
}

a:hover, a:active{ <<ส่วนของลิงค์ทั้งหมด หลังเอามาส์ไปชี้นะคะ
color:#0039c7; <<สีของตัวอักษรคะ
}

#page{ <<ตั้งค่าในส่วนของ page อ้ะคะ (ที่อยู่ใต้เฮด)
margin:auto;
padding-top:0px;
text-align:left;
width:600px; <<เซ็ตความกว้างที่เราต้องการให้เป็น 600px. ทั้งหมดเลยนะคะ (แล้วแต่นะ เปลี่ยนได้)
}

#header, #neck, #belly, #leg, #footer{
float:left;
width:600px; <<ส่วนความกว้างตรงนี้ต้องเซ็ตให้เท่ากันกะด้านบนนะคะ
}

/*=======================================================*/

/* Header */ <<ส่วนภาพด้านบนของเฮดอ้ะคะ

#header{
background:url() black top center no-repeat; <<เป็นการตั้งค่าของภาพเฮดอ้ะคะ ในที่เซ็ตว่าพื้นหลังของภาพเป็นสีดำ อยู่ตรงกลางอ้ะคะ (เปลี่ยนได้ตามสบายนะคะ)
padding:0px 0px 0px 0px;
}

#header h1 a{
display:none;
}

#header h1 a:hover{
display:none;
}

#header h2{
display:none;
}

#coverimage{
background:url(http://i81.photobucket.com/albums/j229/mytheme/exteen/free-hbdyama/headcopy.jpg) no-repeat; <<นี้ก็เป็นส่วนของเฮดนะคะ เป็น url ของภาพ
height:421px; <<ความสูงของภาพคะ
width:600px; <<ความกว้างของภาพ นะคะ
margin-bottom:0px; <<เติมเอาไว้นะคะ กันบักเมื่อดูใน ie อ้ะคะ
}

/*=======================================================*/

/* Neck Menu */ <<เป็นส่วนที่เป็น feather ใหม่ของเอ็กทีนนะจ่ะ ~ที่อยู่ใต้เฮด พวกคำว่า Home งี้อ่ะ (ในส่วนนี้ผักขอเรียกว่าส่วนของ PAGE คะ)

#neck{
background:url(http://g.exteen.com/t/darkapollo/belly.png) top left;

}

#neck .module{
background:url() black no-repeat; <<พื้นหลังของส่วนของ neck อ้ะคะที่อยู่ใต้เฮดอ้ะคะ (ตรงนี้ได้เซ็ตเป็นสีดำนะคะ ถ้าจะเปลี่ยนก็ให้ลบตรสีดำออก แล้วเติม # ตามด้วยรหัสสีคะ)
display:inline;
float:left;
margin:0px 0px 0px 0px;
padding:0px 0px 10px 0px;
width:600px; <<ความกว้างตรงนี้ต้องตั้งค่าให้เท่ากับด้านบนเช่นกันนะคะ
}

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

#neck .module h2{
display:none;
}

#neck .module li{
border-right:1px solid #777; <<ตรงนี้เป็นเส้นคั่นของส่วน page อ้ะคะ
display:inline;
padding:0px 15px 0px 15px; <<ความห่างแต่ละข้อความใน page อ้ะคะ
}

/*=======================================================*/

/* Content */ <<ส่วนของเนื้อหา หรือเรียกว่า content

#belly{
background:url() black repeat-y; <<ส่วนตรงนี้เป็นการบอกว่า พื้นหลังสีดำอ้ะคะ (ให้เปลี่ยนจาก black เป็น # ตามด้วยรหัสสีนะคะ)
}

#content{
display:inline;
float:left; <<ให้อยู่ทางด้านซ้านอ้ะคะ (แล้วทำให้ส่วนของ sidebar จะอยู่ทางด้านขวาอ้ะคะ)
margin:10px 3px 0px 13px;
width:400px; <<ความกว้างของ content (แล้วให้เผื่อในส่วนของ sidebar ด้วยนะคะ เมื่อบวกกันแล้วห้ามเกิน 600 px. ที่เราตั้งค่้าไว้ด้านบนอ้ะคะ)
/*Fix too large image makes content drop problem in IE*/ <<ห้ามลบเด็ดขาดเลยนะคะ
overflow:visible !important;
overflow:hidden;
}

.entry{ <<ในส่วนของเนื้อหา หรือ entry ที่เราเขียนๆ อ้ะคะ
margin-bottom:15px; <<ก็เป็นความห่างจากตรงท้ายสุดของแต่ละเอนทรี่นะคะ
border-bottom:2px solid #0039c7; <<เส้นคั่นที่สร้างเอาไว้คั่นแต่ละเอนทรี่ละคะ (แก้ได้นะคะ)
}

.entry .title{ <<ในส่วนชื่อของเอนทรี่อ้ะคะ
display:block;
margin-bottom:10px; <<หมายถึงห่างจากตรงท้ายของชื่อเอนทรี่เท่าไรอ้ะคะ
width:100%; <<ความกว้างจรงนี้จะเป็นความกว้างของ content นะคะ
}

.entry .title h2{ <<ตั้งค่าของชื่อเอนทรี่โดยตรงอ้ะคะ
font-size:12px;
font-weight:bold;
padding-bottom:3px;

}
.entry .title h2 a{ <<เป็นชื่อเอนทรี่ก่อนลิงค์มาชี้อ้ะคะ
color:#0039c7; <<สีของตัวอักษรอ้ะคะ
font-size:16px;
font-weight:bold;
}

.entry .title h2 a:hover{ <<เป็นชื่อเอนทรี่หลังลิงค์มาชี้อ้ะคะ
color:#777;
}

.entry .title span{ <<ตั้งค่าของส่วนรายละเอียดของเอนทรี่นั้น (เช่นโพสต์วันไหน เวลาไหน)
color:#777;
font-size:9px;
padding: 3px;
background-color:black; <<พื้นหลังของข้อความที่เกี่ยวกะรายละเอียดการเขียนบลอคของเรา
}

.entry .post{
float:;
}

.entry .post p{ <<ตรงด้านล่างสุดของเอนทรี่ (หรือเนื้อหาที่เราเขียน)
margin-bottom:10px;
}

.entry .info{ <<พวก comment และ tag ของเราอ้ะ
float:left;
width:100%;
}

.entry .info .tag{ <<เป็นส่วนของ tag
float:left; <<ให้อยู่คนละทางกะส่วนของ comment
font-size:9px;
padding:0px 0px 10px 0px;
width:100%;
}

.entry .info .coms{ <<เป็นส่วนของ comment (ที่ขึ้นว่ามีคนมาคอมเมนต์บลอคเราเท่าไร)
float:right; <<ให้อยู่คนละทางกะส่วนของ tag
}

/*=======================================================*/

/* Sidebars */ <<เป็นแถบ ที่อยู่ ตรงข้ามกับ content

#sidebar, #sidebar2{
background:#000; <<สีแบกราวน์ ในส่วน นี้
display:inline;
float:right; <<เป็น การตั้งค่าในส่วนของ sildebar ว่าจะให้อยู่ทางไหน (ต้องตั้งค่าให้ตรงข้ามกะ content เสมอ)
margin:5px 15px 0px 0px;
width:152px; <<ความกว้่างของแทบ sildebar
border-left:1px solid #0039c7; <<ตรงเส้นที่คั่นระหว่าง sidebar กะ content อ้ะคะ
}

#sidebar2{ <<ในกรณี ที่แสดงค่า slidebar สองด้าน
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{
text-indent:-9999px;
}

/* Sidebar Header image */ <<พวกภาพหัวข้อของแถบ slidebar อ้ะ (ผักจะอธิบายด้วยตัวหนังสือสีแดงๆ นะคะ แล้วก็ผักทำแค่สามหัวข้ออ้ะคะ)

#sidebar #recommend h2, #sidebar2 #recommend h2{background:url(http://i81.photobucket.com/albums/j229/mytheme/exteen/free-hbdyama/recommend.jpg) <<ภาพของคำว่า recommend ;width:150px; <<ความกว้างของภาพ height:20px; <<ความสูงของภาพ }
#sidebar #previous h2,#sidebar2 #previous h2{background:url(http://i81.photobucket.com/albums/j229/mytheme/exteen/free-hbdyama/previous.jpg) <<ภาพของคำว่า previous ;width:150px; <<ความกว้างของภาพ height:20px; <<ความสูงของภาพ }
#sidebar #commentalert h2,#sidebar2 #commentalert h2{background:url() no-repeat;width:150px;height:20px;}
#sidebar #favourites h2,#sidebar2 #favourites h2{background:url(http://i81.photobucket.com/albums/j229/mytheme/exteen/free-hbdyama/favourites.jpg) <<ภาพของคำว่า favourites ;width:150px; <<ความกว้างของภาพ height:20px; <<ความสูงของภาพ}
#sidebar #links h2,#sidebar2 #links h2{background:url() no-repeat;width:150px;height:20px;}
#sidebar #categories h2,#sidebar2 #categories h2{background:url() no-repeat;width:150px;height:20px;}
#sidebar #archives h2,#sidebar2 #archives h2{background:url() no-repeat;width:150px;height:20px;}
#sidebar #tags h2,#sidebar2 #tags h2{background:url() no-repeat;width:150px;height:20px;}
#sidebar #pagemenu h2,#sidebar2 #pagemenu h2{background:url() no-repeat;width:150px;height:20px;}

a.archive{
background:url() no-repeat; <<ถาพเล็กๆที่อยู่หลัง ลิงค์ที่อยู่ในแถบของ categories
width:12px; <<ความกว้างของภาพ
height:12px; <<ความสูงของภาพ
padding-left:15px;
margin-left:4px; <<ภาพห่างจากด้านซ้าย
}

/*=======================================================*/

/* Configure each module */ <<พวกแถบของ profile อ้ะ

/* Profile */
#profile{
width:100%; <<หมายถึง กว้าง 100% ของแถบ slidebar นี้นะ
height:100px; <<ความสูง ของแทบนี้เท่าไร (น่าจะตั้งให้เกิน ความสูงของภาพประจำตัวเรานะ)
padding-left:5px;
}

#profile img{
float:center; <<ภาพประจำตัวเรา ให้อยู่ทางไหน
margin-bottom:2px; <<ห่างจากด้านขวาเท่าไร
}

#profile span{
display:block;
}

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

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

/*=======================================================*/

/* Comment Form */ <<เรียกว่าในส่วนของของที่เขียนคอมเมนต์นะคะ

#commentform{ << ตรงนี้เป็นส่วนกล่องคอมเมนต์ทั้งหมดเลยอ้ะคะ
width:100%; <<ความกว้างของกล่องคอมเมนต์ จะมีขนาดเท่ากับความกว้างของเอนทรี่นะคะ
background:#000; <<แบลคกลาวน์ของคอมเมนต์ ว่าเป็นสีอ้ะคะ
float:left; <<เป็นการจัดวาง ถ้าจะเปลี่ยนเป็นขวาก็ เปลี่ยนจาก left เป็น right นะคะ
font-size:9px; <<ขนาดตัวอักษรนะคะ
}

#commentform form{
margin:0px;
}

#commentform h3{
font-size:12px; <<ขนาดของข้อความที่ขึ้นคำว่าคอมเมนต์อ้ะคะ
font-weight:bold;
}

#commentform .formrow{
border-top:0px solid #000; <<เส้นที่คั่นๆ อยู่นะ
padding:2px; <<ข้อความต่างๆ ห่างจากด้านบนเท่าไร
}

#commentform label{
float:right;
font-size:1px;
color:#000;
width:1px; <<เป็นความกว้างของฝั่งทางด้านซ้ายอ้ะคะ (ตรงนี้ผักจะไม่มีอ้ะคะ ดังนั้นจะไม่เห็นพวกคำว่า name หรือ comment อ้ะคะ)
}

#commentform input{ <<เป็นกล่องที่เราพิมพ์ข้อความลงไปอ้ะคะ น่าจะเป็นสำหรับเวลาที่เราไม่ได้ log in อ้ะคะ
color:#555;
font:9px tahoma;
}

#commentform textarea{
width:60%; <<เป็นความกว้างกล่องที่เราพิมพ์ข้อความ เพื่อที่จะคอมเมนต์ลงไปอ้ะคะ
height:70px; <<เป็นความสูงกล่องที่เราพิมพ์ข้อความ เพื่อที่จะคอมเมนต์ลงไปอ้ะคะ
margin-top: 5px;
font-size:11px;
}

/*=======================================================*/

/* Comment (Showing Area) */ <<เป็นส่วนที่แสดงคอมเมนต์อ้ะคะ

.comment{ <<เป้นส่วนของกาารตั้งค่าเบื้องต้นของส่วนที่แสดงนี้อ้ะคะ
border-bottom:1px dotted #0039c7; <<หมายถึงเส้นสี #0039c7 ให้วางอยู่ด้านล่างของข้อความแต่ละคอมเมนต์ เป็นเส้นจุดๆ ขนาด 1 px นะคะ
float:left; <<เป็นการจัดตำแหน่งของส่วนนี้อ้ะคะ ให้พยายามตั้งค่าตรงกับส่วน entry นะคะ
margin:5px 0px 5px 5px;
padding-bottom:5px;
width:100%; <<ความกว้างของกล่องแสดงคอมเมนต์
}

.comment .post{ <<เนื้อหาของคอมเมนต์คะ
float:left; <<จัดวางให้อยู่ฝุั่งทางขวา
width:325px; <<ความกว้างของเนื้อหานี้
}

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

.comment .info{ <<รายละเอียดของการโพสต์ พวกวันที่ ชื่อคนโพสต์ คะ
float:left; <<จัดวางให้อยู่ด้านซ้าย (คนละตำแหน่งกับส่วนเนื้อหาคะ)
font-size:9px; <<ขนาดของตัวอักษรคะ
width:100%; <<ความกว้างของส่วนนี้ (เมื่อบวกกันแล้วต้องไม่เกิน ส่วนความกว้างทั้งหมดตนแรกที่เราตั้งค่าส่วนนี้นะคะ)
margin-right:10px;
color:#0039c7; <<สีของตัวอักษรคะ
}

.comment .info img{ <<ส่วนของภาพอ้ะคะ
display:none; <<ความกว้างของภาพดิสเพลย์เรา
}

/*=======================================================*/

/* Leg Menu */ <<ตรงที่แสดงข้อความของเอ็กทีนด้านล่างอ้ะคะ (ผักไม่เซ็ตอะไร เพราะไม่ให้แสดงในส่วนนี้อ้ะคะ)

#leg{
background:url() left top;
}
#leg .module{
display:none;
}

#leg .module ul{
display:none;
}

#leg .module h2{
display:none;
}
#leg .module li{
display:none;

}

/*=======================================================*/

/* Footer */ <<เป็นส่วนด้านล่างบลอคสุดเลยอ้ะคะ

#footer{
background:url(http://i81.photobucket.com/albums/j229/mytheme/exteen/free-hbdyama/footcopy.jpg) bottom repeat; <<ภาพ footer ใส่ตรงนี้คะ ตรงนี้ได้นะคะ
height:40px; << มาเซ้ตความสูงของ footer เราด้วยนะคะ
}

#footer p{
display:none;
}

/*=======================================================*/

.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)
}


.
.
จบแล้วละค่า!!!
มีใครสงสัยอะไรก็คอมเมนต์ไว้นะคะ ถ้าแคปภาพมาให้ยิ่งดีค่า
แล้วก็รบกวนที่ใครเอาไปทำธีม กรุณาคอมเมนต์ไว้ด้วยนะคะ
ขอบคุณที่ติดตาม และขอบคุณสำหรับทุกคอมเมนต์เลยนะคะ!





ไว้เจอกันเอนทรี่หน้านะคะ *เผ่น~*