20:50 - 17/06/2013

tạo chat box ẩn hiện bên trái khi click cho blogger/blogspot

    [tintuc]

    Thực hiện: (đưa vào tiện ích)

    1. Vào Thiết kế > Phần tử trang
    2. Tạo một widget HTML/JavaScript và dán code bên dưới vào :


    Đây là 1 dạng chat box được mình tut thụt ra thụt vào khi kích chuột nhé, mượt mà phong cách
    <style type="text/css">
    #gb{
    position:fixed;
    bottom:5px;
    z-index:+1000;
    }
    * html #gb{position:relative;}
    .gbtab{
    height:100px;
    width:74px;
    float:left;
    cursor:pointer;
    background:url('https://lh5.googleusercontent.com/-7ZM2_qIunio/UXKGeeIxWqI/AAAAAAAADik/q8z3_CBt__o/s95/chat%2520yahoo.JPG') no-repeat;
    }
    .gbcontent{
    float:left;
    background:none;
    padding:3px;
    }
    </style>
    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 75-w) : moveGB(71-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.right = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="gb">
    <div class="gbtab" onclick="showHideGB()">
    </div>
    <div class="gbcontent">



    <!-- BEGIN CBOX - www.cbox.ws - v001 -->
    <div id="cboxdiv" style="text-align: center; line-height: 0">
    <div><iframe frameborder="0" width="300" height="380" src="http://www4.cbox.ws/box/?boxid=4119668&amp;boxtag=1tlw2w&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4119668" style="border:#ababab 1px solid;" id="cboxmain4-4119668"></iframe></div>
    <div><iframe frameborder="0" width="300" height="70" src="http://www4.cbox.ws/box/?boxid=4119668&amp;boxtag=1tlw2w&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4119668" style="border:#ababab 1px solid;border-top:0px" id="cboxform4-4119668"></iframe></div>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (75-gb.offsetWidth).toString() + "px";
    </script>

    [/tintuc]

Bình luận & Góp ý

0 nhận xét:

Đăng nhận xét