Social Icons

Pages

Minggu, 27 Januari 2013

Cara Memasang ChatBox Tersembunyi Di Kanan Blogger

Kali Ini Gue Mau Ngasih Tau Cara Bikin ChatBox Tersembunyi Di Kanan Blog. Taukan Gimana Contohnya? Pasti Taulah! Gak Mungkin Seorang Blogger Yang Udah Lama Terjun Di Dunia Yang Penuh Persaingan Ini Gak Tau Sama Yang Namanya "ChatBox". Gue Sengaja Gak Masang ChatBox Di Samping Blog. Soalnya Kalo Pake Template Ini Kelihatannya Kurang Rapih. Jadi Sengaja Gue Taruh Tombol Aja Di Bawah Blog. Jadi Kalo Diklik, Akan Pindah Ke Page ChatBox. Coba Aja Dah Klik Biar Gak Bingung. Nah Untuk Yang Kali Ini Dibahas Adalah ChatBox Tersembunyi Di Blog. Coba Aja Deh Biar Gak Bingung.


  1. Login Blogger Dulu Ya...
  2. Masuk Aja Ke Tata Letak.
  3. Add Gadget > HTML/JavaScript
  4. Masukin Kode Ini :

    <style type="text/css">
  5. #gb{
    position:fixed;
    top:50px;
    z-index:+1000;
    }
    * html #gb{position:relative;}
    .gbtab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;}.gbcontent{
    float:left;
    border:2px solid #A5BD51;
    background:#F5F5F5;
    padding:10px;
    }
    </style>
    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 30-w) : moveGB(20-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">

    KODE CHATBOXNYA DISINI

    <div style="text-align: center;"><span style="font-size: 10px;"><span style="font-family: &quot;Trebuchet MS&quot;,sans-serif;">Mau Widget Ini? <a href="http://blogmartstein.blogspot.com/2012/11/Memasang-ChatBox-Tersembunyi.html" target="_blank">Klik Disini</a></span></span></div><div style="text-align:right"><a href="javascript:showHideGB()">
    [tutup]
    </a>
    </div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script></div>
NB : Yang Tulisan Warna Biru, Boleh Diganti Sama URL Tap ChatBox Yang Sesuai Buat Disebelah Kanan. Tapi Lebih Baik Jangan Diganti Karena Itu Saja Sudah Bagus. Jika Tidak Diganti Akan Terlihat Kaya Gini : 
Jika Ingin Diganti Sesuaikan Ya, Karena Posisinya Disebelah kanan. Kalo Lu Ngerti Bahasa Pemrograman Khususnya Di Bidang Pengeditan HTML & CSS Code. Boleh Kodenya Di Otak-atik Biar Sesuai. Tapi Versi Default Yang Gue Kasih Kaya Gitu. Segitu Aja Ya Dari Gue... Thanks!

Semoga Berhasil !
Sumber :  http://blogmartstein.blogspot.com/2012/11/Memasang-ChatBox-Tersembunyi.html

1 comments:

 

Get this widget!

Counter

Flag Counter