Ai-bluedog : หมาหน่อ

หลังจากที่แปะแต่รูปวาดกับการ์ตูน อยากลองเขียน How to... หรือสาระกับเค้าบ้าง
จะเขียน how to CG จะเอาอะไร๊ไปเขียน จับเท จับเทลูกเดียว (ก้าก!) 

เลยเอาธีมมาแจกและอธิบายเกี่ยวกับธีม โดยโครงต้นแบบของธีมนำมาจากธีม Bus stop ของ Gmail ค่ะ
(แต่ทำออกมาได้ไม่เหมือนเท่าไร)(ก้าก)

หมาหน่ออาจไม่เชี่ยวชาญเกี่ยวกับโค้ดต่างๆ เท่าใดนัก
ถ้าหากผิดพลาดประการใด ก็ขออภัยมา ณ ที่นี้ด้วยนะคะ
.

 ---------------------------------------------[ Exteen: gmail theme]----------------------------------------------
.

 
:: Download ::

คำแนะนำการใช้
1. ใช้แต่งบล็อก (เง้อ...)
2. เข้าที่ Theme -> CSS Editor
3. คัดลอก CSS Code จากไฟล์ และนำไปวาง

ในไฟล์ประกอบด้วย
1. ไฟล์โค้ด CSS: Theme_gmail.txt
2. ภาพตัวอย่างธีม: Theme_gmail_jpg.jpg
3. พื้นหลังในส่วนต่างๆ ของธีมบล็อก

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

Special Thanks: gmail
.

-----------------------------------------------------[ คำอธิบาย ]--------------------------------------------------
.

โค้ดธีม จขบ. ศึกษาจากบล็อกที่เคยสอนการแต่งธีมเอาไว้
และงมกับ CSS จากเว็บไซต์ที่ได้สอนทำเอาไว้ โดยหลักๆ จะมี 2 เว็บไซต์ ได้แก่
http://www.w3schools.com/css/default (ภาษาอังกฤษ) และ
http://www.enjoyday.net/webtutorial/css/index.html (ภาษาไทย)

ขออธิบายตามความเข้าใจของ จขบ. นะคะ
เอนทรี่นี้ก็ค่อยๆ เขียนเก็บเอาไว้นานแล้ว (บางทีเขียนเอาไว้อ่านเองด้วย)
** คลิกที่สารบัญ เพื่อดูเนื้อหาแต่ละส่วนได้เลยค่ะ และคลิกที่ ::content:: เพื่อกลับมายังสารบัญ **
** หากมีข้อผิดพลาด ก็ขออภัยมา ณ ที่นี้ค่ะ **

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

โครงสร้างและการกำหนดความกว้างของธีม

โครงสร้างของธีมบล็อกเอ็กทีน แบ่งออกเป็น 5 ส่วนด้วยกัน
  1. Header : ส่วนหัวของบล็อก ประกอบไปด้วยชื่อบล็อก คำอธิบายและรูปภาพหัวบล็อก
  2. Neck menu : ส่วนคอของบล็อกเอาไว้ใส่ Widgets ต่างๆ
  3. Content : ส่วนแสดงเนื้อหาเอนทรี่,คอมเม้นท์และ sidebars menu
  4. Leg menu : ส่วนขาของบล็อกเอาไว้ใส่ Widgets ต่างๆ
  5. Footer : ส่วนท้ายของบล็อก 

:: content ::

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

Margin และ Padding (?)

คำสั่งทั้ง 2 ตัวนี้คือการกำหนดระยะห่างขอบของวัตถุหนึ่ง กับวัตถุอื่นๆ
อ่ะ! งงล่ะสิ ใช่...หมาหน่อก็ยังงงเหมือนกัน (แล้วเอามาบอกทำไมเนี๊ย!!!!)

Margin คือการกำหนดระยะห่างของขอบวัตถุด้านนอก กับวัตถุอื่นๆ
      margin-top         ระยะห่างด้านบน
      margin-right       ระยะห่างด้านขวา
      margin-bottom   ระยะห่างด้านล่าง
      margin-left          ระยะห่างด้านซ้าย

หรือจะเขียนรวมกันเป็น margin: 0px 0px 0px 0px; = บน ขวา ล่าง ซ้าย

Padding คือการกำหนดระยะห่างภายในวัตถุนั้นๆ หรือจะเรียกว่าย่อหน้าก็ได้
การเขียนโค้ดก็เหมือนกับ margin

padding: 0px 0px 0px 0px; = บน ขวา ล่าง ซ้าย 

:: content ::

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

Module / h2 / ul / il

คือ แต่ละส่วนของกล่องเมนูบล็อก (ก็คือกล่อง Widgets นั้นเอง)
     ซึ่งเราสามารถทำการวาง Widgets ตามส่วนต่างๆ โดยไปที่ Theme -> Widgets

:: content ::

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

Boarder

เราสามารถใส่กรอบ แล้วกำหนดลักษณะต่างๆ ได้

การใส่คำสั่งกรอบสามารถใส่ได้ดังนี้
border: (ขนาดเส้นกรอบ)px (ลักษระเส้นกรอบ) #(สีเส้นกรอบ);

:: content ::

/*===============================================*/
/* General */

/*ภาพรวมของบล็อก (Header, Entry, Sidebars, etc.)*/
body {
background:#afdbe5 url (ลิงค์รูปภาพพื้นหลัง) bottom center no-repeat; <-- พื้นหลังอยู่ตำแหน่ง
ล่าง -กลาง และไม่ทำการซ้ำรูปภาพ
color:#333;
font:12px Tahoma, "MS Sans Serif";
line-height:1.5em;
text-align:center; <-- ตำแหน่งของ body ในหน้าต่างแสดงผล
Background-Attachment: fixed; <-- ตั้งค่าให้ภาพพื้นหลังอยู่กับที่ไม่เลื่อนไปตาม Scroll Bar
}

/*สีของลิงค์*/
a:link{
color:#006699; <-- สีตัวอักษร
text-decoration:none;
}

/*สีของลิงค์ที่เคยคลิกเข้าไปดูแล้ว*/
a:visited{
color:#23b7ef; <-- สีตัวอักษร
text-decoration:none;
}

/*สีของลิงค์ของลิงค์เมื่อนำเคอเซอร์เมาท์ไปวางและสีของลิงค์เมื่อคลิก*/
a:hover, a:active{
color:#264868; <-- สีตัวอักษร
font-weight:bold; <-- ตัวอักษรเป็นตัวหนา
}

/* ส่วนของ Page*/
#page{
margin:auto;
padding-top:0px;
text-align:left; <-- เรียงตัวหนังสือไปทางซ้าย
width:1000px; <-- กำหนดความกว้างของ Page
}

/*ความกว้างทั้งหมดของบล็อก*/
#header, #neck, #belly, #leg, #footer{
float:left; <-- เรียงไปทางซ้ายมือของจอ
width:1000px; <-- ความกว้างของบล็อก
}

:: content ::

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

#header{
background:url(ลิงค์รูปภาพพื้นหลัง) no-repeat; <-- พื้นหลังของหัวบล็อก ไม่ทำซ้ำ
padding:10px 0px 0px 0px;
text-align:right; <-- ตัวอักษร(ชื่อบล็อก) เรียงไปทางขวา
position:relative; <-- เรียงตำแหน่ง โดยอ้างอิงจากจุดที่หัวบล็อกอยู่ (อ๊ะ! งง)
}

#header h1{
color:#FFF; <-- สีของตัวอักษร
display:inline;
}

/* สีตัวอักษรชื่อบล็อก*/
#header h1 a{
color:#00496b;
font-size:20px;
font:20px Verdana; <-- ฟอนต์
font-variant:small-caps; <-- ตัวอักษรพิมพ์ใหญ่ โดยขนาดตัวอักษรเท่ากับพิมพ์เล็ก
font-weight:bold; <-- ตัวอักษรเป็นตัวหนา
}

/*สีตัวอักษรชื่อบล็อกเมื่อนำเคอเซอร์เมาท์ไปวาง*/
#header h1 a:hover{
color:#FFF;
}

/*สีตัวอักษรคำอธิบายเกี่ยวกับบล็อก*/
#header h2{
color:#666666;
font-size:12px;
margin:0px 0px 0px 0px;
display:none; <-- ไม่แสดงคำอธิบายเกี่ยวกับบล็อก
}

/*Header Picture*/
#coverimage{
background:url(ลิงค์รูปภาพหัวบล็อก) no-repeat;
height:0px; <-- ความสูงของรูปภสพหัวบล็อก
width:780px; <-- ความกว้างของรูปภาพหัวบล็อก
text-align:center; <-- แสดงตำแหน่งรูปไว้ตรงกลาง
margin-left:25px !important;
margin-left:0px; /*Fix IE Bug*/
margin-bottom:15px !important;
display:none; <-- ไม่แสดง Header Picture
}

:: content :: 

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

#neck{
background:url (ลิงค์รูปภาพพื้นหลัง) top left no-repeat;
width:640px; <-- กำหนดความกว้าง
float:right; <-- ให้เรียงไปทางด้านขวามือ
}

/*ตั้งค่าโมดูลแต่ละอันที่อยู่ใน Neck*/
#neck .module{
display:inline; <-- แสดงผลเป็นแบบแถว
float:right; <-- เรียงส่วน neck ไปทางด้านขวามือ
margin:20px 20px 0px 0px;
}

#neck .module h2{
display:none; <-- ไม่แสดงหัวข้อโมดูล
}

#neck .module ul{
background:#FFFFFF; <-- สีพื้นหลังของแถบตัวเลือกเมนู
display:inline; <-- แสดงผลเป็นแบบแถว
padding:0px 0px 0px 0px;
}

#neck .module li{
border-right:1px dotted #333333; <-- กรอบคั่นระหว่างข้อความ
display:inline; <-- แสดงผลเป็นแบบแถว
padding:0px 10px 0px 10px;
}

:: content :: 

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

/*ส่วนที่แสดงเอนทรี่และ sidebar*/
#belly{
background:url(ลิงค์รูปภาพพื้นหลัง) repeat-y top center; <-- ให้พื้นหลังทำการซ้ำรูปในแนวตั้ง
}

/*ส่วนของเนื้อหาเอนทรี่*/
#content{
background:#FFF;
display:inline;
float:right;
width:630px; <-- กำหนดความกว้างของพื้นที่เอนทรี่

/*Fix too large image makes content drop problem in IE*/
overflow:visible !important;
overflow:hidden;
<-- คำสั่ง overflow ใช้ในกรณีที่แถบ sidebar อยู่ทางขวา เวลารูปในเนื้อหาเอนทรี่ทางซ้ายใหญ่เกินขนาด
content รูปจะหายไป หรือเรียกง่ายๆ คือ มันมุดหลบหลัง sidebar นั้นเอง
}

/*ส่วนของเอนทรี่ทั้งหมด*/
.entry{
float:left; <--เอนทรี่เรียงไปด้านซ้ายมือของ content
width:100%;
margin:5px 0px 20px 7px;
}

/* ส่วนหัวข้อของเอนทรี่*/
.entry .title{
display:block; <-- หัวข้อเอนทรี่แสดงผลเป็นลักษณะกล่อง
float:left; <-- เรียงไปทางซ้าย
margin-top:5px;
margin-bottom:25px;
}

/*ขนาดของหัวเรื่องเอนทรี่*/
.entry .title h2{
font-size:18px; <-- ขนาดตัวอักษร
}

/*สีลิงค์ของหัวเรื่องเอนทรี่*/
.entry .title h2 a{
color:#000000; <-- สีของลิงค์
}

.entry .title h2 a:hover{
color:#666666; <-- สีของลิงค์เมื่อเอาเมาท์ไปวาง
}

/*รายละเอียดของเอนทรี่ เช่น วันที่โพส*/
.entry .title span{
color:#666; <-- สีตัวอักษร
font-size:10px; <-- ขนาดตัวอักษร
}

/*ส่วนเนื้อหาเอนทรี่*/
.entry .post{
float:left; <-- เนื้อหาเอนทรี่เรียงไปทางซ้าย
}

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

/*ข้อมูลเอนทรี่ที่อยู่ตรงส่วนท้ายของเอนทรี่*/
.entry .info{
float:left; <-- เรียงไปทางซ้าย
width:100%; <-- กว้างตามขนาด content
margin:20px 0px 10px 0px;
}

/* ตั้งค่า tag ที่อยู่ท้ายเอนทรี่*/
.entry .info .tag{
float:left;
font-size:10px;
width:400px; <-- กำหนดความกว้างของ tag
}

/* ปุ่มคอมเม้นท์*/
.entry .info .coms{
float:right; <-- ปุ่ม comment เรียงอยู่ทางด้านขวามือ
margin-right:20px;
}

:: content ::  

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

จะสังเกตได้ว่าโมดูลบางอัน ถึงจะอยู่ใน sidebar เดียวกัน แต่แสดงผลไม่เหมือนกัน
(บางอันมีฉากหลัง บางอันไม่มีฉากหลัง)

ก่อนอื่นเลือก Widgets ใส่ลง sidebar แต่ละอันให้เรียบร้อย ในที่นี้หมาหน่อเลือก
Sidebar#1 : Profile, Previous และ Comments
Sidebar#2 : Categories, Recommend, Favourites และ Link

จากนั้นพิมพ์โค้ดเพื่อตั้งค่าในแต่ละโมดูล เช่น
จะแต่งหัวข้อของ previous ใน sidebar#1
ให้พิมพ์ #sidebar #previous h2{} เพิ่มเข้าไป (ตัวอักษรสีส้ม)

/*โมดูลทั้งหมดใน sidebar#1*/
#sidebar .module{
margin:25px 0px 0px 5px;
width:320px; <-- ความกว้างของแต่ละโมดูล
height:130px; <-- ความสูงของแต่ละโมดูล
display:block; <-- แสดงผลโมดูลเป็นบล็อค / กล่อง
float:left;
}

/* หัวข้อของเมนู*/
#sidebar .module h2{
color:#000; <-- สีของหัวข้อ
font:16px Verdana; <-- ฟอนต์ของหัวข้อ
padding:5px 5px 0px 5px;
}

/*ส่วนตัวเลือกของเมนู*/
#sidebar .module ul{
margin:0px 0px 0px 0px;
padding:0px 5px 5px 5px;
}

#sidebar .module li{
color:#000;
font:12px Verdana; <-- ฟอนต์ของตัวเลือก
font-variant:small-caps; <-- ตัวอักษรพิมพ์ใหญ่ โดยขนาดตัวอักษรเท่ากับพิมพ์เล็ก
margin:2px 5px 2px 0px;
padding:0px 0px 0px 5px;
}

/*กำหนดค่าเฉพาะของ h2 previous ใน sidebarเท่านั้น*/
#sidebar #previous h2{
color:#000; <-- สีของหัวข้อ
font:16px Verdana; <-- รูปแบบอักษรของหัวข้อ
margin:0px 0px 0px 50px;
padding:5px 0px 0px 5px;
font-variant:small-caps; <-- ตัวอักษรพิมพ์ใหญ่ โดยขนาดตัวอักษรเท่ากับพิมพ์เล็ก
font-weight:bold; <-- ตัวอักษรเป็นตัวหนา
border-top:1px dotted #333333;
border-left:1px dotted #333333;
border-right:1px dotted #333333;
}

/*กำหนดค่าเฉพาะของ ul previous ใน sidebarเท่านั้น*/
#sidebar #previous ul{
margin:0px 0px 0px 50px;
padding:5px 0px 5px 5px;
list-style: none; <-- ไม่มีไอคอนหน้าตัวเลือก
border-bottom:1px dotted #333333;
border-left:1px dotted #333333;
border-right:1px dotted #333333;
}

/*กำหนดค่าเฉพาะของ li previous ใน sidebarเท่านั้น*/
#sidebar #previous li{
color:#000; <-- สีของตัวเลือก
font:12px Verdana; <-- ฟอนต์ของตัวเลือก
font-variant:small-caps; <-- ตัวอักษรพิมพ์ใหญ่ โดยขนาดตัวอักษรเท่ากับพิมพ์เล็ก
margin:2px 5px 2px 0px;
padding:0px 0px 0px 5px;
}

/*กำหนดค่าเฉพาะของ h2 commentalert ใน sidebarเท่านั้น*/
#sidebar #commentalert h2{
color:#000; <-- สีตัวอักษร
font:16px Verdana;<-- ฟอนต์ของหัวข้อ
margin:0px 0px 0px 50px;
padding:5px 0px 0px 5px;
font-variant:small-caps; <-- ตัวอักษรพิมพ์ใหญ่ โดยขนาดตัวอักษรเท่ากับพิมพ์เล็ก
font-weight:bold; <-- ตัวอักษรเป็นตัวหนา
border-top:1px dotted #333333;
border-left:1px dotted #333333;
border-right:1px dotted #333333;
}

/*กำหนดค่าเฉพาะของ ul commentalert ใน sidebarเท่านั้น*/
#sidebar #commentalert ul{
margin:0px 0px 0px 50px;
padding:5px 0px 5px 5px;
list-style: none; <-- ไม่มีไอคอนหน้าตัวลือก
border-bottom:1px dotted #333333;
border-left:1px dotted #333333;
border-right:1px dotted #333333;
}

/*กำหนดค่าเฉพาะของ li commentalert ใน sidebarเท่านั้น*/
#sidebar #commentalert li{
color:#000; <-- สีตัวอักษร
font:12px Verdana; <-- ฟอนต์ของตัวเลือก
font-variant:small-caps; <-- ตัวอักษรพิมพ์ใหญ่ โดยขนาดตัวอักษรเท่ากับพิมพ์เล็ก
margin:2px 5px 2px 0px;
padding:0px 0px 0px 5px;
}

ส่วนของ Profile จะตั้งค่าไว้ที่  /* Configure each module */

:: content ::

/*===============================================*/
/*แถบ sidebar#2*/
#sidebar2{
display:inline; <-- แสดงผลเป็นแถว
float:left; <-- sidebar อยู่ทางด้านซ้่ายมือของบล็อก
margin:0px 0px 0px 15px;
width:230px; <-- กำหนดความกว้างของ sidebar#2
}

#sidebar2 .module{
margin:15px 0px 0px 0px;
width:230px; <-- ความกว้างของแต่ละโมดูล
display:block; <--แสดงผลเป็นกล่อง
}

#sidebar2 .module h2{
color:#FFF; <-- สีหัวข้อ
font:14px; <-- ขนาดตัวอักษรหัวข้อ
padding:0px 0px 0px 0px;
}

#sidebar2 .module ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
list-style: none; <-- ไม่มีไอคอนหน้าตัวเลือก
}

#sidebar2 .module li{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

/*กำหนดค่าส่วนของ categories ใน sidebar#2 เท่านั้น*/
#sidebar2 #categories h2{
font-size:12px; <-- ขนาดหัวข้อของ categories
color:#00496b; <-- สีหัวข้อ
font-weight:bold; <-- ตัวอักษรเป็นตัวหนา
margin:0px 40px 0px 5px;
border-bottom:1px solid #00496b;
}

#sidebar2 #categories ul{
text-align:left; <-- ตัวอักษรเรียงไปทางซ้าย
padding:2px 0px 0px 0px;
}

#sidebar2 #categories li{
text-align:left; <-- ตัวเลือกเรียงไปทางซ้าย
padding:2px 0px 0px 25px;
color:#00496b;
}

/*สีลิงค์ของตัวเลือกในเมนู categories ใน sidebar#2 */
#sidebar2 #categories li a{ 
color:#00496b;
}

#sidebar2 #categories li a:hover{
color:#73bed6; 
font-weight:bold; <-- ตัวอักษรเป็นตัวหนา
}

/*กำหนดค่าส่วนของ recommend ใน sidebar#2 เท่านั้น*/
#sidebar2 #recommend h2{
background:url(ลิงค์รูปภาพพื้นหลัง) top left no-repeat; <-- พื้นหลังหัวข้ออยู่ทางซ้ายบน ไม่มีการทำซ้ำรูปภาพ
font-size:14px; <-- ขนาดหัวข้อ
color:#FFF; <-- สีตัวอักษร
padding-left:5px;
padding-top:10px;
padding-bottom:6px;
}

#sidebar2 #recommend ul{
text-align:left; <-- ตัวอักษรเรียงไปทางซ้าย
padding:5px 5px 5px 5px;
border-left:4px solid #b7b7b7;
border-right:4px solid #b7b7b7; <-- เส้นกรอบ
border-bottom:4px solid #b7b7b7;
background:#FFF; <-- สีพื้นหลัง
}

#sidebar2 #recommend li{
text-align:left; <-- ตัวเลือกเรียงไปทางซ้าย
padding:2px 0px 0px 0px;
border-bottom:1px solid #d4d4d4; <-- เส้นใต้ตัวเลือก
}

/*สีลิงค์ของตัวเลือกในเมนู recommend ใน sidebar#2 */
#sidebar2 #recommend li a{ 
color:#000;
}

#sidebar2 #recommend li a:hover{
color:#cc9746; 
}

#sidebar2 #recommend li a:visited{
color:#7c7c7c; 
}


/*กำหนดค่าส่วนของ favourites ใน sidebar#2 เท่านั้น*/
#sidebar2 #favourites h2{
background:url(ลิงค์รูปภาพพื้นหลัง) top left no-repeat; <-- พื้นหลังหัวข้ออยู่ทางซ้ายบน ไม่มีการทำซ้ำรูปภาพ
font-size:14px; <-- ขนาดตัวอักษร
color:#FFF; <-- สีตัวอักษร
padding-left:5px;
padding-top:10px;
padding-bottom:6px;
}

#sidebar2 #favourites ul{
text-align:left; <-- ตัวเลือกเรียงไปทางซ้าย
padding:5px 5px 5px 5px;
border-left:4px solid #b7b7b7;
border-right:4px solid #b7b7b7; <-- เส้นกรอบ
border-bottom:4px solid #b7b7b7;
background:#FFF; <-- พื้นหลังสีขาว
}

#sidebar2 #favourites li{
text-align:left; <-- ตัวเลือกเรียงไปทางซ้าย
padding:2px 0px 0px 0px;
border-bottom:1px solid #d4d4d4; <-- เส้นใต้ตัวเลือก
}

/*สีลิงค์ของตัวเลือกในเมนู favourites ใน sidebar#2 */
#sidebar2 #favourites li a{ 
color:#000;
}

#sidebar2 #favourites li a:hover{
color:#cc9746; 
}

#sidebar2 #favourites li a:visited{
color:#7c7c7c; 
}


/*กำหนดค่าส่วนของ links ใน sidebar#2 เท่านั้น*/
#sidebar2 #links h2{
background:url(ลิงค์รูปภาพพื้นหลัง) top left no-repeat; <-- พื้นหลังหัวข้ออยู่ทางซ้ายบน ไม่มีการทำซ้ำรูปภาพ
color:#b4aca0; <-- สีหัวข้อ
font:14px Verdana; <-- ฟอนต์
font-variant:small-caps; <-- ตัวอักษรพิมพ์ใหญ่ โดยขนาดตัวอักษรเท่ากับพิมพ์เล็ก
font-weight:bold; <-- ตัวอักษรเป็นตัวหนา
padding-left:10px;
padding-top:10px;
}

#sidebar2 #links ul{
background:#FFF; <-- พื้นหลังของส่วนตัวเลือก
text-align:left;
padding:10px 5px 10px 5px;
}

#sidebar2 #links li{
text-align:left; <--  ตัวเลือกเรียงไปทางซ้าย
margin:2px 0px 2px 5px;
}

/*รูปภาพหลัง categories ใน sidebar#2*/
a.archive{
background:url(ลิงค์รูปภาพ archive) no-repeat; <-- รูปภาพ ไม่มีการทำซ้ำ
width:10px; <-- ความกว้างของรูปภาพ
height:10px; <-- ความสูงของรูปภาพ
padding:0px 0px 2px 12px;
}

:: content ::  

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

/*กล่องโปรไฟล์*/
/* Profile */
#profile{
width:100%; <-- โปรไฟล์กว้างเท่ากับขนาดของโทดูลใน sidebar นั้นๆ
height:64px; <-- ความสูงของโปรไฟล์
}

/*รูปโปรไฟล์*/
#profile img{
width:64px; <-- ขนาดรูปภาพ
float:left; <-- รูปอยู่ทางด้ายซ้ายมือ
margin-left:10px;
margin-right:10px;
margin-top:30px;
}

#profile span{
display:block;
margin-top:45px;
}

/*ข้อมูลโปรไฟล์*/
#profile .info{
width:100% !important;
width:60%;
}

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

:: content ::  

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

/*กล่องคอมเม้นท์*/
#commentform{
width:95%; <-- กล่องคอมเม้นท์กว้างเพียง 95% ของขนาด content
background:#EEE; <-- สามารถใส่เป็นรูปภาพได้ url(ลิงค์รูปภาพ) no-repeat;
float:left; <-- เรียงไปทางด้ายซ้าย
margin-left:10px;
}

#commentform form{
margin:10px;
}

/*หัวข้อ Comment ในบรรทัดแรก*/
#commentform h3{
font-size:16px; <-- ปรับขนาดและลักษณะตัวอักษร
font-weight:bold; <-- ตัวอักษรเป็นตัวหนา
}

/*แต่ละบรรทัดของกล่องคอมเม้นท์*/
#commentform .formrow{
border-top:1px solid #DDD; <-- สีเส้น
padding:2px;
}

/*ส่วนซ้ายของกล่องคอมเม้นท์ที่มี Name:, Website: และ Comment:*/
#commentform label{
float:left; <-- เรียงไปทางด้านซ้ายมือ
width:150px; <-- ความกว้าง
}

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

/*กล่องพิมพ์ข้อความคอมเม้นท์*/
#commentform textarea{
width:350px; <-- ความกว้าง
height:150px; <-- ความสูง
}

:: content ::  

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

/*ส่วนที่แสดงเนื้อหาคอมเม้นท์*/
.comment{
border-bottom:1px solid #DDD; <-- เส้นคั่นระหว่างแต่ละคอมเม้นท์
float:left; <-- จัดเรียงไปทางด้ายซ้าย
margin:5px 10px 5px 10px;
padding-bottom:5px;
width:95%; <-- กว้างเพียง 95% ของขนาด content
}

/*เนื้อหาคอมเม้นท์*/
.comment .post{
float:right; <-- เรียงไปทางด้านขวามือ
width:350px; <-- ความกว้าง
}

/*ระยะห่างของแต่ละคอมเม้นท์*/
.comment .post p{
margin-bottom:10px;
}

/*ข้อมูลของผู้คอมเม้นท์*/
.comment .info{
float:left; <-- เรียงไปทางด้ายซ้ายมือ
font-size:10px; <-- ขนาดตัวอักษร
width:200px; <-- ความกว้าง
margin-right:10px;
}

/*รูป avatar*/
.comment .info img{
width:32px; <-- ขนาดของรูป
}

:: content :: 

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

#leg{
background:#FFF; <-- พื้นหลัง
width:640px; <-- กำหนดความกว้าง
float:right; <-- ตำแหน่งของ leg
}

#leg .module{
display:inline;
margin:10px 0px 0px 0px;
padding:2px 0px 5px 0px;
width:640px; <-- ความกว้างของโมดูล
float:right; <-- เรียงไปทางด้านขวามือ
text-align:center; <-- ตัวอักษรเรียงอยู่ตรงกลาง
}

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

#leg .module h2{
font-size:12px; <-- ขนาดของหัวข้อ
font-weight:bold; <-- ตัวอักษรเป็นตัวหนา
display:none; <-- ไม่แสดงหัวข้อ
}

#leg .module li{
border-right:1px solid #CCC; <-- เส้นคั่นระหว่างตัวเลือก
padding:0px 10px 0px 10px;
display:inline; <-- แสดงผลเป็นแถว
}

:: content ::  

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

/*ตั้งค่าทั่วไปของส่วน footer*/
#footer{
background:url(ลิงค์รูปภาพพื้นหลัง) bottom left no-repeat; <-- ภาพพื้นหลังตำแหน่งซ้าย-ล่าง ไม่ทำซ้ำ
float:right; <-- footer เรียงไปทางด้านขวามือ
height:40px; <-- ความสูง
width:640px; <-- ความกว้าง
margin: 0px 0px 140px 0px;
}

/*ข้อความ Powered by exteen blog.*/
#footer p{
background:#EEE;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
font-size:10px;
text-align:center;
margin: 0px 10px 0px 10px;
}

/*แถบ Navigation Bar ที่อยู่ด้านบนสุด*/
.navbar{
float:left;
padding:0px 0px 0px 50px;
}

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

:: content :: 

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

บล็อกดีๆ สอนแต่งธีม

โครงสร้าง theme แบบใหม่อย่างคร่าวๆ by tukkae
วิธีขยายบล็อกให้กว้างขึ้น by oatato
ทำบลอคที่มีเมนูทั้งซ้าย-ขวากัน by sa-i
การใส่ไอคอนหน้าหัวข้อเรื่องตรง sidebar by jennessa
สลับลายให้ exteen comment by talalan
มาแต่งธีมแจ่มๆ ให้บล็อคของคุณกัน by rije
Tutorial css by bbears
แต่งsidebarให้สวยแบบมีสไตล์ by palermos
วิธีแต่งส่วน leg ของบล็อกแบบสามกล่อง by jaelsoul
มาทำ Favourites สุดเท่กันดีกว่า! by xvista

ถ้าหากท่านใด มีบล็อกดีๆ สามารถแนะนำได้นะคะ

:: content :: 

-------------------------------------------------------[ ป.ล. ]---------------------------------------------------------
.

ป.ล.1 เปิดเทอมมาตั้งแต่วันจันทร์แล้ว แต่ว่ายังไม่เริ่มเรียน เลยหยุดต่อมาอีกอาทิตย์หนึ่ง
          นอนกอด คุณวันอังคาร อยู่บ้าน จนจะขาดอยู่แล้ว (ก้าก!)

ป.ล.2 เวิ่นเว้อ~
ป.ล.3 กำลังปั่นรูปเตรียมฉลองวันฮาโลวีน (จะทันมั๊ยน้อ~)(ดองจนเหม็นเปรี้ยวเลย)
          (ได้ข่าวว่ากิจกรรม Blog Action Day 2009 : Climate Change ทำไม่ทันแหละ)

ป.ล.4 ช่วงนี้อากาศเปลี่ยนแปลงบ่อย ดูแลสุขภาพกันด้วยนะคะ
ป.ล.5 แปะรูปสักหน่อย รูป คุณพ่อ กับ คุณแม่ << จิ้นวันละนิด จิตฟุ้งซ่าน ก้ากกกกก!
          (หมาหน่อบ้าไปแหล่ว~)
ป.ล.6 รู้สึกตอนนี้ตัวเองกำลังเสียศูนย์ ในการเป็นตัวของตัวเอง (เบลอๆ)
ป.ล.7 สู้เว้ยเฮ้ย!!!

ป.ล.8 จากคอมเม้นท์ที่ #4 ของพี่เด  ดูเทรเลอร์แล้วลุงน่าโฮกมากค่ะ
          อ๊าย~ (ผมน่าจะรวบต่ำ แต่ส่วนตัวชอบตอนเป็นโนบอร์ดี้ คุคุ) ยิ่งดูก็ยิ่งอยากเล่น
          แต่ติดอยู่อย่างเดียว...ไม่มี PSP
         
           (อารมณ์ตอนนั่งดูเทรเลอร์ แต่เลือดกำเดาไม่พุ่งแบบนี้นะ...หึหึ)

ป.ล.9 ขอบคุณสำหรับทุกๆ การเยี่ยมชม และทุกๆ ความคิดเห็นนะคะ