Friday, November 4, 2011

Cara membuat cbox tersembunyi di blog

Tau chat box yang ada di home page blognya reggy kan? ituloh kotak merah di sebelah kanan kalau di klik keluar chat box? nah itulah yang akan kita bahas kali ini. Tapi sebelum membuat cboxnya tersembunyi ikuti dulu langkah - langkahnya disini. Jika sudah, ikuti langkah - langkah berikut:

1. Login pada blog anda
2. Rancangan
3. Tambah Gadget
4. HTML/Javascript
5. Copy kode di bawah ini
<style type="text/css"> 
    #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 Cbox / Shoutmix / Lainnya---------
     
    </div> 
    </div> 
     
    <script type="text/javascript"> 
    var gb = document.getElementById("gb"); 
    gb.style.right = (30-gb.offsetWidth).toString() + "px"; 
    </script>
6. Simpan dengan tampa judul

Selesai Deh...

Ket:
  • Ganti Tulisan yang berwarna merah dengan kode Cbox anda
  • Anda juga bisa menggunakan kode Shoutmix pada tutor ini

No comments:

Post a Comment

My Ping in TotalPing.com
Feedage Grade D rated
Preview on Feedage: web-design Add to My Yahoo! Add to Google! Add to AOL! Add to MSN
Subscribe in NewsGator Online Add to Netvibes Subscribe in Pakeflakes Subscribe in Bloglines Add to Alesti RSS Reader
Add to Feedage.com Groups Add to Windows Live iPing-it Add to Feedage RSS Alerts Add To Fwicki
Ping your blog, website, or RSS feed for Free