รวมโค๊ต เยอะแยะ มากมาย !! ลองเข้ามา ดู จร้า...

[Note Crazy ²]

ก็ มี โค๊ต พวก   JAVA   กับ  Flash อ่ะ ครับ ใช้ไม่ได้แล้ว


เหอๆๆ


.........

http://notebboyzars2.hi5.com

ฝาก hi5 ด้วย น๊า

[/size]

[Note Crazy ²]

จะ ได้ จริง รึ



กลัวโดนต้มอ่ะ

[••โบว๎ชมพู••]

โหหห เยอะมากมาย ขอบคตุณ นะค่ะ

[PiiMMz]

....http://pimzava.hi5.com....

<a href="http://img.ihere.org" target="_blank"><img alt="Image Hosted by Ihereeeeeeeeeeeeee ImageHost" src="http://img.ihere.org/uploads/c202bfab62.gif" /></a>

[Note Crazy ²]

ขอบคุณ     คุณ••โบว๎ชมพู••  นะครับ

http://notebboyzars2.hi5.com

ฝาก hi5 ด้วย น๊า

[/size]

[Note Crazy ²]

ขอบคุณ คุณ plyylp00

http://notebboyzars2.hi5.com

ฝาก hi5 ด้วย น๊า

[/size]

[Note Crazy ²]

Code ตกแต่งสำหรับ Comment Box

selector ที่เกี่ยวข้อง

#comments  บล้อกทั้งหมดของคอมเม้น
#comments h1  แถบหัวข้อที่เขียนว่า Comments
#comments h2 a  ลิ้งของคำว่า View All Entries
#comments h3  เป็นส่วนที่มี กล่องพิมพ์ และปุ่มกดอยู่
#comments h3 a  ลิ้งที่สำหรับ ใช้กดคอมเม้นแบบ All user จะเห็นในกรณีที่เรา เข้าดูโปรไฟล์คนอื่น โดยที่ยังไม่ได้ล้อกอินเข้าระบบ
.commentEditor textarea  กล่องที่ใช้พิมพ์
.commentEditor input  ปุ่มกดคอมเม้น, เพิ่มความเห็น, Add comment

.comment  กล่องคอมเม้นแต่ละกล่อง ที่เพื่อนๆ ได้คอมเม้นไว้แล้ว จะประกอบด้วย

.comment-picture  ส่วนของรุป แต่ไม่ใช่ ตัวรูป
.comment-picture img  รูปดิสเพลย์เพื่อน
หากใช้ในกรณีทำ Filter ให้กับรูป จะใช้
.comment-picture a img  {Filter:----;}
.comment-picture a:hover img  {Filter:ขณะชี้ที่รูป;}

.comment-text  ตัวอักษรที่คอมเม้น

#comments .listitem-separator  เส้นคั่นระหว่างคอมเม้น


--------------------------------------------

Code จัดกลางรูปดิสเพลย์

.comment-picture { float: none; text-align: center }


Code จัดกลางตัวอักษรที่เพื่อนคอมเม้น

.comment-text { text-align: center }


ทำตัวอักษรห่างๆ กัน

.comment-text { letter-spacing: 3px }


Code จัดกลางทั้งหมด

.comment-picture { float: none }
.comment { text-align: center }


Code ใส่ Effect ให้กับตัวอักษรคอมเม้น

.comment-text  { font-size: ขนาดตัวอักษร; font-family: รูปแบบตัวอักษร; color: สีของตัวอักษร; filter:Glow(color=สีของเงาตัวอักษร, strength=ความเข้มข้นสีเงา); height: ขอบเขตความสูง; width: ขอบเขตความกว้าง; padding: 15px; }


Code ใส่กรอบ, พื้นหลัง ของตัวอักษรคอมเม้น

ใส่กรอบ
.comment-text { border: solid 2px #000000; padding: 10px }

ใส่เป็นรูป
.comment-text { background:url(---); }

ใส่เป็นสี
.comment-text { background-color: #FFFFFF; }


Code ใส่พื้นหลังให้แต่ละบล้อก

.comment { background:url(ใส่ URL รูปภาพ); }


Fixed ค่ากล่อง แล้วมี scrollBar

.comment { height: ความสูงpx; overflow: auto; }

ใส่สี scrollBar (แบบสั้นๆ)
.comment { scrollbar-arrow-color: black;
scrollbar-face-color: white;
scrollbar-track-color: white }

Code ใส่เส้นกรอบให้แต่ละบล้อก

.comment { border: solid 2px #000000; }


Code ใส่เส้นกรอบให้บล้อกใหญ่ #comments

ใส่กรอบ
#comments { border: solid 2px #000000; }

ใส่เป็นรูป
#comments { background:url(---); }

ใส่เป็นสี
#comments { background-color: #FFFFFF; }

===========================

สำหรับการใส่ปีกไก่ให้รูป

ก้อเพียงกำหนดรูปดิสเพลย์ให้มาอยู่ตรงกลาง
แล้วนำรูปภาพที่เป็นปีกมาใส่ใน .comment

แต่เพื่อความเป็นระเบียบ จะจัดกลางทั้งหมดนะคับ

<style type="text/css">

.comment-picture { float: none }
.comment { text-align: center;
background:url(--รูปปีกไก่--) transparent no-repeat top center; }

</style>

---------------------------------------------------------

Code สามารถดัดแปลง ทำในรูปแบบอื่นได้นะคับ

ไม่มีถูก-ผิด อยู่ที่ความคิด และการสร้างสรร ^^

http://notebboyzars2.hi5.com

ฝาก hi5 ด้วย น๊า

[/size]

[Note Crazy ²]

Code ทำลิ้งต่างๆ เกี่ยวกับ Hi5

URL ของ Home
http://www.hi5.com/friend/displayHomePage.do

URL ของ Give Fives
http://www.hi5.com/friend/fives/displayAddUserFive.do?userid=เลขไอดีของตัวเอง

URL กลับหน้า HI5 ตัวเอง
http://www.hi5.com/friend/profile/displaySameProfile.do

URL Add Friend
http://www.hi5.com/friend/displayAddFriendProfile.do?userid=เลขไอดีของตัวเอง

URL Send Mail
http://www.hi5.com/friend/mail/displayComposeMail.do?toIds=เลขไอดีของตัวเอง

URL ของ Log out
http://www.hi5.com/friend/logoff.do


URL ของ Comments

http://tapopo.hi5.com/friend/book/displaySignBook.do?userid=เลขไอดี


URL ของ Journal หรือสมุดบันทึก

http://www.hi5.com/friend/profile/displayJournal.do?viewother=true&ownerId=เลขไอดี


URL ของ Photo

http://www.hi5.com/friend/photos/displayUserAlbum.do?viewother=true&ownerId=เลขไอดี


URL ของ Scrapbook หรือฝากข้อความ

http://www.hi5.com/friend/profile/displayScrapbook.do?userid=เลขไอดี




เลขไอดี ดูจากแถบบราวน์เซอร์ตอนที่อยู่ในProfileของตัวเองนะคับ userid=..............
ownerId=.............
(แถบด้านบน ที่ใช้กรอก www...)

นำ id มาใส่ลิ้ง แล้วใส่ข้อความหรือรูปภาพ

โค้ดสำหรับสร้างลิ้ง

<a href="ลิ้งที่จะไป">ข้อความที่แสดง</a>

ลิ้งที่เป็นรูปภาพ

<a href="ลิ้งที่จะไป"><img src="URL รูปภาพ" /></a>

ถ้าเอามาใส่ ก้อจะได้เป็น

<a href="http://www.hi5.com/friend/displayHomePage.do">H O M E</a>

<a href="http://www.hi5.com/friend/fives/displayAddUserFive.do?userid=เลขไอดีของตัวเอง">Give Fives</a>

http://notebboyzars2.hi5.com

ฝาก hi5 ด้วย น๊า

[/size]

[E│A│R│N│K]

กระทุ้นี้ เจ๋ง++

[bungky]

เยอะมากเลยจร้าน้องโน๊ต น่ารักเจงๆ

[lolipopmam]

แวะมาขุดๆๆๆๆให้ตามสัญญาเด้อ

[Note Crazy ²]

ขอบคุณ คุณ Earnkzii

http://notebboyzars2.hi5.com

ฝาก hi5 ด้วย น๊า

[/size]

[❀ PAPASSORN]

ปัยก๊อบของคัยมา ก้เครดิตด้วยนะค่ะ
^^

[Note Crazy ²]

ขอบคุณ พี่ บุ้ง กี๋

http://notebboyzars2.hi5.com

ฝาก hi5 ด้วย น๊า

[/size]

[xdonus]

เนื้อหาอัดแน่นมากๆ   

[☜ღA®tⓘfⓘ©ε Gⓘ®lღ☞彡]

 

[:: ConVerS ::]

ขอบคุณมากเรยค๊า

[aUm○kEs]

ขอบ บ บ  บ บ บคุง



มากกกก  กกก



งับ บ บ บ บ



ใช้ประโยดได้เยอะ

[Note Crazy ²]

ขอบคุณ 


 คุณ


xdonus   
 
ღA®tⓘfⓘ©ε Gⓘ®lღ☞彡 

:: ConVerS :: 

aUm○kEs 

http://notebboyzars2.hi5.com

ฝาก hi5 ด้วย น๊า

[/size]

[PD EING]

WOWWW

thx ja

[Note Crazy ²]

ขอบคุณ คุณ jokeeing   

 

http://notebboyzars2.hi5.com

ฝาก hi5 ด้วย น๊า

[/size]

[Note Crazy ²]

Code จัดกลางรูป display ใน content ส่วนตัว
ถ้าจะใช้โค้ดนี้ต้องลบโค้ดที่ทำสลับด้าน content นี้ออกก่อนนะคับ
และปรับระยะเอาเอง ถ้ามันไม่ตรง

#about-left {position: relative;left: 38%;}

#about-center {position: relative;left: 36%;}

#about-right {position: relative;right:65%;}

-------------------------------------------------

Code ตกแต่งปุ่ม comment
ถ้าจะใส่รูป ก้อให้ใช้ background-image:url(-----);

input {color: สีตัวอักษร; background-color: สีปุ่ม;}


---------------------------------------------------------

Code  ทำ Frame อัลบั้มรูป
สามารถใส่รูป Frame ตามใจคุลเลยนะคับ
ปรับขนาด และระยะ ด้วยนะคับ

ตัวเฟรม
.album  {
background: url(รูปที่ทำเป็นอัลบั้ม) top left no-repeat;height: ความสูง;width: ความกว้าง;}

ตัวรูปภาพ ปรับขนาด ระยะห่างจากขอบ
และใส่คุณสมบัติอื่นๆ ได้
.album img {top: --px;left: --px;}

---------------------------------------------------------

Code ใส่รูปหน้า list ใต้รูปดิสเพล์ Profile

#user-links img {display: none}
#user-links a {list-style:url(รูปหน้าlist) inside;display:list-item}

---------------------------------------------------------

Code ใส่รูป Online now

#online-now-icon {background: url(URL รูปภาพ) no-repeat;width:ความกว้างpx; height:ความสูงpx; filter:none}

[Note Crazy ²]

rep1. CSS Basic พื้นฐานโค๊ดค่าต่างๆ ที่จำเป็นในการแต่ง hi5
rep2. Five Code โค๊ดไฮห้า

โค๊ดเก่าหายหมด วงวินโดใหม่ก็หายหมด hi5ดันเผลอลบโค๊ดทิ้งไปอีก (นึกว่าที่เซพไว้ยังอยู่) 

เริ่มจาก 0 ก็ต้องค่อยไล่ใส่ ไล่หา ไล่ลองกันไปเรื่อย ๆ

หากันใหม่ หากันสด ๆ ใครต้องการโค๊ดไหน ตรงไหน แบบไหน กว้าง ยาว สูง สีอะไร บอกได้   (ถ้าอยู่หน้าจอนะ!)

* รูปว่าง ๆ จะลงให้ที่หลังน่ะ.

** ใครเซพ Code กระทู้ FIVECODE ไว้ PM มาหาที่นะครับ thx จ้า.

ผมไม่มีความรู้และไม่เคยเรียนด้านนี้ ผมจะใช้ศัพท์ที่ผมคิดว่าเข้าใจง่าย (ผิดตรงไหนต้องช่วยกันเตือนด้วย!)



——★    Ex1. CSS Basic , พื้นฐานที่ควรรู้    ★——



ตัวกำหนดค่า
px(พิกเซล), pt(พอนต์), in(นิ้ว), cm(เซนติเมตร), %(ร้อยละ), xx-small(เล็กมากที่สุด), x-small(เล็กมาก), small(เล็ก), medium(กลาง), large(ใหญ่), x-large(ใหญ่มาก), และxx-large(ใหญ่ที่สุด)



border : width | style | color]
border-color  กำหนดสีของกรอบ
     ค่า - [color] | transparent | inherit
     เพิ่มเติม - border-top-color,
                 border-right-color,
                 border-bottom-color,
                 border-left-color
border-style  กำหนดลักษณะเส้นกรอบ
     ค่า - none | hidden | dotted |dashed | solid | double | groove | ridge | inset | outset
     เพิ่มเติม - border-top-style,
                 border-right-style,
                 border-bottom-style,
                 border-left-style
border-width  กำหนดความหนา , ลักษณะเส้นและสีของกรอบ
     ค่า - thin | medium | thick | absolute value
     เพิ่มเติม - border-top-width,
                 border-right-width,
                 border-bottom-width,
                 border-left-width
border-bottom  กำหนดความหนา , ลักษณะเส้นและสีของกรอบด้านล่าง
     ค่า - thin | medium | thick | [length] | hidden | dotted | dashed | solid | double | groove | ridge |  inset | outset | [color] | transparent
border-left  กำหนดความหนา , ลักษณะเส้นและสีของกรอบด้านซ้าย
     ค่า - thin | medium | thick | [length] | hidden | dotted | dashed | solid | double | groove | ridge |  inset | outset | [color] | transparent
border-top  กำหนดความหนา , ลักษณะเส้นและสีของกรอบด้านบน
     ค่า - thin | medium | thick | [length] | hidden | dotted | dashed | solid | double | groove | ridge |  inset | outset | [color] | transparent
border-right  กำหนดความหนา , ลักษณะเส้นและสีของกรอบด้านขวา
     ค่า - thin | medium | thick | [length] | hidden | dotted | dashed | solid | double | groove | ridge |  inset | outset | [color] | transparent



Margin กำหนดระยะห่างของพื้นที่  (กำหนดค่าแน่ะนำให้ใช้ px , em , %)
margin-bottom  กำหนดระยะห่างของพื้นที่ ด้านล่างจนถึงเส้นกรอบ
margin-left  กำหนดระยะห่างของพื้นที่ ด้านซ้ายจนถึงเส้นกรอบ
margin-top  กำหนดระยะห่างของพื้นที่ ด้านบนจนถึงเส้นกรอบ
margin-right  กำหนดระยะห่างของพื้นที่ ด้านขวาจนถึงเส้นกรอบ



Padding เพื่อกำหนดระยะห่างของเส้นกรอบ  (กำหนดค่าแน่ะนำให้ใช้ pt , px , em , %)
padding-top  เพื่อกำหนดระยะห่างของเส้นกรอบด้านบนกับข้อความหรือรูป
padding-right  เพื่อกำหนดระยะห่างของเส้นกรอบด้านขวากับข้อความหรือรูป
padding-bottom  เพื่อกำหนดระยะห่างของเส้นกรอบด้านล่างกับข้อความหรือรูป
padding-left  เพื่อกำหนดระยะห่างของเส้นกรอบด้านซ้ายกับข้อความหรือรูป



width: [absolute] | [percentage] | auto | inherit  (กำหนดค่าแน่ะนำให้ใช้ px , %)
width กำหนดความกว้างของกรอบข้อความหรือภาพ โดยอาจกำหนดเป็นค่าที่แน่นอนลงไป เป็นเปอร์เซ็นต์ หรือ auto เพื่อให้บราวเซอร์จัดการปรับให้เหมาะสมเอง



height: [absolute] | [percentage] | auto | inherit  (กำหนดค่าแน่ะนำให้ใช้ px , %)
height กำหนดความสูงของกรอบข้อความหรือภาพ โดยอาจกำหนดเป็นค่าที่แน่นอนลงไป เป็นเปอร์เซ็นต์ หรือ auto เพื่อให้บราวเซอร์จัดการปรับให้เหมาะสมเอง



float: left | right | none | inherit
float กำหนดตำแหน่งที่วางของรูปหรือข้อความ จะให้ชิดขอบด้านซ้ายหรือขวาหรือปล่อยให้บราวเซอร์จัดการเอง พร้อมทั้งให้แสดงข้อมูลอื่นล้อมรอบภาพ



clear: none | left | right | all | inherit
clear กำหนดตำแหน่งที่จะแสดงข้อความถัดไปเมื่อพบแท็ก<BR> หรือพบข้อความว่าจะให้อยู่ใต้รูปทางด้านใด ซึ่งมีค่าที่เป็นไปได้คือ
none ให้บรรทัดถัดไปขึ้นบรรทัดใหม่ตามปกติ
left ให้บรรทัดถัดไปขึ้นบรรทัดใหม่ใต้รูปที่อยู่ทางด้านซ้ายมือ
right ให้บรรทัดถัดไปขึ้นบรรทัดใหม่ใต้รูปที่อยู่ทางด้านขวามือ
all ให้บรรทัดถัดไปขึ้นบรรทัดใหม่ใต้รูปที่อยู่ทางด้านซ้ายหรือขวาแล้วแต่ว่าตำแหน่งทางด้านใด
อยู่ต่ำกว่า



——★    Link ในไฮห้า   ★——


logout
http://hi5.com/friend/logoff.do

แก้ไขข้อมูลพื้นฐาน
http://hi5.com/friend/profile/displayEditBasic.do

สมุดบันทึก
http://hi5.com/friend/profile/displayAddJournal.do

homepage
http://hi5.com/friend/displayHomePage.do

Friends
http://hi5.com/friend/viewFriends.do

Add Friend
http://hi5.com/friend/profile/enforceFriendRequestSecurity.do?userid=เลขไอดี

lifestyle
http://hi5.com/friend/account/displayEditProfileLifestyle.do

Interests
http://www.hi5.com/friend/account/displayEditProfileInterests.do

User Detail
http://www.hi5.com/friend/account/displayEditProfileAppearance.do

Group
http://www.hi5.com/friend/group/displayMyGroups.do?userId=เลขไอดี

View Five
http://www.hi5.com/friend/fives/displayManageUserFives.do

Give Five
http://hi5.com/friend/fives/displayAddUserFive.do?userid=เลขไอดี

Comment
http://www.hi5.com/friend/book/displayBook.do?userid=เลขไอดี

Album
http://www.hi5.com/friend/photos/displayUserAlbums.do?ownerId=เลขไอดี

Edit Profile
http://hi5.com/friend/account/displayEditProfileCustomization.do









เครดิต จาก


http://vivafriday.hi5.com/

[Note Crazy ²]

Code ย่อ-ขยาย content

content หลัก จะมีอยู่ 2 คอลัมน์ นะคับ คือ
#content-left  คอลัมน์ฝั่งซ้ายทั้งหมด ที่เป็นบล้อกที่ใช้เขียนข้อมูลต่างๆ
#content-right  คอลัมน์ทางฝั่งขวา ตั้งแต่ Topfriends ไปจนถึง comment

ซึ่งความกว้างของทั้งสองบล้อก จะสอดคล้องกัน และรวมกันไม่เกิน 956px
หากมีการขยายด้านใดด้านหนึ่งแล้ว ก็ควรจะปรับอีกด้าน เพื่อให้ได้ความมกว้างที่เหมาะสมกัน

การย่อ-ขยาย content
การขยายหรือลดขนาด content นั้น จะต้องปรับตัวเลข 2 ส่วน ให้สอดคล้องกัน คือ
1. ขนาดความกว้างของของคอลัมน์
2. ความกว้างของส่วนเนื้อหาในในคอลัมน์ หรือ subsection

หาก content กว้าง 200px
เราก็ควรปรับ subsection เป็น 185px
ไม่ควรปรับเกินบล้อก content เพราะจะทำให้เนื้อหาล้น ออกจากคอลัมน์

==============================================

Code ย่อ-ขยายคอลัมน์ฝั่งซ้าย (Content-left)


<style type="text/css">

#content-left { width: ความกว้างของคอลัมน์px }

#lifestyle .subsection { width: ความกว้างเนื้อหาpx }
#interests .subsection { width: ความกว้างเนื้อหาpx }

</style>


==============================================

Code ย่อ-ขยายคอลัมน์ฝั่งขวา (Content-right)

<style type="text/css">

#content-right { width: ความกว้างของคอลัมน์px }
#friends { width: ---px } #friends .subsection { width: ---px }

#photoAlbum .subsection { width: ---px }

#user-fives .subsection { width: ---px }

#comments { width: ---px }
.subsection .comment { width: ---px }
.commentEditor textarea {width:ความกว้างของช่องพิมพ์คอมเม้นpx }
.comment-text
{ width: ความกว้างข้อความคอมเม้นpx !important; }

</style>

[Note Crazy ²]

สำหรับ คอมเม้นที่เราไม่ปราถนาจะให้แสดงในหน้าโปรไฟล์
เราสามารถ กำหนดไม่ให้แสดงได้ โดยการใส่ Display:none
ลงไปสำหรับ tag นั้น  อีกทั้งยังสามารถ ใส่รูป หรือกำหนดคุณสมบัติอื่นๆ ลงไปแทนคุณสมบัติเดิมได้อีกด้วย

สำหรับ tag ที่สำคัญ ที่เพื่อนๆ นิยมเอามา comment ได้แก่


embed   สไลด์ เพลง แฟลช ฯ
object   มัลติมีเดียต่างๆ รวมถึงเพลง
marquee   ตัวเลื่อน
font   ตัวกำหนดลักษณะอักษร
span  แท้กทั่วไป
div   แท้กทั่วไป
img   รูปภาพ
br   ตัวขึ้นบรรทัดใหม่
strong  ตัวอักษรหนา
b   ตัวอักษรหนา
a   ลิ้ง


การกำหนดค่า


.comment-text tagที่ต้องการ { display:none }



 

หรือถ้าหากเป็นการใส่รูปแทนที่เข้าไป สามารถกำหนดเป็น


.comment-text tagที่ต้องการ {
background:url(รูปที่จะนำมาเซ็นเซอร์) center center no-repeat; width:---px; height:---px; visibility:hidden }

โดยจะต้องกำหนดขนาดของภาพด้วยนะคับ
^^