G u i l d - M a k e - S k i n


วิธีแต่ง Hi5


( HTML/CSS )


สำหรับใครที่เพิ่งสมัคร และยังไม่ได้เริ่มต้น ตกแต่ง Hi5 เลย
คุล สามารถนำโค้ด ไปใช้ได้เลย โดยวางในบล้อก HTML/CSS
ของหัวข้อ Customize Profile

แต่สำหรับใครที่แต่ง Hi5 ไปแล้ว ผมแนะนำให้ลบโค้ดเก่าออกก่อน
เพราะโค้ดของ skin เดิม หรือโค้ดเก่าๆ จะซ้ำซ้อนกับโค้ดใหม่ ซึ่งอาจทำให้
การแสดงผลผิดเพี้ยนไป การลบ ให้เลือกที่ Remove skin ใต้รูปดิสเพลย์
จากนั้นถึงจะเลือก Customize Profile เพื่อไปลบโค้ดเก่าใน HTML บล้อก
ดังรูปเลยค้าบบบ . . .







รูปแบบของการวางโค้ด
โค้ดทุกตัวจะต้องอยู่ภายใน Style
ซึ่งสามารถรวมโค้ดทั้งหมดไว้ภายใน <style> เดียวกันได้

<style type="text/css">
...................
...................
...................
</style>


รูปแบบของโค้ด

Selector { Property : Value }

selector คือ ส่วนของ tag ,element หรือส่วนหนึ่งๆ ในเว็บเพจ
property คือ คุณสมบัติที่จะแสดง
Value คือ ค่าของคุณสมบัตินั้น

เราสามารถกำหนดได้หลายคุณสมบัติ ภายใน Selector เดียว
โดยใช้เครื่องหมาย ; คั้นระหว่าง คุณสมบัติ

ม า เ ริ่ ม เ เ ต่ ง Hi5 กั น เ ล ย

Code ใส่พื้นหลัง + ลบเส้นขอบ

การกำหนดค่า
background-attachment :
fixed ล็อกพื้นหลังอยู่กับที่
scroll พื้นหลังเลื่อนตามเนื้อหา

background-repeat :
repeat ทำซ้ำพื้นหลัง
no-repeat ไม่ทำซ้ำ

<style type="text/css">

body {
background-image: url( ใส่ url ของรูป ) ;
background-attachment: fixed ;
background-repeat: repeat ;
}

#user-details { border: none; }
.section .content { border: none; }

</style>


Code ใส่รูปในกล่อง comment

<style type="text/css">

textarea {background-image:url( ใส่ URL ของรูปนะคับ );
border-style: inset;
color: สีของตัวอักษรเวลาที่พิม ;
height: ความสูงของ CommentBox หน่วยเป็น px;
width: ความกว้างไม่ควรเกิน 450px; }

</style>



Code ใส่ cursor (รูปเม้าส์)
http://www.myspacecursor.net/arrow-cursors.html
http://www.dressupmyspace.com/cuflowers.shtml
http://www.htmate2.com/cursors/index.php
http://www.totallyfreecursors.com/index.cfm
http://www.cursorpedia.com/
copy โค้ดข้างล่างนี้ ไปวางในบล้อก HTML/CSS
แล้วเปลี่ยน URL ของเม้าส์ด้วยนะคับ url หาจากเวบตัวอย่างที่ให้ไว้
(ก้อบมาเฉพาะ url นะคับ นามสกุล .cur หรือ .ani แล้วไปใส่ในโค้ด)

<style type="text/css">

body {cursor: url( ใส่ url ของเม้าส์ จะแสดงเมื่อชี้เม้าส์บนหน้า page );}
a {cursor: url( ใส่ url ของเม้าส์ จะแสดงเมื่อชี้เม้าส์บน link );}

</style>



Code ทำแถบ Header ให้ใสทุก box

<style type="text/css">

#profile-name { background: none; }
#profile-nav,.section h1,.section h2
{ background-color: transparent; border: none; }

</style>



Code ทำให้แถบ Log in ให้หายไป

การทำให้มันหายไป อาจจะทำให้คุล Log out ลำบากนิสนึ่ง
แต่ถ้าคุลอยากจะเอามันออก เพราะเห็นว่ามันรก Hi5
ก็เพียงแต่ก้อบโค้ด ไปวางได้เลยคับ

<style type="text/css">

#p_nav_header{display:none}

</style>

ส่วนโค้ดที่ทำลิ้งกลับไปยังหน้า Home คือ
<a href="http://www.hi5.com/friend/displayHomePage.do" >Go back to home</a>
ก้อบไว้วางใน Lifestyle ,Interest ได้เลยคับ

Code ลบเส้นคั่นระหว่าง Comment

<style type="text/css">

.listitem-separator {visibility: hidden;}

</style>


Code เปลี่ยนสีเส้นคั่น Comment

<style type="text/css">

#comments .listitem-separator {background: ใส่รหัสสี !important;}

</style>


Code ขยายรูป display Comment

<style type="text/css">

.comment-picture {height:100px !important;
width:100px;}
.comment-picture a img {width:100px; height:100px;}

</style>


การตกแต่ง Content ที่เป็นข้อมูลส่วนตัว

ในส่วนนี้จะมี Selector เป็น

#user-details .content { }

ซึ่งประกอบไปด้วย 3 ส่วนย่อย คือ

#about-left { }
#about-center { }
#about-right { }


เรียงตามลำดับจากซ้ายไปขวา
คุลสามารถใส่คุณสมบัติ ต่างๆ ลงไปได้ ทั้ง 4 selector เช่น
การสลับด้าน direction: RtL; หรือ LtR
พื้นหลัง background: url( );
เส้นกรอบ border: outset 10px red;

ลองทำดูนะครับ เป็นการจัดรูปแบบ ใหม่ โดยสลับตำแหน่ง

<style type="text/css">

#user-details .content { direction: RtL;}
#about-left { direction: LtR; }
#about-center{ direction: LtR; }
#about-right { direction: LtR; }
#about-left, #about-center, #about-right
{ border: outset #1c1c1c 10px; }

</style>


#about-left, #about-center, #about-right จะเท่ากับ .about-column
จะสามารถใช้แทนกันได้นะคับ เพื่อให้โค้ดสั้นลง

Code ใส่ Footer ให้ Hi5

<style type="text/css">

#footer {
background: url(ใส่ URL รูปภาพ) no-repeat center center;
border: none; display: block; height: 50px;
}
#footer *,#footer a,#ad_banner {display: none;}
</style>

Code ใส่รูป Header ให้ Hi5

<style type="text/css">


#profile-name {background-image:url(ใส่ URL รูปภาพ); width:956px;
height:ความสูงของรูปภาพpx}

</style>


Code ตกแต่งลิ้งใต้ Header

สามารถตกแต่งได้ 3 ส่วนหลักๆ ได้แก่
#profile-nav คือ ส่วนที่เป็นแถบ
คุณสมบัติที่สำคัญ
text-align: center; จัดกึ่งกลางตัวอักษร
background-image: url(ภาพพื้นหลัง) ;
background-color: สีของพื้นหลัง;
border: เส้นกรอบ ขนาดเส้น สีของเส้น;
height: ความสูงของแถบ เป็น px;

#profile-nav a คือ ส่วนที่เป็นตัวอักษร ลิ้ง
คุณสมบัติที่สำคัญ
font-family: รูปแบบตัวอักษร;
font-size: ขนาดตัวอักษร เป็น px;
color: สีตัวอักษร;
padding: ระยะห่างระหว่างลิ้ง;

#profile-nav a:hover คือ ส่วนที่เป็นตัวอักษรขณะชี้ที่ลิ้ง
คุณสมบัติที่สำคัญ
background-image: url(ภาพพื้นหลังขณะชี้ที่ลิ้ง) ;
text-decoration: none; (ไม่มีเส้นใต้)
color: สีตัวอักษรขณะที่ชี้ลิ้ง;


<style type="text/css">

#profile-nav { background-color: สีพื้นหลัง; }
#profile-nav a { color: สีตัวอักษร; padding: 1.0em;
font-size: 12px; }
#profile-nav a:hover { color: สีตัวอักษรขณะชี้ลิ้ง;
text-decoration: none;}

</style>


Code ใส่กรอบให้หน้า Hi5
แบบของเส้นขอบ

dotted

dashed

solid

double

groove

ridge

inset

outset


<style type="text/css">

html {
border-style: ใส่แบบของเส้นกรอบ;
border-width: ใส่ความหนาของกรอบpx;
border-color: ใส่สีของกรอบ;
}

</style>


Code ScrollBar

<style type="text/css">

html {
scrollbar-arrow-color: โค้ดสี;
scrollbar-face-color: โค้ดสี;
scrollbar-highlight-color: โค้ดสี;
scrollbar-3dlight-color: โค้ดสี;
scrollbar-shadow-color: โค้ดสี;
scrollbar-darkshadow-color: โค้ดสี;
scrollbar-track-color: โค้ดสี;
}

</style>

เว็บรวม Code สี




Code ลิ้งรูปสลับด้าน

จะแสดงเมื่อใช้ mouse ชี้ไปยังลิ้งรูปภาพ
ซึ่งสามารถสลับได้ 2 แบบ คือ
Filter: FlipH คือ สลับในแนวนอน
Filter: FlipV คือ สลับในแนวตั้ง

<style type="text/css">


a:hover img {Filter:FlipH}

</style>

Code เปลี่ยนรูปแถบสถิติ
Stat Bar
อย่างที่เห็นของผมที่เป็นแถบสีแดง-ดำนะคับ
รูปที่ใช้จะมีขนาด กว้าง162px -- สูง12px
ตัวอย่างรูปที่ผมทำมาให้ ถ้าใครจะใช้
ก็คลิ้กขวาที่รูป เลือก Properties แล้วก้อบ URL ไปใช้ได้เลยนะคับ
ส่วนใครที่อยากได้สีอื่นๆ นอกเหนือจากนี้ ก็ไปทำเอาเองนะคับป๋ม














<style type="text/css">

.vanity-bar div {background:url(ใส่ URL ภาพแถบพื้น) !important;}
.vanity-bar div div {background:url(ใส่ URL ภาพแถบบน) !important;}
.vanity-bar div div img,.vanity-bar div img
{display:none;}

</style>

 
Code ทำกรอบ box, bg ให้ Comment


<style type="text/css">

.subsection .comment {background: url(ใส่ URL รูปภาพ);
border: inset 3px #c00000;
height: ความสูงของ box px; overflow: auto;}

</style>


Code ใส่ Effect ให้กับลิ้งรูปภาพ

http://www.crazyprofile.com/rollover_effects/rollovereffects
สามารถกำหนดได้ 2 ลักษณะนะคับ

1.กำหนดลักษณะของภาพเริ่มต้น จะใช้
a img {...............}
2.กำหนดลักษณะของภาพหลังชี้ Mouse
a:hover img {...............}

สำหรับการกำหนดลักษณะภาพให้ปกติ คือ Filter: none


Filter


Filter: Gray


Filter: Xray


Filter: Invert


Filter: Alpha(opacity=50)


Filter: Blur(Add = 0, Direction = 225, Strength = 10)


Filter: Wave(Add=0, Freq=10, LightStrength=20, Phase=220, Strength=10)


Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)


Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0) Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10)

<style type="text/css">


a:hover img {เลือกใส่เองเลยนะคับ}


</style>


Code ชี้ลิ้งรูปแล้วมีภาพกระพริบ

ภาพกระพริบในที่นี้ก็คือ ภาพที่มีนามสกุลเป็น .gif นั้นเอง
ซึ่งหามาจากที่ไหนก็ได้ บนอินเทอร์เน็ต หรืออัปโหลดไว้บนเว็บที่ให้บริการฝากไฟล์
หาจากลิ้งนี้ก้อได้คับ
http://www.poqbum.com/animated_hover/


<style type="text/css">


a:hover img {Filter:alpha(finishopacity=0, style=2)}
a:hover {background-image:url(ใส่ URL ภาพกระพริบ);}

</style>

 

วิธีแก้ไขเมื่อแต่ง Hi5 จนพัง

สำหรับใครที่แต่ง Hi5 จนพัง แล้วไม่สามารถเข้าลบ โค้ดได้
ให้ Log in เข้าไฮ5 ก่อน แล้วจึงก้อบ URL ด้านล่าง
ไปเปิดเพื่อทำการแก้ไข โค้ดที่ทำให้ Hi5 ของคุณพัง
หรือจะกดที่ ลิ้งสีแดงด้านล่าง เลยก้อได้นะคับ

กดที่นี่เพื่อแก้ไข < ล้อกอิน Hi5 ก่อนนะคับ >
http://www.hi5.com/friend/account/displayEditProfileCustomization.do

สำหรับเข้าแก้โค้ดใน Lifestyle
กดที่นี่เพื่อแก้ไข < ล้อกอิน Hi5 ก่อนนะคับ >
http://www.hi5.com/friend/account/displayEditProfileLifestyle.do
 


ต้อง ขอขอบคุณ Credit ซึ่งเขียนไว้ก่อนหน้านี้
Credit BY Taku
1