::. S2 AngeL .:: CATZ Ver 7

ก้อมีคนหลายคนเหมือนกันคับว่า อยากทำบล๊อกแบบเท่ แก้บล๊อกให้ดูดี แก้บล๊อกให้หลุดกรอปกันไปวันนี้ก้อได้โอกาสมากระชากเจ้าภาษา CSS กันคับ + สอนการทำเฮดแบบง่ายๆ สไตล์คุณ + แจกโครงสร้างบล๊อก สามารถไปแก้ใน Photoshop ได้ครับ (เอาไปแล้วอย่าลืมให้เครดิตนิดนึงนะก๊าบบ > <")

ส่วนที่เปนสีแดงสามารถแก้ได้คับ
ส่วนที่เปนสีส้มสามารถก็อปไปใส่ในโค๊ดได้เลยคับ
ส่วนที่เปนสีเทาอย่าไปยุ่งมันเถอะคับ มันไม่ค่อยได้ช่วยอะไรมาก แค่บางครั้งต้องใช้**

/* General */ มาดูหมวดนี้กันก่อนเลยคับ "General"
body {
background:white url(ใส่รูป Background ลงไปคับ) repeat-x top left;
color:#333;
background-attachment:fixed; สำหรับทำให้ Background เกาะกับหน้าจอคับ
font:12px Tahoma, "MS Sans Serif"; ขนาดของอักษร และ ฟอนต์
line-height:1.5em; ระยะห่างระหว่างบรรทัด
text-align:center;
}

a:link, a:visited{ สีลิงค์ครับผม
color:gray; ใส่สีลงไปอาจจะเปน โค๊ด #ffff หรือใส่ชื่อสีไปเลยคับ
text-decoration:none;
ปล.** การแก้สีลิงค์นี้จะเปลี่ยนทั้งบล๊อกไม่้เฉพาะที่คับป๋ม
}

a:hover, a:active{ สีลิงค์เวลาเอาเมาส์ไปวาง
color:darkred; ใส่สีลงไปอาจจะเปน โค๊ด #ffff หรือใส่ชื่อสีไปเลยคับ
ปล.** การแก้สีลิงค์นี้จะเปลี่ยนทั้งบล๊อกไม่้เฉพาะที่คับป๋ม
}

#page{
margin:auto;
padding-top:15px;
text-align:left;
width:780px; ความกว้างหน้าจอของเพจ
}

#header, #neck, #belly, #leg, #footer{ ความกว้าง ~(O O~) ของหน้าบล๊อก
float:left;
width:780px;
ปล**ถ้าแก้ตรงนี้ต้องแก้ทั้งหมดเลยนะคับ ทั้งภาพและความกว้าง
}

/* Header */ ปรับส่วนหัวของบล๊อกคับ

#header{ โครงสร้างหลักของหัวบล๊อก ไม่ใ่ช่รูปเฮดเน้อ
background:url(ใส่ลิงค์ของรูปลงไปคับป๋ม ^ ^) top left no-repeat;
padding:200px 0px 0px 25px; ปรับความห่าง สูง ต่ำ คับ ลองปรับจนกว่าพอดี
ปล** ตรงนี้ต้องเอา header ของ Exteen ที่มีมาให้นำไปดัดแปลงคับ

รูปตัวอย่าง ขนาด 780 x 500 แล้วผมนำไปแก้เพิ่ม ตัวอักษรลงไปคัีบ เวลาสะเซฟเก็บต้องเปน .PNG นะงับ ^ ^ ส่วนเฮดปัจจุบันไม่สามารถมาลงได้งับ เพราะว่ามันหนักตั้ง 500+ KB - -*

(กดที่รูปเพื่อดุภาพใหญ่)
}

#header h1 a{ อันนี้คือชื่อที่แสดงชื่อแรกครับ คือ ชื่อหลัก หรือ BLog Tilte ในส่วนของ Blog Preferences color:#666; สีของตัวอักษร
font-size:24px; ขนาดของตัวอักษร
display:none; อันนี้ผมนำหัวบล๊อกไปแก้แล้วเลยไม่ให้โชว์ชื่อบล๊อก
}

#header h1 a:hover{ เวลาเอาเมาส์ไปวาง,,อันนี้คือชื่อที่แสดงชื่อแรกครับ คือ ชื่อหลัก หรือ BLog Tilte ในส่วนของ Blog Preferences
color:#999; สีของตัวอักษร
display:none; อันนี้ผมนำหัวบล๊อกไปแก้แล้วเลยไม่ให้โชว์ชื่อบล๊อก
}

#header h2{ อันนี้คือชื่อรอง หรือ Blog Description ในส่วนของ Blog Preferences
font-size:12px; ขนาดตัวอักษร
margin:5px 0px 5px 0px; ระยะห่าง
display:none; อันนี้ผมนำหัวบล๊อกไปแก้แล้วเลยไม่ให้โชว์ชื่อบล๊อก
}

#coverimage{ อันนี้คับถึงจะรูปเฮด
background:url(ใส่รูปเฮดบล๊อกที่จะแสดง) no-repeat; แนะนำให้ไปฝากที่อื่นคับ เพราะ 10 mb เอาไว้อัพรูปประกอบส่วนต่างๆ พวก sidebar
height:300px; ความสูง~
width:730px; ความกว้าง~
margin-bottom:0px;
}

/* Neck Menu */ ส่วนคอ หรือส่วนที่ผมใช้อยู่ตอนนี้คือ ส่วนที่ใส่ Page

#neck{ อันนี้คือโครงสร้างทั้งหมดของส่วนนี้คับ ถ้า่อยากให้สวยควรแก้ครับ
background:url(ใส่รูปโครงของเนคไปคับป๋ม) top left;

รูปตัวอย่าง อันนี้ขนาด 780 x 100 ผมเซฟเปน .PNG แล้วทำให้โปร่งใสด้วยคับจะได้สวยๆ *-*

(กดที่รูปเพื่อดุภาพใหญ่)
}

#neck .module{ อันนี้ตัวเนคคับ
background:white; สีของ background ของเนคคับ ถ้าอยากได้เปนรูป ก้อใส่ url(..รูป...) ไปคับ
display:inline;
float:left;
margin:52px 0px 0px 25px; ระยะห่างของเนค
padding:2px 0px 5px 0px; ระยะห่างของเนค
width:730px; ความกว้าง
}

ที่้เหลือขอข้ามไปนะคับเพราะไม่ได้แก้อะไรกันมาก ... ไปส่วนต่อไปเลยคับ

/* Content */ ส่วนที่แสดงเนื้อหา

#belly{
background:url(ใส่รูปโคลงสร้างไปเลยเน้อ) repeat-y;
รูปตัวอย่าง ขนาด 780 x 1000 อันนี้คือผมไปขยับขยายให้มันพอดีแล้วก้อใส่ shadow เพิ่มอีกนิดนุงเพื่อความสวยงามคับป๋ม

(กดที่รูปเพื่อดุภาพใหญ่)
}

ขอข้ามในส่วนที่ง่ายๆไปนะงับ ^ ^" ... ไปส่วนต่อไปเลยคับ

/* Sidebars */ ส่วนไซด์บาร์ ที่อยู่ข้างๆ

#sidebar, #sidebar2{ ปรับแต่ง sidebar ทั้ง ข้างซ้ายและขวางับ
background:white url(ใส่รูปพื้นหลังของไซด์บาร์);
display:inline;
float:right;
margin:5px 25px 0px 0px; ระยะห่าง
width:200px; ความกว้างของไซด์บาร์
}

#sidebar2{
display:none; ผมปิดเพื่อไม่ให้แสดงไซด์บาร์ 2 คับ
}

#sidebar .module, #sidebar2 .module{
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 */ รูปของเฮดเดอร์ของไซด์บาร์คับ

#sidebar #recommend h2, #sidebar2 #recommend h2{background:url(ใส่รูปของเฮดเดอร์ของ Recommend คับ ) no-repeat;width:200px;height:100px;} ความกว้าง กับ สูงคับ
ผมขออธิบายแค่อันเดียวนะงับ อันอื่นๆก้อเหมือนกััน

#sidebar #previous h2,#sidebar2 #previous h2{background:url(http://s2angel.exteen.com/images/theme/pre-ver7.png) no-repeat;width:200px;height:100px;}

#sidebar #commentalert h2,#sidebar2 #commentalert h2{background:url(http://s2angel.exteen.com/images/theme/com-ver7.png) no-repeat;width:200px;height:100px;}

#sidebar #favourites h2,#sidebar2 #favourites h2{background:url(http://s2angel.exteen.com/images/theme/fav-ver7.png)
no-repeat;width:200px;height:100px;}

#sidebar #links h2,#sidebar2 #links h2{background:url(http://s2angel.exteen.com/images/theme/link-ver7.png)
no-repeat;width:200px;height:100px;}

#sidebar #categories h2,#sidebar2 #categories h2{background:url(http://s2angel.exteen.com/images/theme/cat-ver7.png)
no-repeat;width:200px;height:100px;}

#sidebar #archives h2,#sidebar2 #archives h2{background:url(http://g.exteen.com/t/apollo/hd_archives.png)
no-repeat;width:89px;height:19px;}

#sidebar #tags h2,#sidebar2 #tags h2{background:url(http://g.exteen.com/t/apollo/hd_tags.png) no-repeat;width:49px;height:23px;}

#sidebar #pagemenu h2,#sidebar2 #pagemenu h2{background:url(http://g.exteen.com/t/apollo/hd_pages.png)
no-repeat;width:64px;height:23px;}

a.archive{background:url(ใส่รูปไปเลยงับ 12x12 น้า) no-repeat; อันนี้รูปที่อยู่หน้า แคททารอท อะงับ width:12px; กว้าง
height:12px; สูง
padding-left:15px;
margin-left:4px;
}

ผมต้องขอข้ามเรื่องการปรับแต่ง Profile Comment ไปนะงับ สำหรับ ส่วนของคอมเม้นต้องไปเขียนในเอนทรีใหม่งับ เพราะมันยาวมาก *-* ข้ามไปส่วนต่อไปเลยงับ ...

/* Footer */ ส่วนของฟูท

#footer{
background:url(ใส่รูปโคลงสร้างของส่วนฟูทไปเลยคับ) bottom left no-repeat;
height:200px; ความสูงของฟูทคับ
รูปตัวอย่างคับ

(กดที่รูปเพื่อดุภาพใหญ่)
}

#footer p{
background:#EEE;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
font-size:10px;
text-align:center;
margin:5px 25px 0px 25px;
padding:5px;
display:none; เมื่อแก้ฟูทแล้วก้อไม่ต้องโชว์ Powered By Exteen
" Powered by exteen blog. You may view this blog RSS or ATOM. "
แต่ิอย่าลืมให้เครดิต Exteen นะคับ
}

ในส่วนของคอมเม้น จะมาต่อเอ้นทรี้ต่อไปนะงับ