Popular Posts

Cara Menyembunyikan Chat Box (ShoutMix) Pada Blogger (versi3)

Share on :
Assalamualaikum...
Chat Box pada saat ini telah banyak di-"Kembang biakkan" pada Blog-Blog Sobat Blogger. Tapi, pingin gak bikin tempat widget penuh? Jawabannya "Sembunyikan"! Yap, pada tutorial sebelumnya, yaitu TutorCB1 dan TutorCB2 dijelaskan bagaimana cara menyembunyikannya. Nah, Saya menemukan kode baru. Tapi, instalasinya sedikit utak atik Template. But, no problem! Hasilnya memuaskan! Berikut ini tutorialnya dari Tutorial Blogging.

~^tUtOr!aL^~
  1. Masuk ke blogger.
  2. Pilih Layout (Tata Letak) » Page Elements (Elemen Laman).
  3. Klik tulisan Add a Gadget (Tambah Gadget).
  4. Pilih gadget HTML/JavaScript.
  5. Copy-paste kode berikut di bagian konten.

    <script type="text/javascript">
    function showHidechat(){
    var chat = document.getElementById("chat");
    var w = chat.offsetWidth;
    chat.opened ? movechat(0, 30-w) : movechat(20-w, 0);
    chat.opened = !chat.opened;
    }
    function movechat(x0, xf){
    var chat = document.getElementById("chat");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    chat.style.right = x.toString() + "px";
    if(x0!=xf){setTimeout("movechat("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="chat">
    <div class="chat-click" onclick="showHidechat()"> </div>
    <div class="chatbox">
    <center>


    SCRIPT CHATTING DI SINI


    </iframe></center>
    <a href="http://www.tutorialblogging.co.cc/2010/04/membuat-kotak-chatting-tersembunyi.html" title="Pasang widget chatting seperti ini di blog anda" target="_blank">[+]</a>
    <span style="float:right">
    <a href="javascript:showHidechat()">
    [x]
    </a></span>
    </div></div>

    <script>
    var chat = document.getElementById("chat");
    chat.style.right = (30-chat.offsetWidth).toString() + "px";
    </script>

  6. Simpan gadget.
CSS
Sekarang pada bagian css, ikuti langkah-langkah berikut.
  1. Pilih menu Layout (Tata Letak) » Edit HTML.
  2. Cari kode ]]></b:skin>, kemudian copy-paste kode css berikut di atasnya.

    #chat{position:fixed; top:25px; z-index:+1000}
    * html #chat{position:relative}
    .chat-click{height:100px; width:30px; float:left; cursor:pointer; background:url(http://i42.tinypic.com/vhb3vc.jpg) no-repeat;}
    .chatbox{float:left; border:2px solid #1f54bc; background:#f0f8ff; padding:10px}
    .chatbox a {text-decoration: none;}

  3. Simpan template.

1 komentar:

Samuel Tersembunyi mengatakan... Rabu, 20 Februari 2013 14.20.00 WIB

keren bro,,kunjungi blog ane juga ya http://tersembunyi-007.blogspot.com/

Post a Comment and Don't Spam!

Please don't SPAM!