บ้าน
เกี่ยวกับ code
สำ หรับโค้ดชุดนี้ จะใช้ในการจัดรูปแบบ TopFriends แบบแนวๆ(บ้าน) อีกแบบ โดยใช้วิธีบีบบล๊อกรูปดิสเพลย์ให้แคบลง แล้วนำภาพไปวางด้านข้าง ทำให้ท้อปเฟรนด์ดูแปลกตาไปจากเดิม ในส่วนของบล๊อก header คุณสามารถใส่รูปภาพลงไปได้เช่นกัน อาจจะนำรูปมาใส่แทนคำว่า Friends เป็นต้น
โค้ดทั้งหมด เป็นการดัดแปลงจากโค้ดที่ผมใช้ในไฮไฟว์ผมเอง ซึ่งได้ปรับปรุงให้สามารถแสดงผลรองรับได้ทุกบราวเซอร์ และแสดงผลเหมือนกัน (เฮ้อ ทำไปได้)
คุณสามารถนำโค้ดทั้งหมดไปใช้ได้ทันที และสามารถตกแต่งส่วนอื่นๆ เพิ่มเติ่มได้จากโค้ดที่เกี่ยวข้องภายในเว็บ
- Code:
<!--["return TURE"]>
<style>
#friends h1 {
text-indent:-999px;
overflow:hidden;
border:none;
height:___px;
background:url(___) no-repeat top right;}
<!-- ซ่อนหัวข้อ Friends, เพิ่มความสูง Head -->
<!-- แล้วใส่รูปภาพHead ขนาดกว้างไม่เกิน 440px -->
#friends h2 {
background-color:transparent;
text-align:right;
padding-right:20px}
<!-- ทำใสให้แถบ view all friends -->
<!-- ไม่ต้องการส่วนนี้ใช้ display:none -->
#friends h2 a {color:red}
<!-- เปลี่ยนสีลิ้ง view all friends -->
.friend-picture{
border:none;
width:62px !important;
height:70px !important;
_margin-bottom:6px !important;
#margin-bottom:6px !important;
}
.friend-picture div {
width:60px !important;
height:60px !important;
margin-left:0px !important;
}
.friend-picture img {
width:60px !important;
height:60px !important;
}
.friend-picture a:hover img {
margin-left:2px}
#friends{
background-image:url(URL รูปพื้นหลัง);
background-color:โค้ดสี;
background-position: top left;
background-repeat: repeat;
height:540px;
_heigth:440px;#heigth:440px;
overflow:hidden !important}
<!-- ใส่รูป Background -->
<!-- ให้ใส่ url ลิ้งรูปภาพ -->
#friends .content {
background-color:transparent !important;
background-image:url(URL รูปด้านข้าง) !important;
background-repeat:no-repeat !important;
background-position:200px 15px !important;
_background-position:200px 20px !important;
#background-position:200px 20px !important;
overflow:hidden !important;
height:450px;}
รูปภาพด้านข้าง Top friends มีขนาดประมาณ 250 x 430
<!-- ควรกำหนดค่าเฉพาะ Background -->
#friends div.subsection{
width:180px;height:400px !important;
overflow-y:hidden !important;
padding-top:25px !important;
_padding-top:10px !important;
#padding-top:10px !important;}
#friends h2,
#friends div.listitem-separator,
#friends .subsection div {display:none}
div.friend,div.friend div
{display:block !important}
div.friend-name a{display:none !important}
</style>
<! [endif]-->
