R E V A M P | Personal & Entertainment blog

สวัสดีค่ะ เย้!! และแล้วก็มาเรื่อง Sidebar คือแถบเมนูด้านข้างนั่นเอง
เหมือนเดิมนะคะ ตามความเข้าใจของเรา บางอันก็ไม่รู้ ฮ่าๆ
แต่น่าจะเอาไปใช้งานกันได้บ้าง (มั้ง กรั่กก)

== Sidebars ==

#sidebar, #sidebar2 { << โดยรวมของ Sidebar (เดาว่าทำให้มี 2 ได้)
background:#000; << สีพื้นของ Sidebar ทั้งหมดค่ะ
display:inline;
float:right; << สั่งให้อยู่ด้านขวา (จะตรงข้ามกับส่วน Content)
margin:5px 15px 0px 0px; << ระยะห่างระหว่าง Sidebar กับส่วนอื่น
width:150px; << ความกว้างโดยรวมของ Sidebar
border-left:1px dashed #414141; << อันนี้เราเพิ่มเส้นด้านข้างค่ะ
}

#sidebar2 { << คำสั่งเมื่อมี Sidebar ที่ 2
display:none; << สั่งให้ไม่ทำงาน
}

#sidebar .module, #sidebar2 .module { << แต่ละโมดูล เช่น Links
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 == << ภาพหัวข้อแต่ละโมดูล เช่น Links

#sidebar #recommend h2, #sidebar2 #recommend h2 {
background:url(url ภาพของหัวข้อ Recommend)
no-repeat;width:150px;height:20px;} << ขนาด
#sidebar #previous h2,#sidebar2 #previous h2 {
background:url(url ภาพของหัวข้อ Previous)
no-repeat;width:150px;height:20px;} << ขนาด
#sidebar #commentalert h2,#sidebar2 #commentalert h2 {
background:url(url ภาพของหัวข้อ Comments)
no-repeat;width:150px;height:20px;} << ขนาด
#sidebar #favourites h2,#sidebar2 #favourites h2 {
background:url(url ภาพของหัวข้อ Favourites)
no-repeat;width:150px;height:20px;} << ขนาด
#sidebar #links h2,#sidebar2 #links h2 {
background:url(url ภาพของหัวข้อ Links)
no-repeat;width:150px;height:20px;} << ขนาด
#sidebar #categories h2,#sidebar2 #categories h2 {
background:url(url ภาพของหัวข้อ Categories)
no-repeat;width:150px;height:20px;} << ขนาด
#sidebar #archives h2,#sidebar2 #archives h2 {
background:url(url ภาพของหัวข้อ Archives)
no-repeat;width:150px;height:20px;} << ขนาด
#sidebar #tags h2,#sidebar2 #tags h2 {
background:url(url ภาพของหัวข้อ Tags)
no-repeat;width:150px;height:20px;} << ขนาด
#sidebar #pagemenu h2,#sidebar2 #pagemenu h2 {
background:url(url ภาพของหัวข้อ Pages)
no-repeat;width:150px;height:20px;} << ขนาด

a.archive {
background:url(.../icon_archive.gif) no-repeat;
<< คือไอค่อนที่อยู่หลังของแต่ละ category อันนี้ นะคะ)
width:12px; << ขนาด กว้าง x สูง
height:12px;
padding-left:15px;
margin-left:4px;
}

เย้!! จบไปแล้วอีกบทค่ะ ฮ่ะๆ หวังว่าไม่งงกันนะคะ น๊า น๊า 55+
บทอื่นๆไปอ่านกันได้ที่หน้า Css-land ของเรานะคะ =D
ปล. พรุ่งนี้มีวาย มีวาย กรี๊ดดด Alexander x Hephaistion หวานหยด!!