Membuat ChatBox Melayang (Left)

Membuat ChatBox Melayang (Left)

Setelah ane share Cara Membuat ChatBox, sekarang ane akan share trik cara Membuat ChatBox Melayang di sisi kiri blog seperti yang ada di blog Ane. Membuat chatbox melayang juga sering disebut dengan Hidden ChatBox. Ane tegaskan lagi ChatBox adalah buku tamu yang mana anda bisa berchat ria denga pengunjung blog. Gak usah lama-lama, simak tutorial Membuat ChatBox Melayang (Left) dibawah ini.

Screenshot dari Blog ane :

Caranya :

• Copy kode dibawah ini.

<!-- right hidden chatbox by http://tutorialphotoshopcs-putradom.blogspot.com/START -->
        <style>
        #hcl {
        position:fixed;
        top:35px;
        Left:0px;
        z-index:+1000;
        }
        * html #hcl {position:relative;}
        .hcltab {
        height:180px;
        width:69px;
        float:Left;
        cursor:pointer;
        background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbhg31MM2CmHKT1RnAwFi6qMi5ppMrn9dqPTCArBJdVjXuA3NfF6DmZBRiHDpNXw-7l73xhoRnj9fJgVUp6-SrcDqSOOP9OT_1rY59tnltfVnZfEtxOgY6XGiAtgkSyii8nb31KvaoWO0/s1600/Faceblog+ChatBox3.jpg') no-repeat;
        }
        .hclcontent {
        float:Left;
        border:2px solid #790909;
        background:#f3f6f7;
        padding:10px;
        }
        .hc-credit {font-size:9px}
        .hc-credit a {text-decoration:none}
        </style>
        <script type="text/javascript">
        function showHidehcl(){
        var hcl = document.getElementById("hcl");
        var w = hcl.offsetWidth;
        hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
        hcl.opened = !hcl.opened;
        }
        function movehcl(x0, xf){
        var hcl = document.getElementById("hcl");
        var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
        var dir = xf>x0 ? 1 : -1;
        var x = x0 + dx * dir;
        hcl.style.left = x.toString() + "px";
        if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
        }
        </script>
        <div id="hcl">
        <div class="hclcontent">

         <!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="117" src="http://www7.cbox.ws/box/?boxid=530435&amp;boxtag=k0nf64&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-530435" style="border:#FFFFFF 1px solid;border-bottom:0px" id="cboxform7-530435"></iframe></div>
<div><iframe frameborder="0" width="200" height="263" src="http://www7.cbox.ws/box/?boxid=530435&amp;boxtag=k0nf64&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-530435" style="border:#FFFFFF 1px solid;" id="cboxmain7-530435"></iframe></div>
</div>
<!-- END CBOX -->

        <br />
        <div class="hc-credit">
        <span style="float:left">
        <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
        Get this
        <a href=http://tipsblog-putradom.blogspot.com/2013/02/membuat-chatbox-melayang-left.html
        target="_blank">
        Widget</a>.
        By:
        <a href=http://tutorialphotoshopcs-putradom.blogspot.com//
        target="_blank">
        Putra Editing™
        </a>
        </span>
        <span style="float:right">
        <a href="javascript:showHidehcl()">
        [CLOSE]
        </a>
        </span>
        </div>
        </div>
        <div class="hcltab" onclick="showHidehcl()"> </div>

        </div>
        <script type="text/javascript">
        var hcl = document.getElementById("hcl");
        hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
        </script>
        <!-- right hidden chatbox by http://tutorialphotoshopcs-putradom.blogspot.com/END -->

Keterangan :

1. Ganti yang berwarna Biru dengan url blog sobat.
2. Letakkan kode Chatbox sobat pada kode yang berwarna Merah.

------------------------------------------------------

• Lanjut, Sign In di blog anda, jangan di blog ane yah, hehe.
• Pilih Rancangan -> Tata Letak -> Tambah Gadget.
• Pastekan Kode Diatas, lalu Save.
• Lihat Blog Sobat. Taaraaa...... ChatBox melayang sudah terpasang diblog sobat.

Bagaimana..?? Mudah Bukan. Selamat Mencoba...

Semoga Bermanfaat...