[ระดับเซียน] บทที่10 : สอนทำสกิน ฉบับ ใช้Codeทำ

เนื่องจากมีคนหลายๆคนบอกผมว่า
สอนทำสกินหน่อย  ผมจึงลองเอามาตั้งเป้นกระทู้ดูนะงับ
มันอาจจะไม่ค่อยดีเท่าไร แต่ผมก็เต็มใจจะสอนนะคับ

เริ่มจาก ส่วนแรกก่อนเลย
ก่อนอื่นเราจะต้อง  ใส่ข้อมูลเกี่ยวกะสีก่อน
เราจะใช้โคดนี้ครับ

<style type="text/css">
.section,.subsection {color:โคทสี;}  ตรงนี้เป็นสีตัวหนังสือธรรมดาคับ
body {color:โคทสี!important;}  ตรงนี้ให้ใส่เหมือนกันบนนะคับ
a:link {color: โคทสี; text-decoration: none; }  ตรงนี้เป็นสีของลิ้งคับ
a:active {color: โคทสี; text-decoration: none; }  ตรงนี้เป็นสีลิ้งย่อย เฉพาะที่เราเห็น เช่น Edit ทั้งหลายแหล่
a:visited {color: โคทสี; text-decoration: none; }  ตรงนี้เป็นลิ้งย่อย ที่คนอื่นเห็นด้วย ถ้าจะให้ดี 3อันนี้ใส่เหมือนกันจะดีคับ
a:hover {color: โคทสี; text-decoration: none; } อันนี้เป็นสีลิ้งตอนเอาเม้าไปชี้
</style>

ต่อไปคือส่วนของ Headหลัก นะครับ
สำหรับผมแล้วจะแบ่งไว้ 3 ส่วน



คือรูปที่เราต้องใช้นะครับ
H1 คือ รูปที่จะอยู่ตรงชื่อโพรไฟล์  ความกว้าง956*ความสูง ไม่จำกัด
H2 คือ ส่วนที่เป้นลิ้ง  ผมจะให้ใช้ขนาด  956*30 นะครับ
H3 คือ ส่วนที่เป้นข้อมูลของเรา ผมแนะนำให้ใช้ขนาด  956*400

ปล. H2 - 3 ความสูงแล้วแต่เรานะครับ แต่ผมแนะนำให้ใช้ตามนี้

ส่วนการใส่เราจะใช้โคทนี้
<style>
#profile-name {background-image:url(H1);width:956px;height:ความสูงpx;background-repeat:no-repeat; }
.profile-nav .name strong {color:#สีของชื่อโพรไฟล์!important;}.profile-nav .name span {color:#สีของวิว!important;}
#profile-nav {background:url(H2) no-repeat;height:15px;}
.sub_nav_link {color:#สีของลิ้งส่วนH2 !important;}
#user-details .content {background: url(H3);height:400px}
#user-details{border:none !important;}.section .footer { display:block!important;}
#user-details .footer {display:none;}
</style>

ปล. ปกติจะมี H4 เป็นฟุทเตอร์นะงับ แต่ผมจะไม่สอน ไม่แนะนำให้ใช้

[ แก้ไขล่าสุด RicKuKunG เมื่อ 30-4-2008 14:09 ]

ต่อไปเป็นส่วนของ Head ย่อย



รูปที่เราต้องใช้คือ 3+1 รูป
m1 คือรูปที่เป็นหัวข้อ ขนาก 470*ความสูง  ตามต้องการ
m2 คือรูปที่เป้นส่วนต่อจาก m1 ที่มีลิ้งอยู่  ขนาด 470*25
m3 คือBG ของหัวย่อย ขนาด  470*XX จะเปนพื้นหลังที่เรียงต่อกันไปเรื่อยๆ
m4 คือส่วนต่อท้าย m3 จะมีหรือไม่มีก็ได้ 470*XX ผมแนะนำ 30

เราจะใช้โคทนี้ในการทำคับ
<style>
.section h1 { background: url(m1)!important;background-repeat:no-repeat!important; border:none;margin-top:7px!important;height:ความสูงของm1px}

.section h2 { background: url(m2)!important;background-repeat:no-repeat!important; border:none;margin-top:0px!important;height:25px}#recent-updates .subsection,#lifestyle .subsection,#interests .subsection,#user-fives .subsection,#friends .subsection,#photoAlbums .subsection,#comments .subsection,#widgets .subsection,#groups .subsection,#videos .subsection,#journalDetail

.subsection{ background: url(m3)!important;background-repeat:repeat!important; border:none;margin-top:0px!important;}#recent-updates .footer,#lifestyle .footer,#interests

.footer,#user-fives .footer,#friends .footer,#photoAlbums .footer,#comments .footer,#widgets .footer,#groups .footer,#videos .footer,#journalDetail
.footer { background: url(m4)!important;background-repeat:no-repeat!important; border:none;margin-top:0px!important;height:ความสูงของm4px}
</style>

[ แก้ไขล่าสุด RicKuKunG เมื่อ 30-4-2008 14:10 ]

ค่อไปเป็นส่วนประกอบอื่นๆนะครับ

เริ่มจาก BG ก่อนเลยละกัน เราจะใช้โคทนี้
.section-separator {display:none;}body {background-image: url(Url ของ BG)
;background-attachment:fixed;background-repeat: repeat; }

ต่อไปก็หลอดสถิตินะครับ

เราจะใช้รูปขนาด 140*12 จำนวน 2รูป
รูป A คือพิ้นหลัง (ช่องสีดำ)
รูป B คือ เมื่อสถิติเดินแล้ว (เส้นสีขาวตรงกลาง)

แล้วใช้โคทนี้ทำครับ
<style>
.vanity-bar div img{display:none ;}
.vanity-bar div {background:url(รูปA)!important ;border:solid #000000 1px}
.vanity-bar div div {background:url(รูปB)!important ;border:none}
</style>

ส่วนปิด ท้าย Hi5
จะอยู่ล่างสุกของ Hi5 ของเรานะครับ อันนี้ใส่หรือไม่ใส่ก็ได้
ใช้โคทนี้ครับ
<style>
#footer {color:#000000; background: url(ปิดท้ายHi5) no-repeat center center; border: none;
display: block; height: ความสูงpx; } #footer *,#footer a,#ad_banner {display: none;}
</style>

[ แก้ไขล่าสุด RicKuKunG เมื่อ 30-4-2008 14:11 ]

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

หรือโคทไหนใช้ไม่ได้
ผมอาจจะพิมผิดไปบ้าง ก็บอกหน่อยนะครับ
จะได้แก้ให้ถูก

ขอให้สนุกกะการทำสกินนะคร๊าบบบ

เฮ้อเหนื่อยยย

ขอบคุงมากครับ

หายเหนื่อยไวๆนะ

จะได้หาอารายดีๆมาสอนอีก

อิอิ

แต๊งกิวๆๆๆๆ

พี่ชื่อรายหรอ
อื่มๆๆที่หลังผมจะฝึกทมน่ะคร๊าฟ

คือผมมือใหม่อะครับ อยากรบกวนถามว่า
อย่างส่วน H1 (รูปกาตูน วันพีช) ต้องเอารูปไป upload ฝากไว้ที่เวบไหนก่อนหรือปล่าว
ถ้าไม่ต้องแล้วจะเอารูปไปใส่ตรงไหนของ cod อะครับ ไม่เข้าใจ
รบกวนขอละเอียดๆหน่อยน่ะครับ

รบกวนอีกนิดครับ
พอจะมีตัวอย่าง code ของทั้งหมดที่เขียนแล้วมาให้ดูมั้ยครับ ไม่เข้าใจจริงๆอะ ว่าต้องเริ่มใส่ code ยังไง

โอย งงงงๆๆๆ ขอถามอีกนิดนะครับ
ปกติควรเอารูปไปฝากไว้ที่ไหนดีครับ ที่จะอยู่ได้นานๆ  แล้วถึงจะเอามาใช้ใน ใส่ใน url ใน code เรา

พี่คร้าบบบ ตอนนี้ผมเปิด hi5 ตัวเองไม่ได้แล้วอะ มันขึ้นว่า

Oops! We were unable to fulfill your request.

Sorry for the inconvenience, but we experienced an error fulfilling your request.
Go back to Home or click on the Back button of your browser to go back to the page you came from.



ทำไงดีครับเนี่ยยยยย

แหล่มเลย คับ สูบๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆ

สุดยอดเรยค๊าบ

อิอิ
ขอบคุง น้าค๊าบ  

ตอนนี้มันเปนแบบนี้อะครับ ระหว่างส่วน h2 กับ h3 มันไม่ติดกันอะ ทำไงดี

เดี๋ยวจะลองมั่วดูคับ
ขอบคุณคับ