http://www.exteen.com ลองไปสมัครดูครับ หน้ามันอาจะเปลี่ยนไปจากที่นำมาสอนแล้วนะครับ
อันแรกคือเมือสมัคร ลอกอินเข้าไปแล้วนะค่ะ เราก่จะมาเลือกรูปแบบ ธีม ของเราก่องคร่า คลิกที่ theme แล้วก่เลือกรูปแบบของเรา ส่วนของทรายเลือกอานเน้อ่ะ..
อานนี้จาเปงส่วนที่แสดงอยู่ข้างหน้าบล็อกของเรานะ ครายอยากให้มีอารายมั่งก่ติ๊กไว้เรยจ้า
อานเท่สามนี้คือ config สำหรับคนที่มะอยากแต่งไรมาก ง่ายๆก่เลือกอานเน้ได้เรยนะ เสดทันที แต่เจ้แรด อยากทำหลายอย่างก่เรยไปเล่นโค้ด ดังนั้น ในหัวข้อเน้ก่เรยไม่สามารถทำได้แย้ววว มะมีตัวอย่างให้ดูด้วย ขอโทษนะงับบบบบ
อานเน้คือ config หรือ custom คือเราสามารถแก้ไขโค้ดได้เองอ่ะนะ อ่านๆ ดู..สู้ๆ
อานเน้จะคือโค้ดที่ทุกคนจาเหงนะคร่ะ.....มีคำอธิบายให้ มะยากๆ
/* สีของลิงค์ */
a:link, a:visited{
color:#FF0000;
text-decoration:none; /*<<< ตรงนี้บอกว่าไม่ต้องขีดเส้นใต้เวลาเป็นลิงค์*/
}
a:hover{
color:#FFFF00;
}
/* สองอันข้างบนนี้ไม่น่ามีไร กล่าวคือก็เป็นสีของลิงค์ ต่างๆ ที่ไม่ได้กำหนดที่อื่น */
/* ทั้งหน้ามีลักษณะเป็นอย่างไร */
.site{
margin:10px;
padding:0px;
text-align:center;
background-color: #EEEEEE;
background-image: url(http://champcpe.exteen.com/images/bck.gif); /*<< เปลี่ยน background ทั้งหน้าที่นี่ */
background-attachment : fixed /*ถ้าอยากให้ background ไม่เลื่อน ใส่บรรทัดนี้ */
}
/* ความกว้างของหน้าบลอค */
#wrapper{
width:640px; /*<< แก้ความกว้างหน้าบลอคที่นี่เป็นตัวเลขที่มากขึ้น*/
}
/* เซตความกว้างของหน้าบลอค, แบคกราวนด์ของบลอคทั้งหมดและขอบ */
#all{
width:640px; /*<< แก้ตาม width ของ wrapper */
float:left;
background-color:#FFFFFF; /* สีของภายในบลอค */
border:1px solid #000000; /* ขอบมีลักษณะอย่างไร (ความหนา, ลักษณะเส้น, สี) */
}
/* แถบบนสุด */
#uptab{
background:#AAAAAA;
border-top:1px solid #EEEEEE;
border-bottom:1px solid #777777;
height:13px;font-size:0px;
}
/*แถบกลาง หรือก็คือที่แสดงบลอค */
#midtab{
width:640px; /*<< แก้ตาม width ของ all กับ wrapper */
padding:0px;
}
/* แถบล่างสุด */
#downtab{
background:#AAAAAA;
border-top:1px solid #EEEEEE;
border-bottom:1px solid #777777;
font-size:0px;width:640px;height:13px; /*<< แก้ width ตาม all กับ wrapper */
float:left;
}
/* รูปภาพด้านบน เซตความสูงและกว้างตามภาพ */
.picture{
background-image: url(http://champcpe.exteen.com/images/head.jpg); /* เซตรูปภาพด้านบนที่นี่ */
background-repeat: no-repeat;
background-position: left top;
height: 100px; /* เซตความสูงของรูปข้างบนที่นี่ */
width: 640px; /* เซตความกว่างของรูปข้างบนที่ีีนี่ */
border-bottom:1px solid #000000; /* เซตขอบของรูปข้างบนที่นี่ */
}
.title{
font-family: "Trebuchet MS", Tahoma;
font-size: 15px;
color: #FFFFFF;
text-align:right;
padding-right:5px;
padding-bottom:30px;
vertical-align:bottom;
display:none; /*<<< ถ้าไม่อยากให้แสดง ไตเติล ใส่บรรทัดนี้ , ถ้าอยากให้แสดง เอาบรรทัดนี้ออก */
}
/* ต้องมาเซตสีไตเติลตรงนี้ด้วย */
.title a:link, .title a:visited, .title a:hover{
color:#FFFFFF;
border-color:#FFFFFF;
}
.content{
width:640px; /* เซตความกว้างตาม all กับ wrapper*/
font-family: Tahoma, "MS Sans Serif";
font-size: 12px; /* เซตขนาดฟอนต์โดยรวมที่นี่ */
color: #FFFFFF;
text-align:center;
float:left;
}
/* พวกที่แสดงเนื้อหาบลอคความกว้างเป็นเท่าไหร่ */
.leftcontent{
width:450px; /* เซตความกว้างของที่แสดงเนื้อหาบลอค ซึ่งความกว้างของ leftcontent + rightcontent=all */
float:right; /* อยากให้แสดงเนื้อหาที่ซ้ายหรือขวา */
text-align:left;
}
/* พวกที่เป็นแถบลิงค์ต่างๆ */
.rightcontent{
width:180px; /* เซตความกว้างของแถบที่เป็นลิงค์ */
float:left; /* ไม่ต้องเซตตรงนี้ */
text-align:left;
background-color:#F9F9F9; /* อยากให้แบคกราวนด์ของแถบสีมีอะไร */
border-right:1px dotted #000000;
}
.iday {
}
/* สีของหัวข้อพวก วันที่ ประเภท */
.iday h3 {
background-image: url(/global/theme/predefined/creativity/title.gif); /* ไอคอนของไตเิติลวันที่ */
background-repeat: no-repeat;
background-position: left top;
border-bottom:1px solid #FB650A;
margin:3px 14px 0px 10px;
padding:0px 0px 4px 18px;
font-size: 14px;
color:#FB650A; /* สีของวันที่ */
}
/* เรื่องหนึ่งๆ */
.entry{
padding:5px 15px 5px 15px;
margin:5px 0px 5px 0px;
border-bottom:1px solid #CCCCCC;
}
/* หัวข้อ entry จะให้เป็นรูปอะไร เซ็ต padding ตัวสุดท้ายตามความกว้างของรูป */
.entrytitle a:link, .entrytitle a:visited, .entrytitle a:hover{
background-image: url(/global/theme/predefined/creativity/titleentry.gif); /*เซตรูปของหัวข้ิอ entry */
background-repeat: no-repeat;
background-position: left top;
padding:0px 10px 0px 16px;
font-size: 12px;
text-decoration:none;
font-weight:bold;
color:#FF0000;
border:0px;
}
/* ส่วนแสดงเนื้อหา entry */
.entrycontent{
color: #000000;
padding:5px 10px 5px 16px;
color:#000000;
font-size:12px;
line-height: 1.3em;
}
/* ส่วนแสดงข้อมูลของ entry เช่นวันที่โพส */
.entryfooter{
padding:2px 2px 2px 15px;
color:#666666;
font-size:9px;
}
/* ชื่อผู้โพส */
.entryposter{
padding:0px 5px 0px 0px;
}
/* ลิงค์ไปดู comment ของ entry */
.entrycomment a:link,.entrycomment a:visited, .entrycomment a:hover{
background-image: url(/global/theme/predefined/creativity/entrycomment.gif); /* จะให้มีไอคอนอะไร */
background-repeat: no-repeat;
color:#43697C; /* สีของลิงค์ไปคอมเมนต์ */
text-decoration:none;
padding:0px 80px 0px 0px;
border-bottom:0px;
}
/* สีเวลาเอาเมาส์วางของลิงค์ที่ไปคอมเมนต์ */
.entrycomment a:hover{
color:#FF6C00;
border-bottom:0px;
}
/* แถบแสดงชื่อ */
.profile{
padding:5px; margin:0px 1px 0px 10px;
font-size:10px;
}
/* พวกหัวข้อของด้านข้าง เช่น คำว่า Recommended */
.sidebar-title{
padding:2px 0px 2px 8px;
color:#FFFFFF; /* เซตสีที่นี่ */
font-family:Tahoma;
font-size:12px;
padding-left:10px;
margin-right:1px;
background-color:#CCCCCC; /* เซตแบรคกราวนด์ของหัวข้อ ของแถบลิงค์ ที่นี่ */
}
.sidebar-item{
padding:0px 0px 0px 5px;
margin:0px 0px 10px 0px;
}
/*แต่ละไอเท็มของแถบด้านข้าง*/
.sidebar-item li{
background-repeat: no-repeat;
list-style-type: none;
margin:0px 5px 0px 10px;
padding:0px 0px 0px 15px;
background-image: url(/global/theme/predefined/creativity/bul.gif); /* เซตไอคอนของแต่ละิลิงค์ด้านข้างที่นี่ */
background-position:0px 2px;
}
.sidebar-item a:link, .sidebar-item a:visited, .sidebar-item a:hover{
font-family:"Trebuchet MS",Tahoma;
text-decoration:none;
font-size:12px; /* อยากให้แถบลิงค์มีฟอนต์ขนาดเท่าไหร่ */
border:0px;
color:#333333; /* อยากให้ลิงค์ในแถบลิงค์มีสีอะไร */
}
.sidebar-item a:hover{
border:0px;
text-decoration:underline;
}
/* ส่วนคอมเมนต์ */
.comment{
padding:2px 5px 2px 5px;
margin:10px;
border:1px dotted #CCCCCC;
border-left:10px solid #CCCCCC;
}
.commentcontent{
color: #000000;
padding:5px 5px 5px 16px;
color:#000000;
font-size:11px;
line-height: 1.3em;
}
.commentfooter{
border-top:1px solid #EEEEEE;
padding:2px 2px 2px 15px;
color:#999999;
font-size:10px;
}
.commentdetail{
padding:0px 5px 0px 0px;
}
.commentposter a:link,.commentposter a:visited,.commentposter a:hover{
text-decoration:none;
padding:0;
border-bottom:0px;
}
.commentposter a:hover{
border-bottom:0px;
}
/* ฟอร์มใส่คอมเมนต์ */
form{
padding:2px 5px 2px 20px;
margin:10px;
border:1px dotted #CCCCCC;
border-left:10px solid #CCCCCC;
font:11px Tahoma,"MS Sans Serif";
}
/* ตรง textbox ของคอมเมนต์ */
input{
font:11px Tahoma,"MS Sans Serif";
}
นี่คือการใส่ บีจี ตามใจชอบ อยากให้เลื่อนก็ไม่ต้องใส่โค้ดตัวนั้นไปนะ แต่ถ้าอยากให้ฟิกอยู่กะที่ก่ใส่โค้ดไปนะจ๊ะ...อย่าลืม ต้องเปง url นะจ๊ะ มาโพสไว้ในบอร์ดก่องก่ได้ โย่วๆ
อันนี้ใส่เฮดไดจ้า
อานเน้สีพื้นหลังอ่ะครับ
อานนี้สีตัวอักษรกะ ไฮไลท์งับๆ
อานนี้วิธีใส่ไคคอน ดุกดิก ฮี่ๆ ของทรายเปงรูปหัวใจสวยงามมมม
อานี้ส่วนของคอมเม้นน
