the webby of computing & IT learning ,troubleshooting guide
 
 
     
 

ฺHi5 Page Layout Ed.2

( 7339 views )
 
รูปตัวอย่าง

hi5 layout ed.2 by tapopo.net


Description

โค้ดทั้งหมด ไม่ได้เป็นโค้ด skin แต่เป็นการจัดรูปแบบ layout อย่างง่ายในส่วนที่สำคัญ ส่วนรายละเอียดอื่นๆ คุณสามารถนำไปใช้ดัดแปลง กำหนดค่าต่างๆ เพื่อให้เป็นโปรไฟล์ในสไตล์ของคุณเอง โดยโค้ดชุดนี้ได้ลบส่วนที่ไม่จำเป็นออกบางส่วนออก ส่วนที่เห็นการเปลี่ยนแปลงได้ชัดเจน คือส่วนของ content ทั้งสองฝั่งนั้นสลับด้านกัน ซึ่งทางฝั่งเนื้อหาจะมีขนาดกว้าง 635px เหมาะสำหรับผู้ที่ต้องการใส่เนื้อหาให้โปรไฟล์จำนวนมากๆ และส่วนทางด้านคอมเม้นท์จะแคบลงเหลือเพียง 295px

คุณสามารถตกแต่งด้วยการใส่รูปภาพเข้าไปได้ในหลายๆส่วน ซึ่งผมได้เขียนคอมเม้นท์ไว้ในจุดที่สามารถใส่รูปภาพได้

คุณสามารถนำโค้ดทั้งหมดไปใช้ได้ทันที และสามารถตกแต่งส่วนอื่นๆ เพิ่มเติ่มได้จากโค้ดที่มีในเว็บ

Support: IE6-7-8, FireFox2-3, Chrome, Safari, Opera

Code
<style>

div#topic-noedit,div.info-box 
{font-size:__px;font-family:__; color:__}
<!-- ขนาด รูปแบบตัวอักษรลิ้ง และสีข้อความ status -->

h4.box_profile_info_small_heading 
{color:__; font-family:__; font-size:__}
<!-- ขนาด รูปแบบตัวอักษรลิ้ง และสีหัวข้อ info -->


a#hi5-logo-type div.logo 
{background-image:url(__) !important;
width:__px !important; height:__px !important}
<!-- เปลี่ยนรูป Logo -->

#hi5-common-header {
background-image:none !important}

#profile-name {background:none; height:50px;
color:__; font-family:__; font-size:__}
<!-- ขนาด รูปแบบตัวอักษรลิ้ง และสีชื่อโปรไฟล์ -->

#profile-nav {background:transparent}

#profile-nav a {color:__}
#user-links a {color:__}
td a,td a:link,td a:visited 
{color:__; font-family:__; font-size:__}
<!-- ขนาด รูปแบบตัวอักษรลิ้ง และสีของลิ้ง -->

.bg_content {direction:rtl}
#user-details {direction:ltr}
#content-left {direction:ltr;overflow:hidden}
#content-right {direction:ltr}

#content-left {width:650px}
#content-right {width:295px}

#interests .subsection ,
#lifestyle .subsection {width:640px}

#interests div.box_profile_info_small_content,
#lifestyle div.box_profile_info_small_content 
{margin:0px; width:635px; 
font-size:__px; font-family:__;
color:__ }
<!-- ขนาด รูปแบบตัวอักษรลิ้ง และสีของเนื้อหา -->

#friends h1,#lifestyle h1
{text-indent:-999px;overflow:hidden}

#friends h1 {height:30px;
background-image:url(__);
background-repeat:no-repeat;
background-position:__ __}
<!-- ใส่รูปแทนคำว่า เพื่อน -->

#lifestyle h1 {height:30px;
background-image:url(__);
background-repeat:no-repeat;
background-position:__ __}
<!-- ใส่รูปแทนคำว่า เกี่ยวกับฉัน -->

#friends .subsection div {display:none}
#friends .subsection div.friend,
#friends .subsection div.friend div.friend-picture,
#friends .subsection div.friend div.friend-picture div 
{display:block !important}

#friends {width:285px}

.friend {width:50px}

.friend-picture div 
{margin-left:0px !important;}

.friend-picture {
width:51px !important;
height:51px !important;
border:none; margin-left:0px}

.friend-picture a img { 
height:50px;width:50px;
margin-left:-53px !important;
padding:0px}

#comments {
width:250px;padding:8px;
border:1px solid #D6D6D6;
color:#616161;font-size:10px}

#comments .content {width:250px}

#comments .subsection {width:240px;
padding-left:0px !important}

div.commentEditorNew form div 
{text-align:right !important}

div.commentEditorNew form textarea.textbox 
{width:248px;border:1px solid #D6D6D6}

.comment {width:240px}

.comment-text 
{width:185px !important;
margin-top:0px !important;
font-size:10px}

.comment-picture
{height:40px !important;
width:40px;border:none}

.comment-picture a img 
{width:40px; height:40px;}

.comment div {display:none}
.comment-picture,.comment-text 
{display:block !important}

#comments .listitem-separator 
{background:none !important;
border-top:solid 1px #eeeeee;
margin:2px auto !important;
width:250px}

.comment-text font {color:black!important}

#comments h3 {border:none}
#comments h3 a {font-size:11px;color:#616161}

#comments h1,#comments h2,
h2.editorTop {display:none}
#commentImage {display:none}
.comment-text img,.comment-text object,
.comment-text br,.comment-text div,
.comment-text a img,.comment-text embed,
.comment-text b,.comment-text u,
.comment-text s,.comment-text i,
.comment-text a {display:none}

#gifts,#recent-updates,#photoAlbums,
iframe,#friends .listitem-separator,
#friends .footer,#common-friends,
div#game_bar,#user-fives,
div#game_bar_padder,.emptyProfileInfo,
#content-right div.section-separator,
div a.sponsoredby,#gamesModule,#groups,
#journalDetail,#apps,#widgets,
div#picture-links,#interests h1
{display:none!important}

div#hi5-common-header-banner,
div#hi5-common-header-banner ins,
div.hi5-common-header-banner-ad
{display:none !important;border:none}

div#content-left iframe
{display:block !important}

#content-left h4 {display:none}
#content-right h2 {display:none}

#user-details,#info,#contact,
.section h1 {border:none}

#info-topmid {
filter:none !important;
background:none !important}
#info-topleft,#info-topright,
#info-botleft,#info-botmid,
#info-botright {display:none}
#xabout-right div {display:none}
#xabout-right iframe,
#xabout-right object,
#xabout-right img,
div a.sponsoredby 
{display:none !important}

.content p {padding-left:5px !important}
div#info {min-height:100px !important}

#about-right {
background:url(__) center 25px no-repeat}
<!-- รูปภาพบนแถบสถิติ -->

#xabout-right {
height:120px;
overflow:hidden;
margin-top:250px}

.section h2
{background-color:transparent}

body {background:none}

#p_container {margin-top:180px !important}
<!-- ระยะห่างของแถบชื่อโปรไฟล์ กับเฮด -->

html {
background-image:url(___)
background-repeat:no-repeat;
background-position:top center;
background-color:#fcfcfc;
}
<!-- รูปภาพที่จะใส่เป็นเฮด (Header pic.) -->

</style>

Last update: 19 August 2009

 
 
23 Comment(s)
 
23.
romeo say:
December 15, 2009 - 04:44:45

พี่แม่งโคดเจ๊งเรย !!

22.
MINIMART say:
October 25, 2009 - 02:30:37
http://Miiniz-mart.hi5.com

โค้ด ที่ หั้ย มา ทำมัย ใส่ เฮด ไม่ได้ อ่า บอก หน่อย ๆๆ

21.
Nobell say:
October 24, 2009 - 13:47:26

พี่ค่ะ ขอเมล์มั้งจิ!~

20.
Niimb say:
October 22, 2009 - 10:27:18

; ขอบคุนมาก ๆ เลยค่ะ ,เปนประโยชน์จริง ๆ*

19.
taku say:
October 18, 2009 - 21:18:33
http://tapopo.net

@jj ==> โค้ดชุดนี้ ไม่ได้รูปรูปแถบสถิติไว้ให้ด้วยนะครับ ^^

18.
noni say:
October 16, 2009 - 10:22:13

ขอบคุณมากนะ :)) แก้ไขได้แล้ว สวยมากๆๆ

17.
noni say:
October 16, 2009 - 10:07:27

ขอบคุณมากมาย :))เอทำไมดูที่ ie7 มันเพี้ยๆๆไปน่ะ

16.
jj say:
October 13, 2009 - 13:08:16
http://jeabzaa.hi5.com

ใส่โค้ด แล้ว แถบสถิติไม่ขึ้นอ่า ทำไง ดี

15.
Bank Circle say:
October 9, 2009 - 18:06:44

ชื่อคุ้นๆนะ เอะ พี่สาวเรานั่นเอง V V V V V V V

14.
PLAIFON say:
October 8, 2009 - 13:30:49

ขอบคุณมากๆเลยนะคะ สวยมากมายเลย ^^

13.
MEAW say:
October 2, 2009 - 19:26:44

THX SO

12.
golf say:
October 1, 2009 - 14:16:55

เฮด ข้าง บน ทำไม ใส่ แล้วภาพไม่ขึ้นละคับ

11.
Dream say:
October 1, 2009 - 01:28:37

ขอบคุณมากๆครับ แต่พอใส่รูปทำไมไม่ขี้นอ่ะครับ แร้วก็แถบสถิติ

10.
fahfern say:
September 20, 2009 - 17:13:24
http://fiifern.hi5.com

ขอบคุนมากเลยนะคร่า สวยมากเลลย แต่ทามแถบสถิติมันไม่ขึ้นอ่าคร่า

9.
taku say:
September 17, 2009 - 20:28:43
http://tapopo.net

@kiie ==> โค้ดชุดนี้ไม่มีแบลคกราวน์ส่วนหัว และส่วนbody นะครับ แต่จะเป็นรูปพื้นของส่วนหน้าเพจ ที่แสดงอยู่ตำแหน่งส่วนหัวรูปเดียว

8.
kiie say:
September 17, 2009 - 00:29:50

ใส่รูปเเล้วไม่ขึ้นเลยค่ะ ต้องทำไง ส่วนหัว เเละเบคกราว

7.
wersar say:
September 3, 2009 - 00:27:41
http://wersar.hi5.com

555 ยอดไปเลย ขอบคุณมากคับ ใช้บริการมาตั้งนาน ไม่ค่อยได้ขอบคุณ ไงก็ขออภัยด้วยคับ คที่ที่ไม่เห็นเพราะไม่ได้ใส่รูป ของผมก็ยังไม่ได้ใส่ แต่ยังไม่ได้ทำภาพไว้สักภาพ เลยไม่เห็นเมือนกัน ถ้าทำมาไว้ให้ก่อนน่าจะดี ขอบคุณมากคับ หลับฝันดี

6.
MiE say:
September 1, 2009 - 18:38:56

ผมไม่เหงแถบสถิติอ่ะครับทำไงอ่ะ

5.
BREEZS say:
August 28, 2009 - 22:18:17
http://breezs.hi5.com

เลอค่ามากๆ ^ ^ Thank มากๆ

4.
PALM say:
August 23, 2009 - 18:20:33

อ่า ขอบคุณมากๆค่ะ :)) ชอบๆแบบนี้มหาศาล 5555.

 
Comment
 

 

 

 

   
   
 
Main
 
 
 
 
 
Meta
 
 
 
 
 
 

Last crawler

5 bot recent visit

GoogleBot9 February 2010, 8:43 am
GoogleBot9 February 2010, 5:29 am
GoogleBot9 February 2010, 4:19 am
GoogleBot8 February 2010, 11:53 pm
GoogleBot8 February 2010, 9:52 pm