the webby of computing & IT learning ,troubleshooting guide
 
 
     
 

ฺTop friends Ed.1 ตกแต่งท้อปเฟรนด์แบบที่ 1

( 7731 views )
 

รูปตัวอย่าง


ตกแต่งท้อปเฟรนด์,ตกแต่งtop friends, ขยายรูปท้อปเฟรนด์


Description

โค้ดชุดนี้ ใช้ในการจัดรูปแบบ TopFriends โดยการขยายรูปดิสเพลย์ให้ใหญ่ขึ้น พร้อมทั้งกำหนดเส้นกรอบให้รูปด้วย ในส่วนของบล๊อก header คุณสามารถใส่รูปภาพลงไปได้ และองค์ประกอบอื่นๆ เช่น สีของลิ้ง ขนาดตัวอักษร ก็สามารถตกแต่งได้เช่นกัน

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

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

Code

<style>

#friends h1 {
text-indent:-999px;
overflow:hidden;
border:none;
height:___px;
background:url(___) no-repeat top center;}
<!-- ซ่อนหัวข้อ Friends, เพิ่มความสูง Head -->
<!-- แล้วใส่รูปภาพ ขนาดกว้างไม่เกิน 440px -->


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

.friend-picture {
height:100px !important;
width:86px!important;
margin-left: 2px;
border:solid 1px black;}
<!-- เปลี่ยนสีของเส้นกรอบรูป -->


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

div.friend-name a {color:gray}
div.friend-name a:hover {color:black}
<!-- สีตัวอักษรลิ้งบน Top Friends แต่ละรูป -->
<!-- a:hover คือสีตัวอักษรขณะชี้เม้าส์ที่ลิ้ง -->


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

</style>

Last update: 18 August 2009

 
 
1 Comment(s)
 
1.
fine say:
November 18, 2009 - 18:36:39
http://mufaizaa.hi5.com

thank you very much.

 
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