:18: :18: :18: :18:
ก่อนเราจะรู้จัก Code เราจะต้องทำการลบข้อมูลของเก่าออกซะก่อน
1.Remove Skin เดิมทิ้ง
2.แล้วใช้
Customize Profile
( หา ไม่ เจอ ก็ คลิ๊ก ที่ รูป นี้ ได้ เลย น๊ะ )
3.แล้วเราก็ใส่ Code ต่อไปนี้ลงในส่วน Style: (Optional) / (
ใน ช่อง สี เหลี่ยม นะ )
Code สี ดู ใน Link นะ คับ
http://www.ji-ja.com/color
URL คือ File Link ของ รูป คับ
วิธีที่ จะ ได้ มัน มา คือ
- 1. เอา รูป ที่ มี ใน เครื่อง โพส ไว้ ใน เวป หรือ upload ลง เวป หรือ ใน Hi5 เรา ก้ ได้
- 2. คลิ๊ก ขวา ที่ รูป ที่ อยุ่ ใน เวป หรือ Hi5
- 3. เลือก Properties ( มัน จะ อยู่ ล่าง สุด)
- 4. ดู ที่ Address (URL) :
......ส่วน นี้ คือ URL ของ รูป
[glow=red,2,300]เริ่ม ใส่ Code กัน ได้ เลย[/glow]
--------------------
ส่วน ของ BG ---------------------
Code : ใส่รูป Background พื้นหลัง มี 4 แบบ 4 โค๊ต อ่ะ คับ ลอง ดู
แบบที่ 1
พื้นหลังล็อกติด
และไม่ทำรูปซ้ำ
<style type="text/css">
body {
background-image: url(URLของรูป) ;
background-attachment:fixed;
background-repeat: no-repeat; }
</style>
ส่วน ใหญ๋ ใชั กับ รูปภาพ BG เต็ม จอ พอ ดี
แบบที่ 2
พื้นหลังล็อกติด
และทำรูปซ้ำ
<style type="text/css">
body {
background-image: url(URLของรูป) ;
background-attachment:fixed;
background-repeat:repeat; }
</style>
ส่วน ใหญ่ ใชั กับ รูปภาพ BG เล็ก ที่ ใช้ หลายๆ รูป จน เต็ม จอ
แบบที่ 3
พื้นหลังเลื่อนตามสกอบาร์
และทำรูปซ้ำ
<style type="text/css">
body {
background-image: url(URLของรูป) ;
background-attachment:scoll;
background-repeat:repeat; }
</style>
ส่วน ใหญ๋ ใชั กับ รูปภาพ BG เต็ม จอ พอ ดี
แบบที่ 4
พื้นหลังเลื่อนตามสกอบาร์
และไม่ทำรูปซ้ำ
<style type="text/css">
body {
background-image: url(URLของรูป) ;
background-attachment:scoll;
background-repeat: no-repeat; }
</style>
ส่วน ใหญ่ ใชั กับ รูปภาพ BG เล็ก ที่ ใช้ หลายๆ รูป จน เต็ม จอ
Code : ลบเส้นขอบ บลอคต่างๆ
<style type="text/css">
#user-details { border: none; }
.section .content { border: none; }
</style>
Code : ใส่เส้นขอบให้บลอคต่างๆ
<style type="text/css">
#user-details {border:5px double :#ใส่โค๊ตสี}
.section .content {border:5px double #ใส่โค๊ตสี}
</style>
ส้ม = เปลี่ยน ได้ ตาม ใจ ชอบ นะ
double = เส้นคู่
dotted = เส้นจุดประๆ
solid = เส้นตรงเรียบกริ๊บ!
--------------------
Search Bar -------------------
Code : เปลี่ยนสีตัวอักษรช่วง Search Bar ทั้งหมด
<style type="text/css">
#top_header{color:#ใส่โค๊ตสี!important}
#top_header a.account_link { color: #ใส่โค๊ตสี; }
#top_header a.search_link { color: #ใส่โค๊ตสี; }
#top_header a.search_link_active { color: #ใส่โค๊ตสี; }
#top_header span { color: #ใส่โค๊ตสี !important; }
#p_nav_primary li#nav a { color: #ใส่โค๊ตสี; }
#p_nav_primary li#nav_select a { color: #ใส่โค๊ตสี; }
</style>
Code : ทำ Search Bar ให้ใส
<style type="text/css">
#p_nav_primary #nav_select {background-image:none;}
#p_nav_header {background:none; border:none; }
div#top_header {background:none; }
#p_nav_primary { background: none; border:none; }
</style>
Code : เอา Search Bar ทั้งหมดออก
<style type="text/css">
#p_nav_header{display:none}
</style
-----------------------
รูป ต่างๆ ----------------------
Code : เปลี่ยนรูป Display ของเราให้ใหญ่ขึ้น
<style type="text/css">
#user-picture img {height: 180px !important;
width: 130px;visibility: hidden;}
#about-left {background:url( ใส่ URL ของรูปภาพ ) no-repeat 50% 0%;} }
</style>
Code : เปลี่ยนรูป Display อยู่ตรงกลาง
<style type='text/css'>
#about-left{position: relative;left: 30em;}#about-right{position: relative;left: -52em;}#about-center{position: relative;left: 32em;}
</style>
Code : เปลี่ยนรูปช่วง Comment ให้ใหญ่ขึ้น
<style type="text/css">
.comment-picture {height:100px!important;
width:100px;border:solid #000000 1px;} .comment-picture a img {width:100px;height:100px;}
</style>
Code : เปลี่ยนรูป Top Friend ให้ใหญ่
<style type="text/css">
.friend-picture{height:100px !important;width:85px!important;
margin-left:0px;border:solid #000000 1px; } .friend-picture img {height:100px !important;width:100px!important;margin-left: 7px}
</style>
ส้ม = กรอบ รูป เปลี่ยน ได้ ตาม ใจ ชอบ นะ
double = เส้นคู่
dotted = เส้นจุดประๆ
solid = เส้นตรงเรียบกริ๊บ!
Code : เปลี่ยนรูปทุกรูปใน page มีหลายแบบลองไปใช้ดูคับ
แบบที่ 1 page เบลอๆ
<style type="text/css">
a:link img {filter:blur(add = 0, direction = 225, strength = 10);}
a:visited img {filter:blur(add = 0, direction = 225, strength = 10);}a:hover img {filter: none}
</style>
แบบที่ 2 จะเปลี่ยนเป็นสีเทา
<style type="text/css">
a:link img {filter:none;}
a:visited img {filter:none;} a:hover img {filter:gray;}
</style>
แบบที่ 3 ด้านซ้ายไปขวา จากขวาไปซ้าย
<style type="text/css">
a:hover img {filter:fliph;}
</style>
แบบที่ 4 อันนี้ต้องลองเอง
<style type="text/css">
a:link img {filter:xray();} a:visited img {filter:xray();} a:hover img {filter:none;}
</style>
แบบที่ 5 page ใส
<style type="text/css">
a:link img {filter:alpha(opacity=60);} a:visited img {filter:alpha(opacity=60);} a:hover img {filter:none;}
</style>
แบบที่ 6 ขาวดำ
<style type="text/css">
a:link img {filter:gray;} a:visited img {filter:gray;} a:hover img {filter:none;}
</style>
แบบที่ 7 เหมือน หิน
<style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:progid:dximagetransform.microsoft.emboss;} </style>
----------------------
i con ------------------------
Code : ที่เปลี่ยนไอคอนใต้รูป Display ของเรา
<style type="text/css">
#user-links img {display: none}
#user-links a {list-style:url(ใส่ URL ของรูป ) inside;display:list-item}
</style>
Code : เปลี่ยนรูปไอคอน Online Now
<style type="text/css">
#online-now-icon
{ background: url( ใส่URLของรูป );
height: ใส่ความสูง px;width: ใส่ความยาว px; _background: none; _filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=3D'
ใส่ URLของรูป ;)) ;height: ใส่ความสูง px;width: ใส่ความยาว px;}
#online-now-icon {background-image: url( ใส่URLของรูป );
width: ใส่ความยาว px; height: ใส่ความสูง px;margin: 5px 0px 0px 0px;}
</style>
---------------------
ส่วน ของ Comment ------------------
Code : รูปในกล่องคอมเม้น
<style type="text/css">
textarea {background-image:url( Url ของรูป );
border-style: inset;
color: สีของตัวอักษรเวลาพิมในคอมเม้นท์ ;
height: ความสูง px ;
width: ความยาว px ; }
</style>
Code : รูปข้างบนกล่องคอมเม้นท์
<style type="text/css">
#comments {
padding-top:ความสูงขอรูป px;
background-image:url( ใส่ URL ของรูป );
background-position:top center;
background-repeat:no-repeat}
</style>
Code : รูป เพื่อนcomment อยู่ตรงกลาง
<style type='text/css'>
.comment-picture {MARGIN-TOP: 6em; LEFT: 16em;POSITION: relative;}
</style>
Code : สลับ ย้ายคอมเม้นท์มาด้านซ้าย (รวมทั้งลิตเพื่อนและอัลบั้มภาพ)
<style type=text/css>
table {direction:rtl;} table table table {direction:ltr;}
</style>
Code : Hidden ข้อความใน Comment / เอา เมาส์ ชี้ Show Comment
<style type="text/css">
.subsection .comment {height:105px !important;}
.subsection .comment:hover {height:100% !important;overflow-y:auto;}
</style>
Code : ลบเส้นขั้นใน Comment
<style type="text/css">
.listitem-separator {visibility: hidden;}
</style>
Code: ย้าย(เฉพาะรูป)คอมเม้นท์
<style type="text/css">
.comment-picture img { float: right; }
.comment-picture a img { float: right; }
</style>
Code : ตัวหนังสือใน comment
<style type='text/css'>
.section .comment-text {
TEXT-ALIGN: left ;
line-height: 15pt;
color: #ใส่โค๊ตสี;
filter: glow(color= #ใส่โค๊ตสี, strength=5)
}
</style>
ส้ม ตำแหน่ง ของ คอม เม้ม
left (ซ้าย) / center (กลาง) / right (ขวา)
-----------------------
แถบ สถิติ ---------------------
Code : เปลี่ยนแถบสีแสดง สถิติ
<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>
url รูปภาพลองไปใช้ดู
----------------------
header (กอบอันบน) ----------------
Code : เปลี่ยน header (กอบอันบน)
- header หลัก อันแรก
<style type="text/css">
#profile-name {background-image:url(Url ของรูป);
background-repeat:no-repeat;
color:#โค๊ตสี ตัวหนังสือ ;
height: ความสูง px;
width: 956 px;}
#profile-nav { background-color: #โค๊ตสี BG อัน ล่าง ; }
</style>
- header ใสมองทะลุได้ทุกอัน
<style type="text/css">
#profile-nav { background-color: transparent; }
.section h1 { background-color: transparent; border: none; }
.section h2 { background-color: transparent; border: none; }
</style>
- ใส่รูปภาพให้กับ header ส่วน อื่นๆ
<style type="text/css">
.section h1 { background-color: transparent; border: ขนาดของเส้น px แบบของเส้นขอบ #โค๊ตสีของเส้นรอบ;
background-image:url(Url รูปภาพ);
color: #สีตัวอักษรชื่อตาม header;
background-repeat:repeat;
height: แล้วแต่ px ;
width: แล้วแต่ px ;}
.section h2 { background-color: transparent; border:none;}
</style>
ส้ม = แบบของเส้นขอบ
double = เส้นคู่
dotted = เส้นจุดประๆ
solid = เส้นตรงเรียบกริ๊บ!
Code :ปิดเส้นขอบและพื้นหลัง
<style type="text/css">
#profile-nav,.section h1,.section h2
{ background-color: transparent; border: none; }
</style>
-------------------------
Link ---------------------
Code : สำหรับชี้ลิ้งค์แล้วเปลี่ยน
- เป็นจุดสีชมพูวิบวับๆ
<style type="text/css">
a:hover{background: url('http://www.ayw102.th.gs/web-a/yw102/hi5/12.gif'); }
</style>
- ไฮไลท์แว๊บๆ - แดง
<style type="text/css">
a:hover{background: url('http://www.ayw102.th.gs/web-a/yw102/hi5/16.gif'); }
</style>
- ไฮไลท์แว๊บๆ - ดำ
<style type="text/css">
a:hover{background: url('http://www.ayw102.th.gs/web-a/yw102/hi5/17.gif '); }
</style>
- ไฟลุกขึ้นมา
<style type="text/css">
a:hover{background: url('http://www.ladylony.com/xox1.gif'); }
</style>
-------------------
Five --------------------
Code : ใส่รูปขอ Five นะครับ
<style type="text/css">
#user-fives .subsection div {width:45px !important}
#user-fives .subsection .listitem-separator {display:block !important}
#user-fives .subsection {background:url( URLของรูปภาพ );
background-position:225px;
background-repeat:no-repeat
</style>
------------------------
ส่วน ประ กอบ อื่นๆ ------------------------
Code : ใส่กรอบให้หน้าเวป
มีทั้งหมด 4 แบบอ่ะ สามารถเปลี่ยนสีได้ตามใจชอบคับ
จะใส่ต่างกันทั้ง 4 ด้านก็ได้อ่ะคับ ^^
แบบที่ 1
<STYLE>
html
{ BORDER-RIGHT: #ใส่โค๊ตสี 12px ridge;
BORDER-TOP: #ใส่โค๊ตสี 12px ridge;
BORDER-LEFT: #ใส่โค๊ตสี 12px ridge;
BORDER-BOTTOM: #ใส่โค๊ตสี 12px ridge }
</STYLE>
แบบที่ 2
<STYLE>
html
{ BORDER-RIGHT: #ใส่โค๊ตสี 12px solid;
BORDER-TOP: #ใส่โค๊ตสี 12px solid;
BORDER-LEFT: #ใส่โค๊ตสี 12px solid;
BORDER-BOTTOM: #ใส่โค๊ตสี 12px solid;}
</STYLE>
แบบที่ 3
<STYLE>
html
{ BORDER-RIGHT: #ใส่โค๊ตสี 12px dotted;
BORDER-TOP: #ใส่โค๊ตสี 12px dotted;
BORDER-LEFT: #ใส่โค๊ตสี 12px dotted;
BORDER-BOTTOM: #ใส่โค๊ตสี 12px dotted;}
</STYLE>
แบบที่ 4
<STYLE>
html
{ BORDER-RIGHT: #ใส่โค๊ตสี 12px double;
BORDER-TOP: #ใส่โค๊ตสี 12px double;
BORDER-LEFT: #ใส่โค๊ตสี 12px double;
BORDER-BOTTOM: #ใส่โค๊ตสี 12px double;}
</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 : เพิ่ม Top Friend อีก อัน (เอา ไป วาง ใน ช่อง Lifestyle หรือ
Interests ก็ได้น๊ะ คับ )
<style type="text/css">
<!--
.style11 {font-size: 12; }
-->
</style>
<table width="452">
<tr>
<th widt" scope="col"><a href="
ลิ้งคนที่1 " target="_blank">
ชื่อคนที่1</a><br>
<a href="
ลิ้งคนที่1" target="_blank"><img src="
รูปคนที่1" width="80" height="100" border="0"></a><br>
<a href="
ลิ้งคนที่1 " target="_blank"></a></p> </th>
<th width="113" scope="col"><a href="
ลิ้งคนที่2 "target="_blank">
ชื่อคนที่2 </a><br>
<a href="
ลิ้งคนที่2 " target="_blank"><img src="
รูปคนที่2 " width="80" height="100" border="0"></a></th>
<th width="113" scope="col"><span class="style11"><a href="
ลิ้งคนที่3 " target="_blank">
ชื่อคนที่3</a>
<a href="
ลิ้งคนที่3 " target="_blank"><img src="
รูปคนที่3 " width="80" height="100" border="0"></a><br>
</span></th>
<th width="113" scope="col"><span class="style11"><a href="
ลิ้งคนที่4 " target="_blank">
ชื่อคน4</a><br>
<a href="
ลิ้งคนที่4 " target="_blank"><img src="
รูปคนที่4 " width="80" height="100" border="0"></a></span></th>
<th width="113" scope="col"><span class="style11"><a href="
ลิ้งคนที่5 " target="_blank">
ชื่อคน5</a><br>
<a href="
ลิ้งคนที่5 " target="_blank"><img src="
รูปคนที่5 " width="80" height="100" border="0"></a></span></th>
</tr>
<tr>
</tr>
ริส จะ ตอบ คำ ถาม ตรง นี้ นะ คับ
bbb5
ถ้า ใส่ โค๊ต แล้ว มัน ไม่ ได้ ลอง อ่าน นี้ ก่อน คับ
ตาม ที่ เรา เจอ มา อ่า นะ
มัน เกิด จาก
โค๊ต ตัว เดี่ยว กัน ซ้อน กัน
เช่น ตัว อย่าง แบบ นี้
โค๊ต ขยาย รูป คอม เม้ม
ที่ คุณ copy จาก บอร์ด 1 ไป ใส่
มัน มี โค๊ต เส้น ขอบ มา ให้ ด้วย
เป็น ขอบ เส้น ป่ะ
แล้ว คุณ ไป เอา โค๊ต รูป อยู่ ตรง กลาง มา จาก บอร์ด 2
แล้ว มัน มี โค๊ต เส้น ขอบ มา ว่า none( คือ ไม่ เอา อ่ะ )
พอ ใส่ ไป เส้น ขอบ รูป หาย
มัน ก็ เปง เช่น นี้ เหละ
ลอง เอา โค๊ต สลับ ตำ แหน่ง ก่อน หลัง ดู นะ
ถ้า เปง กรณี นี้
[quote author=ohmjuk link=topic=1577.msg9856#msg9856 date=1204036056]
[/quote]
Link ใช้ แบบ นี้ ก็ ได้ คับ - ตัว อย่าง
http://l2is-ai29.hi5.com
ชื่อ นี้ เรา ตั้ง เอง ได้ เลย (เรียก ได้ ตาม สะ บาย ว่า งั้น 555+)
รูป ให้ เอา URL มา ใส่ คับ - วิธี ก็ ไป คลิ๊ก ขวา ที่ รูป ของ โปร ไฟส์ เขา มา ได้ เลย
- หรือ เอา รูป เขา มา ใส่ hi5 เรา ก่อน ค่อย เอา url ใส่ ก็ ได้ คับ
[quote author=Pigzii3_Noii3 link=topic=1577.msg10055#msg10055 date=1204063491]
[/quote]
Code : ทำ ให้ กลม กลืน กับ BG
<style type="text/css">
#p_nav_primary #nav_select {background-image:none;}
#p_nav_header {background:none; border:none; }
div#top_header {background:none; }
#p_nav_primary { background: none; border:none; }
</style>
Code : ใส่ รูป
<style type="text/css">
#p_nav_primary #nav_select {background-image:url( ใส่ URL );}
#p_nav_header {background:none; border:none; }
div#top_header {background:none; }
#p_nav_primary { background: none; border:none; }
</style>
hi5c!lub
