สอนแต่งhi5ด้วยโค้ดง่ายๆ
การที่เราจะแต่ง Hi 5 หั้ยสวยได้ขึ้นอยู่กับ 2 อันดับแรกค่ะ คือ
1.โค้ดที่จะใช้
- โค้ดที่จะใช้เราสามารถที่จะปรับปรุงหรือเรียนรุ้เองได้ง่าย ๆ
- เราสามารถนำโค้ดที่ปรับปรุงเองมาใช้เป็นประโยชน์และแปลกตาได้
2.รูปภาพที่จะใช้
- เมื่อเรามีโค้ดเราก้อต้องมีรูปภาพที่จะตกแต่งใช่ไหมค่ะ ??
- รูปภาพที่จะใช้นั้นก้อต้องมีขนาดพอดีกับโค้ดที่จะใช้ด้วยน่ะค่ะ
- เราอาจจะเลือกรูปภาพสำเร็จรูปแล้วหรือทัมเองก้อได้โดยความชื่นชอบส่วนตัว
และสิ่งที่สำคัญนั้นก้อคือ รูปแบบที่เราชอบที่สุด
Hi 5 จะออกมาสวยได้ก้อต้องเป็นรูปแบบที่เราชอบใช่ไหมค่ะ ??
งั้นเราไปแต่ง Hi 5 ด้วยโค้ดกันเลยดีกว่าค่ะ
- โ ค้ ด Background -
<style type='text/css'>
body {
background-image: url('URL');
background-attachment: fixed;
background-repeat: repeat;}
</style>
- โ ค้ ด Head 1 -
<style type="text/css">
#p_nav_header { background: url(URL )!important;
background-repeat:no-repeat!important; border:none;
width: 956px!important;margin-top:7px!important;height: สูงpx}
#new_header,#top_header , #primenu li.on,#p_nav_primary ,#nav_select{ background:none !important; border:none; }
table#search_table tr td { vertical-align: left !important;}
#search_table {direction:ltr !important}
.box_profile_connections {display:none!important}
.profile-nav {margin: 0 0 10px 0; padding: 0px 0 0 0!important;}
</style>
- โ ค้ ด Head 2 -
<style type="text/css">
#profile-name {background-image:url(URL );width:956px; height: สูงpx;background-repeat:no-repeat; }
.profile-nav .name strong {color: สีชื่อ!important;}.profile-nav .name span {color: สีวิว!important;}
</style>
- โ ค้ ด Head 3 -
ค ว า ม สู ง ไ ม่ เ กิ น 3 0 น่ ะ ค่ ะ
<style type="text/css">
#profile-navbackground:url(URL ) no-repeat;height: 15px;}.sub_nav_link {color: สีฟ้อน!important;}
</style>
- โ ค้ ด Head 4 -
<style type="text/css">
#user-details .content {background: url(URL );height: สูงpx}
#user-details{border:none !important;}.section .footer { display:block!important;}
#user-details .footer {background: url (none);height:0px;}
</style>
- โ ค้ ด Section Body 1 -
<style type="text/css">
.section h1 {
line-height: สูงpx;
padding: 0 7px;
background-color: สีแบคกราว;
background-image: url(URL);
color: สี FONT;}
</style>
-โ ค้ ด Section Body 2 -
ค ว า ม สู ง ไ ม่ เ กิ น 30 น่ ะ ค่ ะ
<style type="text/css">
.section h2 {
background-color: สีแบคกราว;
background-image: url(URL);}
.section h2 a {
color: สี FONT;}
</style>
- โ ค้ ด Section Body 3 -
<style type="text/css">
.section .content {
background-color: สีแบคกราว;
background-image: url(URL);
background-position: top;
background-repeat: repeat-y;}
</style>
- โ ค้ ด Section Body 4 -
<style type="text/css">
.section .footer {
background-image: url(URL);
display: block;
height: สูงpx;}
</style>
- โ ค้ ด Size Head 1 กะ Font Head 1 เรืองแสง -
<style type='text/css'>
#primenu li a {color: สีฟ้อน}
#primenu li a{font-size: ขนาดฟ้อนpx;}
#userstuff {color: สีฟ้อน}
#userstuff {font-size: ขนาดฟ้อนpx;}
#primenu
{filter:progid:DXImageTransform.Microsoft.Glow(color=สีเรืองแสง,
strength=5);}
#userstuff
{filter:progid:DXImageTransform.Microsoft.Glow(color=สีเรืองแสง
,strength=5);}
</style>
- โ ค้ ด Comment Box 1 -
<style type="text/css">
color: none;
font:normal 14px tahoma;
line-height:10px;
text-decoration: none; }
input, select, .textfield, .button {
border: 2px Dashed #7D4401;
font:normal 14px tahoma;
background-image: url(URL);
background-color: สีแบรคกราว;
color: สีฟ้อน;
filter: alpha(style=5,opacity=90); }
</style>
- โ ค้ ด Icon Online -
<style type="text/css">
#online-now-icon {
BACKGROUND:
url(URL);HEIGHT: สูงpx;WIDTH: กว้างpx;
filter:none;}
</style>
- โ ค้ ด Point border -
<style type="text/css">
a:hover img {Filter:alpha(finishopacity=0, style=2)}
a:hover {background-image:url(URL);border-style: dashed; border: 2px;border-color: สีกรอบ;}
</style>
- โ ค้ ด Icon Display -
<style type="text/css">
#user-links img {display: none}
#user-links a {list-style:url(URL) inside;display:list-item}
</style>
- โ ค้ ด Link Display -
<style type="text/css">
#about-left .subsection-separator {DISPLAY: block;background:url(URL) !important;HEIGHT:สูงpx! important;background-repeat: no-repeat! important;background-position: center! important;}
</style>
- โ ค้ ด Border กะ Background Icon link -
<style type='text/css'>
#user-links a {display:list-style-image;background:url(URL);
border: Border Sizepx สี Border;
background-color: {display:noen}
padding-left:25px;
font-size: Size ขนาดฟ้อนpx; }
</style>
- โ ค้ ด Border กะ Background Stats -
<style type="text/css">
#vanity-bars {border-style: Border; border: ขนาดpx;border-color: สี Border; background:url(URL);}
</style>
- โ ค้ ด Center Stats กะ Color Stats -
<style type="text/css">
#abuse-links a {color:#FFFFCC !important}
#vanity-bars h4{text-align:center;}
</style>
- โ ค้ ด ล บ เ พื่ อ น ที่ มี เ ห มื อ น กัน -
<style type="text/css">
#common-friends { display:none; }
</style>
- โ ค้ ด Divider ( บ น Friend ) -
<style type='text/css'>
{ color:#FF6699; } .nametext { color:#FF6699; } #friends {padding-top: สูงpx;
background-image:url(URL);
background-position:top center; background-repeat:no-repeat}
#p_center .bg_content table {background-image:none; }
</style>
- โ ค้ ด Size Top Friend -
<style type="text/css">
.friend-picture{height:100px !important;width:กว้างpx!important;
margin-left:0px;border: none 0px; }
.friend-picture img {height:100px !important;width:กว้างpx!important;margin-left: 7px}
</style>
- โ ค้ ด Border Top Friend -
<style type="text/css">
.friend-picture {border: Dotted 5px #FFFFCC;}
</style>
- โ ค้ ด Background Album -
<style type="text/css">
.album {
background: url(URL) top left no-repeat;height: 100;width: 100;}
.album img {top: 7px;left: 7px;right: 10px;bottom: 10px;}
</style>
- โ ค้ ด Link Fives -
<style type="text/css">
#user-fives .listitem-separator, #friend .listitem-separator {display: block;background:url(URL)
!important;height: 100px! important;background-repeat: no-repeat! important;background-position: center! important;}
</style>
- โ ค้ ด Comment Box 2
ห ม า ย เ ห ตุ : <p align=center> จ ะ ช่ ว ย ใ ห้ ก ล่ อ ง เ ม้ น อ ยู่ ก ล า ง
<p align=center><style type="text/css">
textarea{width:350;height:348;
background:url(URL); Width: 350px; HEIGHT: 420px;
color=#FF0000; }
</style></p>
- โ ค้ ด ล บ Link Comment -
<style type="text/css">
#comments h3 {border:none}
</style>
- โ ค้ ด Border Comment Friend -
<style type="text/css">
.comment-picture {border: Border Size px สี Border ;}
</style>
- โ ค้ ด Font Comment เ รื อ ง แ ส ง -
<style type="text/css">
.section .comment-text {filter:Glow(color=สีเรืองแสง
,strength=5);height:14;COLOR: สี Font; letter-spacing: 2px;}
</style>
- โ ค้ ด Size กะ Color Font Comment -
<style type="text/css">
.section .comment-text {
FONT-SIZE: Size px; FLOAT: none; MARGIN: 10px 0 0 15px; OVERFLOW: auto; WIDTH: 440px;
COLOR: สี Font; FONT-FAMILY: none; }
</style>
- โ ค้ ด Font Comment Center -
<style type="text/css">
.section .comment-text {
TEXT-ALIGN: center;}
</style>
- โ ค้ ด Link Comment -
<style type="text/css">
#comments .listitem-separator
{background:url(URL) top center no-repeat !important;
height: 100px !important;}
</style>
- โ ค้ ด Cursor Mouse -
<style type="text/css">
body {cursor: url(URL); }
</style>
- โ ค้ ด Scrllbar Small
<style type="text/css">
BODY {
scrollbar-3dlight-color: สี;
scrollbar-track-color: สี;
scrollbar-base-color:สี;
scrollbar-arrow-color:สี;
scrollbar-darkshadow-color:สี;
scrollbar-face-color:สี;
scrollbar-highlight-color:สี;
scrollbar-shadow-color:สี; }
</style>
- โ ค้ ด Scrllbar Big
<style type="text/css">
html {
scrollbar-3dlight-color: สี;
scrollbar-track-color: สี;
scrollbar-base-color:สี;
scrollbar-arrow-color: สี;
scrollbar-darkshadow-color:สี;
scrollbar-face-color:สี;
scrollbar-highlight-color:สี;
scrollbar-shadow-color:สี; }
</style>
ส่วนคัยที่มีปันหาอะรัยก้อปรึกษาได้ค่ะ
และถ้ายากได้โค้ดอะรัยเพิ่มก้อบอกน่ะค่ะ
เครดิต : http://papakiku45.hi5.com/