Modified CSS in your style step by step : ปรับแต่ง css ตกแต่งบล้อกสไตร์คุณ step by step (ตอนที่6-9) ปรับแต่ง แถบแสดงหัวข้อ ต่างๆ | [Freedomlism ® ™]แต่งบล้อก+บทความ+เรื่องสั้น+เพลง+นิยาย(อิศรานุทิน : บันทึกงานเขียนเล่มสีดำจากจินตนาการของคนไร้กรอบ เพื่อคนที่มีอิศระทางความคิด)

2006/Nov/13

Modified CSS in your style step by step : ปรับแต่ง css ตกแต่งบล้อกสไตร์คุณ step by step (ตอนที่6-9) ปรับแต่ง แถบแสดงหัวข้อ ต่างๆ

Step 6 : แถบแสดงวันที่ด้านบนเอนทรี่

/* สีของหัวข้อพวก วันที่ ประเภท */
.iday h3 {
background: url(XXX) ;
background-repeat: no-repeat;
background-position: left top;
margin:10px 14px 0px 10px;
padding:3px 0px 3px 3px;
font-size: 14px;
color:#4169E1;
background-color:#000000;

อันนี้จะสังเกตุได้ว่าไม่มีโค้ดใหม่เลยนะครับ

โดยตรง color คือสีของตัวอักษรวันที่นะครับ

Step 7 : ปรับแต่งแถบแสดงชื่อ entriy ปัจจุบัน

/* หัวข้อ entry จะให้เป็นรูปอะไร เซ็ต padding ตัวสุดท้ายตามความกว้างของรูป */
.entrytitle a:link, .entrytitle a:visited, .entrytitle a:hover{
background-image:url(XXX);
background-repeat: no-repeat;
background-position: left;
padding:0px 10px 0px 16px;
font-size: 12px;
text-decoration:none;
font-weight:bold;
color:#FF0000;
border:0px;
}

สำหรับ step นี้ มี โต้ดใหม่อยุ่ชุดเดียวนะครับ

font-weight:bold

โดยเป็นรูปแบบของตัวอักษรนะครับ

มี bold ตัวหนา

italic ตัวเอียง

underline ขีดเส้นใต้

strikethrough ขีดเส้นฆ่า

step 8 : แถบแสดงข้อมูลเอนทรี่ ด้านล่างสุด

/* ส่วนแสดงข้อมูลของ entry เช่นวันที่โพส */
.entryfooter{
background-image:url(XXX);
background-repeat: no-repeat;
background-position: left;

border-top:1px dotted #000000;
padding:2px 2px 2px 15px;
color:#FFFFFF;
font-size:9px;
}

555 step นี้แก้ไขตรงนี้นะครับ เรื่อง

code ไม่มีอะไรใหม่ สบายๆเลยงับ งิงิงิ

Step 9 : แถบแสดงหัวข้อ

/* พวกหัวข้อของด้านข้าง เช่น คำว่า Recommended */
.sidebar-title{
padding:2px 0px 2px 0px;
color:#4169E1;
font-family:Tahoma;
font-size:12px;
font-weight:bold;
padding-left:10px;
background: url(XXX)
background-color:#000000;
border-bottom:1px #000000 dotted;
border-top:1px #000000 dotted;
}