R i j j y -[a x k i z e l]

มาแต่งธีมแจ่มๆ ให้บล็อคกันดีกว่าครับ

===========================

วันนี้เสนอ ตอนที่ 1 มาแต่ง content กันเต๊อะ!

''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

1.แต่ละ entry แบ่งส่วนย่อยๆ ได้ 4 ส่วนดังนี้

ผมแยกสีเอาไว้ให้เห็นกันง่ายๆ นะครับ

ส่วนที่ 1 หัวข้อ entry

ส่วนที่ 2 Posted on รายละเอียด entry

ส่วนที่ 3 ข้อความทั้งหมดที่เขียนใน entry นั้นๆ

ส่วนที่ 4 รวม tags กับ comments เอาไว้

===========================

ต่อมาเรามาดูส่วนของโค้ดในแต่ละส่วนที่สำคัญๆ กันครับ

===========================

#content{
display:table;
float:middle; --> เปลี่ยนให้ content อยู่ left,right หรือค่าเดิม
margin:10px 15px 0px 25px;
width:516px; --> ความกว้างของ content
/*Fix too large image makes content drop problem in IE*/
overflow:visible !important;
height:1185px; --> ความสูงของ content
//ส่วนนี้ถึงแม้ entry จะยาวกว่าส่วนสูงก็ไม่เป็นปัญหาครับ
}

ส่วนของ content คือส่วนนี้ทั้งหมดครับ (ภาพด้านล่าง)

ส่วนที่มีลูกศรสีแดงชี้นั่นล่ะครับ

==========================

/* ส่วนพื้นหลังของหัวข้อ entry */
.entry .title h2{
background:url(http://rije.exteen.com/images/rije_top1.gif) no-repeat;
// ส่วนพื้นหลัง กำหนดไม่ให้ภาพซ้ำเลื่อนลงมา
font-size:12px; --> กำหนดขนาดตัวอักษรชื่อ entry
height:23px; --> กำหนดส่วนของของส่วนที่ 1
}

/* หัวข้อ entry */
.entry .title h2 a{
color:#faffff; --> สีตัวอักษรหัวข้อ entry
float:left; --> ให้หัวข้อ entry ชิดซ้าย
padding-left:26px; --> เลื่อนหัวข้อ entry จากซ้าย 26 pixel
padding-top:4px; --> เลื่อนหัวข้อ entry ลงมา 4 pixel
}

ส่วนของข้อความใน entry ส่วนหมายเลข 1 

ส่วนที่มีพื้นเป็นสีน้ำตาลจากภาพแรกครับ

==========================

/* พื้นหลังของ Posted on */
.entry .title span{
background:url(http://rije.exteen.com/images/rije_top2.gif) no-repeat;
height:32px; --> ความสูงช่วยกำหนดขนาดพื้นที่
width:516px; --> ความกว้างช่วยกำหนดขนาดพื้นที่
display:block; --> แสดงส่วนนี้แบบ block (ไม่แนะนำ table)
color:#000000; --> สีตัวอักษร
font-size:0px; --> ขนาดตัวอักษร
}

ส่วนของข้อความใน entry ส่วนหมายเลข 2 

ส่วนที่มีพื้นเป็นสีฟ้าจากภาพแรกครับ

==========================

/* พื้นหลังส่วนของ entry */
.entry{
float:left; --> กำหนดให้ชิดซ้าย
margin-bottom:15px; --> กำหนดจากขอบด้านล่างขึ้นมา 15 pixe
// ส่วนนี้หากกำหนด 0 pixel แต่ละ entry จะชิดกัน
background:url(http://rije.exteen.com/images/rije_top3.gif) left;
}

/* ส่วนข้อความใน entry โค้ดส่วนนี้จะอยู่ด้านในโค้ดด้านบนอีกที */
.entry .post{
float:middle; --> กำหนดให้ entry อยู่ตรงกลาง
padding-left:15px; --> จากด้านซ้ายห่างออกมา 15 pixel
padding-right:25px; --> จากด้านขวาห่างออกมา 25 pixel
// padding จะกำหนดภายในส่วนหมายเลข 3 ด้านใน ที่เป็นข้อความอย่างเดียว 
}

ส่วนของข้อความใน entry ส่วนหมายเลข 3 

ส่วนที่มีพื้นเป็นสีชมพูจากภาพแรกครับ

==========================

/* พื้นที่ส่วนหมายเลข 4 */
.entry .info{
background:url(http://rije.exteen.com/images/rije_top4.gif) no-repeat;
float:middle; --> ส่วนนี้ไม่ค่อยมีผลครับ เพราะผมกำหนดภาพพื้นหลังขนาดพอดีเลย
width:100%; --> กำหนดขนาดความกว้าง ใส่ค่าเป้นตัวเลขแทนได้ครับ
height:55px; --> กำหนดความสูง เท่ากับพื้นหลัง
}


/* พื้นที่ส่วนของ tags */
.entry .info .tag{
padding-top:12px;
padding-left:25px;
//ให้ตัว Tags : อยู่ห่างจากด้านบนของส่วนพื้นที่หมายเลข 4 ลงมา 12 pixel
//และให้อยู่ห่างจากทางซ้ายมา 25 pixel (เลยเห็น Tags อยู่ในที่ที่กำหนดได้)
float:left; --> ให้ Tags ชิดซ้าย
font-size:10px;
color:#000;
width:300px; --> กำหนดความกว้างของข้อมูล tags ไว้ 300 pixel
//ส่วนนี้ต้องแชร์กับตัว comments จึงกำหนดให้กว้างเท่ากับพื้นหลังไม่ได้
}

/* พื้นที่ส่วนของ comments โค้ดคล้ายของ tags */
.entry .info .coms a:visited{
//กำหนดเพิ่มให้ a:visited เป็นสีดำ (color:)
padding-top:12px;
padding-right:15px;
float:right; --> กำหนดให้ comments ชิดขวา (จะอยู่คนละฝั่งกับ tags พอดี)
font-size:10px;
width:100px; --> กำหนดความกว้างให้ comments น้อยกว่า tags
color:#000;
}

ส่วนของข้อความใน entry ส่วนหมายเลข 4 

ส่วนที่มีพื้นเป็นสีเขียวจากภาพแรกครับ

==========================

หมดแค่นี้ก็ยาวเฟื้อยแล้วล่ะครับ

ลองนำไปประยุกต์เพื่อต่อยอดกันได้ครับ