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

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

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

มาต่อด้วยทิปส์ css with exteen ตอนที่สองกันนะคะ
5555555555+  ที่มาอัพบลอค เพราะกันบลอคเน่าจ๊า  //โดนถีบออกนอกโลก




จิ้มภาพเพื่อดูภาพใหญ่ นะคะ
ต้องขอขอบคุณโค้ดฟรีธีมจาก livejournal นะคะ (เอามาจากหลายแหล่ง แฮ่ๆ)  *โค้งงามๆ*
ก่อนอื่นต้องไปตั้งค่าของ Widgets ให้เป็นแบบนี้ก่อนนะคะ  จิ้มดูภาพตรงนี้คะ
แล้วหลังจากนั้นก็มาเพิ่มโค้ดลง  ใน css ของธีมดังกล่าวกันคะ

" /* Neck Menu */ << มาแก้ไขในส่วนของ neck กันนะคะ
#neck{
background:#ffffff; <<สี bg ของแถบดังกล่าวที่ว่านี้คะ
text-align: left;
font-family: 'Verdana'; <<แบบของตัวอักษรคะ
}
#neck .module{
background:none;
display:block;
float:left;
margin:10px 0px 20px 25px;
padding:2px 0px 5px 20px;
width:185px; <<ความกว้างของแต่ละแถบในส่วนนี้ (ที่แบ่งออกเป็นสามส่วน  แต่ละบลอคก็จะไม่เท่ากันนะคะให้หารเอาเอง  เพราะค่าความกว้างของบลอคผักตอนนี้อยู่ที่ 760 px. คะ)
}
#neck .module ul{ <<ส่วนนี้ก็เป็นข้อความลิงค์ในแถบนี้อ้ะคะ
display:inline;
list-style: none;
margin:0px;
padding:0px;
font:11px 'Verdana';
}
#neck .module h2{ <<ตรงนี้ก็เป็นส่วนของการแก้ใขชื่อในแถบนี้คะ
font-size:10px;
font-weight:normal;
text-transform:uppercase;
}
#neck .module li {
border-bottom: 1px dotted #939393; <<เส้นที่คั่นของลิงค์ในแถบนี้อ้ะคะ
padding:3px 4px 3px 5px;
}
#neck .module li a{
padding:2px 10px 2px 5px;
font-size:10px;
}
#neck .module li a:hover{ <<ก่อนที่เมาส์จะมาเอามาชี้อ้ะคะ
padding:2px 10px 2px 5px;
color:#939393; <<สีของลิงค์ก่อนที่เมาส์จะมาเอามาชี้อ้ะคะ
}
#neck .module ul a:hover{ <<หลังที่เมาส์จะมาเอามาชี้อ้ะคะ
color:#000000; <<สีของลิงค์หลังที่เมาส์จะมาเอามาชี้อ้ะคะ
}
#neck .module li:hover{ <<ค่าต่างๆ ในขณะที่กำลังเอาเมาส์เลื่อนผ่าน list ในแต่ละโมดูล (ขอบคุณ คุณ palermos อีกครั้งนะคะ  แฮ่ๆ)
background-image: url(http://i81.photobucket.com/albums/j229/mytheme/exteen/version-14/bg-com3copy.jpg); <<เป็นไอค่อนที่อยู่หลังหัวข้อของแถบนี้คะ
border-left: #000000 4px solid;
}

*ถ้าจะทำในส่วนของ Foot  ก็ทำเช่นเดียวกันกับวิธีนี้แหละคะ
เพิ่มเติมคะ จากคุณ palermos (ขอขอบคุณมากๆ เลยนะคะ *โค้ง* )

เสริมให้...คำนวณแบบนี้ครับ
ความกว้าง neck โดยรวม - จำนวนโมดูล (ความกว้างโมดูล+ค่า padding ซ้ายขวาในแต่ละโมดูล + ค่า margin ซ้ายขวา แต่ละ module)

อย่างของบล็อกน้องผัก
760 - 3(185 + 20 + 25) บล็อกน้องผักก็จะเหลือพื้นที่ไว้เตะตะกร้อทางขวามือสุดอีก 70พิกเซล

ในส่วนนี้ต้องไปเพิ่มโค้ด ที่ Widgets นะคะ
แนะนำว่าไอค่อน ต้องเป็นขนาดเล็กๆ นะคะ ~ถึงจะสวย

" ลิงค์ของไอค่อนดังกล่าวคะ" />

สำหรับใครที่ยังไม่เคยอ่านเรื่อง tutorial css ของบลอคนี้นะคะ.... (ก็จิ้มเลยนะคะ)

• Css tutorial : General-Header
• Css tutorial : Neck Menu
• Css tutorial : Content
• Css tutorial : Sildebar-Profile
• Css tutorial : Comment-Footer
• Css tutorial : Theme style bbear
• Css tutorial : Tips about css part 1

วันนี้คงมาเพิ่มทิปส์เพียงสองอย่างอ้ะคะ  เพราะหมดเวลาทำซะก่อน! ต้องขอขอบคุณคุณพี่ palermos อีกครั้งคะ
5555555+  เพราะพรุ่งนี้สอบ  แต่ห้าวันมาเนี้ย!? อ่านแต่หนังสือก็เซ็งๆ เลยแวะมาอัพบลอค
เอาเป็นว่า ตั้งใจอ่านหนังสือ และตั้งใจสอบกันนะคะ !!


ก่อนไป ก็ขอขอบคุณสำหรับทุกคอมเมนต์เช่นเคยคะ
และรักษาสุขภาพกันดีดี นะคะเพราะอากาศแปรปรวนมากมาย ♥