vitaminzee โพสต์ 2013-2-17 14:39:25

ใส่ปุ่ม Social Media เฟชบุ๊ค กูเกิ้ลพลัส ยูทูบ ทวิตเตอร์ ให้กับเว็บ

แก้ไขครั้งสุดท้ายโดย vitaminzee เมื่อ 2013-2-17 15:06



ปุ่มจะอยู่ด้านขวาของเว็บทุกหน้า จะเป็นปุ่มสีจางๆ

แต่เมื่อนำเม้าไปแตะสีจะเข้มขึ้น

http://image.free.in.th/z/ir/4564565.gif


วิธีทำ

เปิดไฟ Css ของสกินที่ท่านใช้

ยกตัวอย่างเช่น template/สกินที่ใช้/common.css
แต่บางสกินอาจใช้ไฟล์extend_common.css ก็ได้

เมื่อเปิดไฟล์ขึ้นมาแล้วให้เลื่อนลงไปด้านล่างสุดเลยแล้วคัดลอกโค้ดนี้ไปวาง/**/

            #takip {
                position: fixed;
                right: 0;
                top: 220px;
                z-index: 999;
            }
            .takip {
            background-image: url(../../../images/social/social17.png);
            background-repeat: no-repeat;
            height: 42px;
            width: 42px;
            top: 100px;
            margin-left: auto;
            opacity:0.3;
            filter:alpha(opacity=50); /* For IE8 and earlier */
            }
            .takip:hover {
            background-image: url(../../../images/social/social17.png);
            cursor: pointer;
            opacity:1;
            filter:alpha(opacity=100); /* For IE8 and earlier */
            }
         
            .facebook {
                background-position: 0px 0px;
            }
            .twitter {
                background-position: 0px -42px;
            }
            .Google {
                background-position: 0px -84px;
            }
            .Youtube {
                background-position: 0px -126px;
            }
            .rss {
                background-position: 0px -168px;
            }
         
/**/หลังจากวาง CSS ด้านบนเสร็จแล้วให้เปิดไฟ template/สกินที่ใช้/footer.htm
แล้วนำโค้ดนี้ไปวางที่ </body>โดยวางให้อยู่ด้านบนของ</body>

รูปตัวอย่าง


<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
            <title>Social Media Buttons</title>
            <script src="dkthemes.forumotion.in/38797.js" type="text/javascript"></script>
            <script type="text/javascript">
            $(document).ready(function(){
            $(".takip").mouseover(function(){
                  $(this).filter(':not(:animated)').animate({width:135},{duration:500});
            });
            $(".takip").mouseout(function(){
                $(this).animate({width:42});
            });
            });
            </script>
         
         
            <div id="takip">
                <div class="facebook takip" onclick="location.href='http://www.facebook.com/'">
                </div>
                <div class="twitter takip" onclick="location.href='http://www.twitter.com/'">
                </div>
                <div class="Google takip" onclick="location.href='https://plus.google.com/'">
                </div>
                <div class="Youtube takip" onclick="location.href='http://www.youtube.com/'">
                </div>
                <div class="rss takip" onclick="location.href='#'">
                </div>แล้วนำรูปในนี้ไปอัพไว้ที่ ไดเร็กเตอรีแรกของเว็บคุณหรือที่ public_html นั่นเอง

jameiiz โพสต์ 2013-2-17 14:55:39

ขอบคุณครับ ต้องลองแล้ว sm901dz

DoopDip โพสต์ 2013-2-17 15:18:28

ว้าวววขอบคุณมากครับ sm917dz

ninwatza โพสต์ 2013-2-17 15:45:30

เยี่ยมเลยครับ

แต่ผมลองแล้ว มันไม่ขึ้นครับ

อัพเดทแคชแล้ว งงจัง

skaless โพสต์ 2013-2-18 10:44:26

^^ ยอดไปเลยครับ ขอนำไปศึกษาต่อนะครับ

jame2600 โพสต์ 2013-2-18 11:56:44

ไม่ขึ้น อ่า แงๆsm922dz

kanzayo โพสต์ 2013-3-1 17:52:56

ขอบคุณค่ะ จะลองดูนะค่ะ และสวัสดีพี่ด้วยค่ะไม่ค่อยได้เข้าดิสคัทไทยช่วงหลัง ปิดเทอมแล้วคงมีเวลามากขึ้นค่ะ

sahawat13 โพสต์ 2013-3-19 10:12:46

ผมลองแล้ว มันไม่ขึ้นครับ

อัพเดทแคชแล้วsm907dz

ย่ากได้ครับsm942dz
หน้า: [1]
ดูในรูปแบบกติ: ใส่ปุ่ม Social Media เฟชบุ๊ค กูเกิ้ลพลัส ยูทูบ ทวิตเตอร์ ให้กับเว็บ