**\\::Welcome To S_B's Home:://**

สุดท้าย วันที่ไม่ได้เล่นเน็ท เพื่อป้องกันการโดนด่าว่าอู้งาน

เลยจับโปรเจคดองข้ามปีในคอมตัวเองมานั่งทำ

ก็ได้บีจีบลอคของตัวเองที่เปลี่ยนกลับมาแบบเดิม

เพราะที่ทำแบบใหม่โครตจะไม่ชิน+รำคาญต้องมานั่งเลื่อนตลอดเวลา

บีจีนี้ก็เป็นครั้งแรกที่เอารูปตัวเองมาทำ 5555

ก่อนหน้านี้อับอาย ไม่กล้าเปิดเผยตัวจริง(ตอนนี้ด้าน??)

แต่สังเกตได้ว่า เป็นบีจีบลอคข้าพเจ้า

แต่จะมีรูปหญิงริวสุดที่เลิฟอยู่ในทุกรูปที่ใช้ 55555

อะไรนะ? อยากเห็นหน้าผม??

อ้อ งั้นมองไปที่รูปด้านซ้ายมือนะฮะ อืมๆ

แล้วมองขึ้นไปรูปบน

นั้นแหละๆ ตรงนั้นน่ะ

อะไรนะ?

เสื้อเขียวน้ำทะเล

มะช่ายๆ..

มองขึ้นไปอีก.

อีกนิดนึงๆ.....

บนซุ้มน่ะ..

ตัวที่มีปีกน่ะ เห็นไม สีทองๆน่ะ

นั้นแหละผม 5555 (วิ่งหนีบาทาเพื่อนๆ)

ล้อเล่นครับ

รูปผมรูปล่างซ้ายมือครับ

ไอ้ตัวกลมๆที่ถ่ายคู่กับหญิงริวนั้นแหละผม 555 (ใครอยากรู้ฟะเนี้ย)

นอกจากนี้ผมยังได้บีจีบลอคพี่โอนิ mini giant ของพวกเรามาอีก1บลอค(ตอนนี้ยังไม่ได้เปลี่ยนฮะ รอติดต่อเจ้าของบลอคก่อน)

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

ตบท้ายด้วยการ เอาโค๊ดที่สัญญาไว้แต่ชาติปางก่อนมานั้นพิมพ์ใหม่ซะที เหอๆๆ

********************************************

เอาล่ะมาพูดถึงเรื่องโค๊ดดีกว่า

วันนี้โค๊ดที่ผมจะมาสอนทุกๆคนนั้นเป็นโค๊ดบลอคผมเองครับ

เอามาชำแหละให้ดูกัน เป็นโค๊ดแบบช่องหน้าต่างนะฮะ

ตรงที่เป็นแถบสีทั้งหมดจะเป็นโค๊ดที่ผมเพิ่มเข้าไปใหม่

วิธีการคือ Copyไปวางไว้ในตำแหน่งเดียวกับที่ผมบอกนะฮะ

แล้วก็โค๊ดแต่ละอันผมก็จะเขียนผลลัพธ์ของการSetไว้ให้นะฮะ ว่าSetค่าแล้วมันจะไปแสดงผลตรงไหน

มาเริ่มกันเลยดีกว่า (ผมจะทำรูปประกอบเป็นระยะๆนะครับ คลิกเพื่อดูรูปใหญ่ได้เลย)

---edit--

ลืมบอกไป ผมใช้Themeบลอคเป็นcustomนะครับ แต่ของแบบอื่นๆโค๊ดก็จะคล้ายๆกันจะมีบางแห่งที่ต่างกันนิดหน่อย แต่โดยพื้นฐานแล้วจะเหมือนกันครับ

-*-*-*-*-*-*-*-

/* ความกว้างของหน้าบลอค */

#wrapper{

width:648px; <<= ความกว้างของหน้าบลอค

}

/* เซตความกว้างของหน้าบลอค, แบคกราวนด์ของบลอคทั้งหมดและขอบ */

#all{

left:1077px; <<= ช่องว่างด้านซ้ายระหว่างขอบบลอคใหญ่กับขอบเว็บ

overflow: auto;

position: absolute;

top:45px; <<= ช่องว่างด้านบนระหว่างขอบบลอคใหญ่กับขอบเว็บ

width:650px; <<= ความกว้างของบลอค Setให้เท่ากับ #wrapper

height:462px; <<= ความสูงของบลอค

}

ทั้ง2หัวข้อต่อจากนี้จะเป็นการSetบลอคใหญ่ของเรานะครับ

/*แถบกลาง หรือก็คือที่แสดงบลอค */

#midtab{

width:630px; <<= Setค่าความกว้างให้น้อยกว่า #all ประมาณ10px

padding:0px;

}

อันนี้ผมก็ไม่เข้าใจเหมือนกันว่าทำไมต้องSetให้เล็กกว่า #all แต่ตอนที่ผมทำบลอค ถ้าSetให้มันเท่ากันมันจะเกิดแถบScrollbarด้านล่างขึ้นมาน่ะครับ เพราะฉะนั้นSetให้มันเล็กกว่าจะทำให้บลอคดูสวยกว่าฮะ

.content{

width:625px; <<= Setค่าความกว้างให้น้อยกว่า #midtab ประมาณ10px

font-family: Tahoma, "MS Sans Serif";

font-size: 12px;

color:2B609E;

text-align:left;

float:left;

}

อันนี้ผมก็ไม่ทราบอีกเช่นกัน แต่ถ้าไม่ทำให้มันเล็กกว่ามันจะเกิดปัญหาเดียวกันกับอันข้างบนเลยครับ

/* พวกที่แสดงเนื้อหาบลอคความกว้างเป็นเท่าไหร่ */

.leftcontent{

left: 0px; <<= ช่องว่างด้ายซ้ายมือ ระหว่างขอบบลอคกับขอบของส่วนcontent กรณีถ้าส่วนที่แสดงเอนทรี่อยู่ทางขวามือก็จะใช้ครับ(ปกติผมเซทให้ส่วนแสดงเอนทรี่อยู่ทางซ้ายมือ เลยเซทค่าไว้เป็น0)

width: 450px; <<= ความกว้างของบลอคContent

position: absolute;

top: 462px; <<= ช่องว่างด้ายซ้ายบน ระหว่างขอบบลอคกับขอบของส่วนcontent

height: 460px; <<= ความสูง

text-align: left; <<= เซทว่าตัวหนังสือจะอยู่ฝั่งไหน ปกติจะเซทให้อยู่ฝั่งซ้ายมือ

border:2px dot #000000; <<= เส้นกรอบ ที่เซทไว้จะเป็นแบบจุด หนา2px

}

/* พวกที่เป็นแถบลิงค์ต่างๆ */

.rightcontent{

Z-index: 1;

left: 450px; <<= ช่องว่างด้ายซ้ายมือ ระหว่างขอบบลอคกับขอบของส่วนเมนู ให้เซทใหญ่เท่ากับความกว้างของบลอคContent

position: absolute;

top: 462px; <<= ด้ายซ้ายบน ระหว่างขอบบลอคกับขอบของส่วนเมนู

text-align:left; <<= เซทว่าตัวหนังสือจะอยู่ฝั่งไหน ปกติจะเซทให้อยู่ฝั่งซ้ายมือ

width: 150px; <<= ความกว้าง

}

2อันด้านบนทั้ง leftcontent และ rightcontent เมื่อเอาค่าความกว้างมารวมกันแล้วจะต้องมีขนาดไม่เกินความกว้างของ content นะครับ

/* สีของหัวข้อพวก วันที่ ประเภท */

.iday h3 {

background-image:url(ลิงค์โค๊ด); <<= อันนี้จะเป็นโค๊ทที่ผมเพิ่มเข้าไปเอง เพื่อใส่รูปที่หน้าวันที่ที่อยู่บนสุดของเอนทรี่นะครับ

background-repeat: no-repeat;

background-position: left bottom; <<= ตำแหน่งของภาพและวันที่ ปกติจะเซทอยู่ที่ซ้ายบน อันนี้คือผมเปลี่ยนแล้ว เป็นซ้ายล่าง

margin:5px 0px 0px 0px; <<= ขอบครับ เรียงจาก ซ้าย บน ขวา ล่าง

padding: 5px 5px 5px 30px; <<= ผมไม่แน่ใจว่าต่างจากอันข่างบนยังไง แต่วิธีเซทเหมือนกันครับ

font-size: 14px; <<= ขนาดของตัวอักษร

color:#FF0000; <<= สีตัวอักษร

}

/* เรื่องหนึ่งๆ */

.entry{

padding:5px 10px 5px 10px;

margin:5px 0px 5px 0px;

}

/* หัวข้อ entry จะให้เป็นรูปอะไร เซ็ต padding ตัวสุดท้ายตามความกว้างของรูป */

.entrytitle a:link, .entrytitle a:visited, .entrytitle a:hover{

background-image: url(ลิงค์รูป); <<= รูปที่อยู่หน้าหัวข้อเอนทรี่

background-repeat: no-repeat;

background-position: left; <<= ตำแหน่งของตัวอักษรและรูป

padding:20px 20px 20px 20px; <<= ขอบครับ เรียงเหมือนเดิม ซ้าย บน ขวา ล่าง

font-size: 18px; <<= ขนาดตัวอักษร

text-decoration:none;

font-weight:bold; <<= ลุกษณะพิเศษของตัวอักษร ปกติจะเซทอยู่ที่ตัวหนาครับ

color:#000000; <<= สีตัวอักษร

border:0px; <<= เส้นขอบ ปกติจะเซทค่าไว้ที่0 ถ้าต้องการให้มีขอบก็เปลี่ยนเลข0เป็นเลขอื่นแล้วก็ใส่โค๊ดสีเข้าไปครับ

}

/* ส่วนแสดงเนื้อหา entry */

.entrycontent{

padding:5px 5px 0px 14px; <<= ขอบ

color:000000; <<= สีตัวอักษร

font-size:10px; <<= ขนาดของตัวอักษร

font-family: "MS Sans Serif"; <<= fontของตัวอักษรครับ เปลี่ยนได้ แต่ต้องเป็นfontมาตราฐานที่มีอยู่ในทุกเครื่องนะครับ

}

/* ส่วนแสดงข้อมูลของ entry เช่นวันที่โพส */

.entryfooter{

background-color:#000000; <<= สีBG

padding:2px 2px 2px 15px; <<= ขอบ c

olor:#FF0000; <<= สีตัวอักษร

font-size:9px; <<= ขนาดตัวอักษร

}

/* ชื่อผู้โพส */

.entryposter{

padding:0px 5px 0px 0px; <<= ขอบ

}

/* ลิงค์ไปดู comment ของ entry */

.entrycomment a:link,.entrycomment a:visited,

/* สีเวลาเอาเมาส์วาง */

.entrycomment a:hover{

background-image: url(ลิงค์รูป); <<= รูปที่อยู่ตรงปุ่มคอมเม้น

background-repeat: no-repeat;

color:#FFFFFF; <<= สีตัวอักษร

text-decoration:none;

padding:20px 20px 5px 5px; <<= ขอบ

border-bottom:0px; <<= เส้นขอบ

}

/* สีเวลาเอาเมาส์วาง */

.entrycomment a:hover{

background-image: url(ลิงค์รูป); <<= โค๊ดรูปที่ผมเพิ่มเข้ามา เอาไว้เปลี่ยนรูปตอนเอามท์มาวาง หรือจะใช้รูปเดิมก็ได้ครับ ถ้าไม่ใส่ตอนเอาเมาท์มาวางรูปจะหายไป

color:#FF0000; <<= สีตัวอักษร

border-bottom:0px; <<= เส้นขอบ

padding:10px 20px 5px 20px; <<= ขอบ

}

/* แถบแสดงชื่อ */

.profile{

padding:5px;

margin:0px 0px 0px 1px;

font-size:10px;

}

/* พวกหัวข้อของด้านข้าง เช่น คำว่า Recommended */

.sidebar-title{

background-image: url(ลิงค์รูป); <<= เอาไว้ใส่รูปหน้าตัวเลือกตรงแถบเมนู

padding:5px 5px 10px 5px; <<= ขอบ

color:#FF0000; <<= สีตัวอักษร

font-family:"Ravie",Tahoma; <<= fontตัวอักษร

font-size:10px; <<= ขนาดตัวอักษร

}

.sidebar-item{

padding:0px 0px 5px 0px;

margin:0px;

}

/*แต่ละไอเท็มของแถบด้านข้าง*/

.sidebar-item li{

background-repeat: no-repeat; l

ist-style-type: none;

margin:0px 5px 0px 5px;

padding:0px 5px 0px 5px;

background-position: 0px 5px;

}

.sidebar-item a:link, .sidebar-item a:visited, .sidebar-item a:hover{

font-family:"Trebuchet MS",Tahoma; <<= fontตัวอักษร

text-decoration:none; font-size:11px; <<= ขนาดตัวอักษร

}

/* ส่วนคอมเมนต์ */

.comment{

padding:2px 5px 2px 5px;

margin:10px;

border:1px solid #000000; <<= กรอบของคอมเม้น

}

.commentcontent{

color:#FF0000; <<= สีตัวอักษร

padding:5px 5px 5px 16px; <<= ขอบ

font-size:11px; <<= ขนาดตัวอักษร

line-height: 1.3em;

}

.commentfooter{

border-top:1px solid #000000; <<= เส้นคั่นระหว่างส่วนคอมเม้นกับชื่อของคนเม้น

padding:2px 2px 2px 15px; <<= ขอบ

color:#FF0000; <<= สีตัวอักษร

font-size:9px; <<= ขนาดตัวอักษร

}

.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{

color:#FF0000; <<= สีของชื่อคนเม้น

width: 438px; <<= ความกว้าง

height: 243px; <<= ความสูง

text-align:left;

padding:40px 5px 2px 20px;

margin:10px;

font:11px Tahoma,"Ravie";

background-image: url(ลิงค์รูป); <<= BGของกล่องคอมเม้น

}

textarea, input, select{ <<= เป็นโค๊ดเกี่ยวกับลักษณะภายในของกล่องคอมเม้นครับ ถ้าไม่เพิ่ม2อันนี้เข้าไปโค๊ดจะไม่ติด(มั้ง)

color:#FF0000; <<= สีตัวอักษรที่ใช้พิมพ์

font:11px Tahoma,"Ravie"; <<= fontของตัวอักษรและขนาด

background-color: #FFFFFF;filter:Alpha(opacity=40); <<= สีด้านหลังช่องที่ใช้พิมพ์คอมเม้น ยิ่ง opacityน้อยสีก็จะยิ่งใสนะครับ

SCROLLBAR-FACE-COLOR:#FFFFFF;filter:Alpha(opacity=40); <<= สีของแถบสกอร์บราในช่องที่ใช้พิมพ์คอมเม้น

SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF;filter:Alpha(opacity=40); <<= อันนี้เป็นสีไฮไลท์

SCROLLBAR-SHADOW-COLOR:#FFFFFF;filter:Alpha(opacity=40); <<= สีเงา

SCROLLBAR-ARROW-COLOR:#FFFFFF;filter:Alpha(opacity=40); <<= สีของลูกศร

SCROLLBAR-TRACK-COLOR:#FFFFFF;filter:Alpha(opacity=40); <<= สีของแถบเลื่อน

}

BODY { <<= สีของสกอร์บราเหมือนกัน แต่เป็นตรงด้านขวามือสุดของหน้าเว็บ

SCROLLBAR-FACE-COLOR:#CCCCCC; <<= สีแถบที่เป็นพื้นหลัง

SCROLLBAR-HIGHLIGHT-COLOR:#CCCCCC; <<= สีไฮไลท์

SCROLLBAR-SHADOW-COLOR:#CCCCCC; <<= สีเงา

SCROLLBAR-ARROW-COLOR:#FFFFFF; <<= สีของลูกศร

SCROLLBAR-TRACK-COLOR:#CCCCCC; <<= สีของแถบเลื่อน

}

-*-*-*-*-*-*-*-*-*-

หมดแล้วๆๆ

พอเอามาชำแหละแล้วนั่งอธิบายทีละอันมันก็เหนื่อยเหมือนกันนะเนี้ย เหอๆ

ปกติค่าความสูงของบลอคอะไรพวกนี้ผมจะเซทไว้แบบถาวรเลยครับ ไม่ไปเปลี่ยนไปขยับอะไรมันมาก

แล้วเวลาทำบลอคใหม่ก็จะวัดเอาขนาดเดิมมาใช้ แล้วก็มานั่งเปลี่ยนสีของลิงค์อะไรพวกนี้เอา ก็เลยยุ่งยากน้อยหน่อย

แต่ถ้าใครมีความพยายามก็ลองเปลี่ยนไปเรื่อยๆดูนะครับ

หาขนาดที่คิดว่าตัวเองใช้ง่ายเอาไว้ก่อนก็ดี

Special Thank!!!!!

ขอขอบคุณพี่โอนิสำหรับBGที่เอามาทำเป็นรูปตัวอย่างนะครับ(ไม่ได้ขอก่อนเลยนะเนี้ย เหอๆๆๆ)

ขอบคุณเพื่อนๆทุกคนที่เข้ามาอ่าน มีอะไรสงสัยก็ถามไว้ที่คอมเม้นได้เลยครับ แล้วผมจะมาตอบในคอมเม้นในบลอคผมนะคร้าบบบ

แล้วก็ขอบคุณเพื่อนๆที่ตามมาจากบลอคเก่าๆด้วยนะครับ ผมคิดว่าบลอคนั้นคงไม่อัพอะไรแล้ว แล้วก็คงไม่แก้ไขอะไรแล้วด้วย อาจจะแค่ไปทำธีมบลอคใหม่ แล้วก็คงปล่อยเอาไว้แบบนั้นแหละครับ ถ้ามีอะไรก็มาถามผมเอาในบลอคนี้แล้วกันนะครับ^w^

*******

ล.ป.(ลืมไป) เพื่อนๆของริวที่ไปเที่ยวDream Worldด้วยกันกับผม ถ้าอยากได้รูปก็รอสักหน่อยนะครับ ตอนนี้เน็ทผมยังเน่าอยู่เลย นี้มาใช้ที่โรงงานพ่ออะ ไว้ถ้าเน็ทดีแล้วจะอัพเป็นZip Fileให้ล่ะกันนะครับ