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

โหมด : ไม่มีอะไรทำ เลยมาสอน css แทน 555 5
คำเตือน : ห้ามนำงานของผักออกไปแพร่เองนะคะ  !!!
โปรแกรมที่ควรใช้ดูบลอคนี้ : Firefox  เท่านั้น

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

มาต่อกันกับ css นะคะ
อ๊ะ !  ก่อนอื่นมาดูรูปแบบธีมเป็นแบบ basic นะคะ  จิ้มดูภาพได้เลยคะ

เป็นส่วนที่แสดงแถบของ sidebars นะคะ ,, ดูรูปอธิบายเพิ่มเติมคะ
โดยถ้าเราอยากให้ส่วนนี้นะแสดงอะไรบ้างก็ไปตั้งค่าที่ widgets นะคะ
โดยไปที่เมนู manage >>theme >> แล้วเลือกเมนู widgets นะคะ

" /* Sidebars */
#sidebar, #sidebar2{
background:#473e3c; <<สีบีจีในส่วนนี้
display:inline;
float:right; <<เป็นการตั้งค่าในส่วนของ sildebar ว่าจะให้อยู่ทางไหน (ต้องตั้งค่าให้ตรงข้ามกะ content เสมอ)
margin:5px 25px 0px 0px;
width:225px; <<ความกว้างของแถบ sildebar
}
#sidebar2{ <<ในกรณี ที่แสดงค่า sidebars สองด้าน
display:none; <<ถ้ามีแค่ด้านเดียวก็ ให้ใช้คำสั่งนี้คะ
}
#sidebar .module, #sidebar2 .module{
margin:5px 5px 15px 5px; <<เป็นการตั้งค่าระยะห่าง บน, ขวา, ล่าง, ซ้าย แต่ละหัวข้อ (พวกแทบ links, previous อะไรประมาณนี้)
}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://g.exteen.com/t/darkapollo/hd_recommend.png) no-repeat;width:131px;height:19px;} <<ภาพของแถบ recommend
#sidebar #previous h2,#sidebar2 #previous h2{background:url(http://g.exteen.com/t/darkapollo/hd_previous.png) no-repeat;width:104px;height:23px;} <<ภาพหัวข้อของ previous
#sidebar #commentalert h2,#sidebar2 #commentalert h2{background:url(http://g.exteen.com/t/darkapollo/hd_comments.png) no-repeat;width:181px;height:19px;} <<ภาพหัวข้อของcommentalert
#sidebar #favourites h2,#sidebar2 #favourites h2{background:url(http://g.exteen.com/t/darkapollo/hd_favourites.png) no-repeat;width:105px;height:19px;} <<ภาพหัวข้อของ favourites
#sidebar #links h2,#sidebar2 #links h2{background:url(http://g.exteen.com/t/darkapollo/hd_links.png) no-repeat;width:52px;height:19px;} <<ภาพหัวข้อของ links
#sidebar #categories h2,#sidebar2 #categories h2{background:url(http://g.exteen.com/t/darkapollo/hd_categories.png) no-repeat;width:112px;height:23px;} <<ภาพหัวข้อของ categories
#sidebar #archives h2,#sidebar2 #archives h2{background:url(http://g.exteen.com/t/darkapollo/hd_archives.png) no-repeat;width:89px;height:19px;} <<ภาพหัวข้อของ archives
#sidebar #archives h2,#sidebar2 #tags h2{background:url(http://g.exteen.com/t/darkapollo/hd_tags.png) no-repeat;width:49px;height:23px;} <<ภาพของแถบ archives
#sidebar #pagemenu h2,#sidebar2 #pagemenu h2{background:url(http://g.exteen.com/t/darkapollo/hd_pages.png) no-repeat;width:64px;height:23px;} <<ภาพหัวข้อของ page

a.archive{
background:url(http://g.exteen.com/t/darkapollo/icon_archive.gif) no-repeat; <<ถาพเล็กๆที่อยู่หลัง ลิงค์ที่อยู่ในแถบของ categories ,, ดูรูปอธิบายเพิ่มเติมคะ
width:12px; <<ความกว้างของภาพ
height:12px; <<ความสูงของภาพ
padding-left:15px;
margin-left:4px; <<ภาพห่างจากด้านซ้าย
}

เป็นส่วนของแถบ profile อ้ะคะ  เวลาจะตั้งค่าให้แสดงหรือไม่ก็ทำแบบของ sidebars นะคะ
โดยการไปที่เมนู manage >>theme >> แล้วเลือกเมนู widgets นะคะ
แล้วถ้าอยากให้แสดงก็ลากไปใส่ในส่วนของ sidebars ได้เลยนะคะ  ถ้าไม่อยากให้แสดงก็เอาออกคะ

" /* Profile */
#profile{
width:95%; <<หมายถึงกว้าง 95% ของแถบ slidebars นี้นะ
height:64px; <<ความสูงของแทบนี้เท่าไร (น่าจะตั้งให้เกิน ความสูงของภาพประจำตัวเรานะ)
}
#profile img{ <<ส่วนของภาประจำตัวเรานะ
float:left; <<ภาพประจำตัวเรา ชิดทางไหน
margin-right:10px; <<ห่างจากด้านขวาเท่าไร
}
#profile span{
display:block;
}
#profile .info{
width:100% !important;
width:60%; <<หมายถึงความกว้างข้อมูลตรงชื่อเรานะ กับคำว่า view my profile นะ
}
/* Tags */
#tags li{
display:inline;
margin-right:5px;
}

วันนี้ในที่สุดก็เสร็จตรงหน้าของ sidebars อ้ะ
เหนื่อยพอสมควร เพราะอัพสองรอบ - -''''' (เน็ตเน่า)  5555 555
แต่ไม่เป็นไรๆ เพราะว่างงาน ~ความจริงก็ไม่ว่างอ้ะนะเพราะต้องทำธีมให้น้องเอมอ้ะ
ผักยังนึกไม่ออกเลย ว่า ... จะเอาออกมาแนวไหนดีอ้ะ  555 55 *โดนถีบ*
โอเคคะ ~ผักขอตัวไปเยี่ยม บลอคเพื่อนบ้านก่อนนะคะ แล้วก็ขอบคุณสำหรับทุกคอมเมนต์นะคะ ♥