ตั้งค่าการอ่าน

ค่าเริ่มต้น

  • เลื่อนอัตโนมัติ
    Everythingz 2 U

    ลำดับตอนที่ #7 : TiPx* SKIN Hi5 โดยใช้ CODE

    • อัปเดตล่าสุด 30 เม.ย. 51


    CREDIT - http://www.hi5thai.com 

    เริ่มจาก ส่วนแรกก่อนเลย
    ก่อนอื่นเราจะต้อง  ใส่ข้อมูลเกี่ยวกะสีก่อน
    เราจะใช้โคดนี้ครับ

    <style type="text/css">
    .section,.subsection {color:โคทสี;}  ตรงนี้เป็นสีตัวหนังสือธรรมดาคับ
    body {color:โคทสี!important;}  ตรงนี้ให้ใส่เหมือนกันบนนะคับ
    a:link {color: โคทสี; text-decoration: none; }  ตรงนี้เป็นสีของลิ้งคับ
    a:active {color: โคทสี; text-decoration: none; }  ตรงนี้เป็นสีลิ้งย่อย เฉพาะที่เราเห็น เช่น Edit ทั้งหลายแหล่
    a:visited {color: โคทสี; text-decoration: none; }  ตรงนี้เป็นลิ้งย่อย ที่คนอื่นเห็นด้วย ถ้าจะให้ดี 3อันนี้ใส่เหมือนกันจะดีคับ
    a:hover {color: โคทสี; text-decoration: none; } อันนี้เป็นสีลิ้งตอนเอาเม้าไปชี้
    </style>

    ต่อไปคือส่วนของ Headหลัก นะครับ
    สำหรับผมแล้วจะแบ่งไว้ 3 ส่วน



    คือรูปที่เราต้องใช้นะครับ
    H1 คือ รูปที่จะอยู่ตรงชื่อโพรไฟล์  ความกว้าง956*ความสูง ไม่จำกัด
    H2 คือ ส่วนที่เป้นลิ้ง  ผมจะให้ใช้ขนาด  956*30 นะครับ
    H3 คือ ส่วนที่เป้นข้อมูลของเรา ผมแนะนำให้ใช้ขนาด  956*400

    ปล. H2 - 3 ความสูงแล้วแต่เรานะครับ แต่ผมแนะนำให้ใช้ตามนี้

    ส่วนการใส่เราจะใช้โคทนี้
    <style>
    #profile-name {background-image:url(H1);width:956px;height:ความสูงpx;background-repeat:no-repeat; }
    .profile-nav .name strong {color:#สีของชื่อโพรไฟล์!important;}.profile-nav .name span {color:#สีของวิว!important;}
    #profile-nav {background:url(H2) no-repeat;height:15px;}
    .sub_nav_link {color:#สีของลิ้งส่วนH2 !important;}
    #user-details .content {background: url(H3);height:400px}
    #user-details{border:none !important;}.section .footer { display:block!important;}
    #user-details .footer {display:none;}
    </style>

    ต่อไปเป็นส่วนของ Head ย่อย



    รูปที่เราต้องใช้คือ 3+1 รูป
    m1 คือรูปที่เป็นหัวข้อ ขนาก 470*ความสูง  ตามต้องการ
    m2 คือรูปที่เป้นส่วนต่อจาก m1 ที่มีลิ้งอยู่  ขนาด 470*25
    m3 คือBG ของหัวย่อย ขนาด  470*XX จะเปนพื้นหลังที่เรียงต่อกันไปเรื่อยๆ
    m4 คือส่วนต่อท้าย m3 จะมีหรือไม่มีก็ได้ 470*XX ผมแนะนำ 30

    เราจะใช้โคทนี้ในการทำคับ
    <style>
    .section h1 { background: url(m1)!important;background-repeat:no-repeat!important; border:none;margin-top:7px!important;height:ความสูงของm1px}

    .section h2 { background: url(m2)!important;background-repeat:no-repeat!important; border:none;margin-top:0px!important;height:25px}#recent-updates .subsection,#lifestyle .subsection,#interests .subsection,#user-fives .subsection,#friends .subsection,#photoAlbums .subsection,#comments .subsection,#widgets .subsection,#groups .subsection,#videos .subsection,#journalDetail

    .subsection{ background: url(m3)!important;background-repeat:repeat!important; border:none;margin-top:0px!important;}#recent-updates .footer,#lifestyle .footer,#interests

    .footer,#user-fives .footer,#friends .footer,#photoAlbums .footer,#comments .footer,#widgets .footer,#groups .footer,#videos .footer,#journalDetail
    .footer { background: url(m4)!important;background-repeat:no-repeat!important; border:none;margin-top:0px!important;height:ความสูงของm4px}
    </style>

    ค่อไปเป็นส่วนประกอบอื่นๆนะครับ

    เริ่มจาก BG ก่อนเลยละกัน เราจะใช้โคทนี้
    .section-separator {display:none;}body {background-image: url(Url ของ BG)
    ;background-attachment:fixed;background-repeat: repeat; }

    ต่อไปก็หลอดสถิตินะครับ

    เราจะใช้รูปขนาด 140*12 จำนวน 2รูป
    รูป A คือพิ้นหลัง (ช่องสีดำ)
    รูป B คือ เมื่อสถิติเดินแล้ว (เส้นสีขาวตรงกลาง)

    แล้วใช้โคทนี้ทำครับ
    <style>
    .vanity-bar div img{display:none ;}
    .vanity-bar div {background:url(รูปA)!important ;border:solid #000000 1px}
    .vanity-bar div div {background:url(รูปB)!important ;border:none}
    </style>

    ส่วนปิด ท้าย Hi5
    จะอยู่ล่างสุกของ Hi5 ของเรานะครับ อันนี้ใส่หรือไม่ใส่ก็ได้
    ใช้โคทนี้ครับ
    <style>
    #footer {color:#000000; background: url(ปิดท้ายHi5) no-repeat center center; border: none;
    display: block; height: ความสูงpx; } #footer *,#footer a,#ad_banner {display: none;}
    </style>





    สงสัยตรงไหน ถามได้นะค๊า บบ

    ติดตามเรื่องนี้
    เก็บเข้าคอลเล็กชัน

    ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

    loading
    กำลังโหลด...

    อีบุ๊ก ดูทั้งหมด

    loading
    กำลังโหลด...

    ความคิดเห็น

    ×