Membuat Hide dan Show ShoutMix (Chat Box)

topgans.blogspot.com - ShoutMix atau yg lebih di kenal dengan Chatbox ,sobat pasti sudah tau dgn Gadget yg satu ini. Bila sobat belum tau apa itu Chatbox silahkan lihat pada kanan blog saya , ada yg namanya chatbox bukan ? Nah kali ini saya akan menjelaskan cara membuatnya , so cekidot..


ShoutMix Chatbox , jelas dari namanya saja sobat pasti sudah tau fungsinya bukan ? Yap ,benar sekali..widget ini berfungsi sebagai Chatbox bahasa gaulnya sih buku tamu ,hehe . Fungsinya ? Supaya para visitor/pengunjung blog sobat bisa berchat ria atau sekedar request dan meninggalkan jejak..hehe



Kenapa Hide and ShowChatbox disini melayang , bisa di tampilkan juga di sembunyikan ,hho
Contohnya ? Sobat bisa lihat punya saya , hehe . Langsung aja kali yah ? Oke deh berikut langkah-langkahnya..


  1. Pertama, silahkan sobat login ke akun sobat blogger masing-masing.
  2. Di bagian dashboard klik menu Design/Tata letak.
  3. Tambah Gadget.
  4. Kemudian Copy-Paste kode berikut di gadget baru yang telah anda buat tadi.

      <!-- Begin Show Hide Floating - http://www.topgans.blogspot.com--> <style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:550px; width:35px; float:left; cursor:pointer; background:url('http://i1233.photobucket.com/albums/ff398/Proid321/Chatbox.png') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #ffffff; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#000000; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent"> <!-- Kode Shoutmix mu Disini --> MASUKKAN KODE SHOUTMIX DISINI <div style="text-align:right"> <a href="javascript:showHidehitsukeFX()"> [HIDE] </a> </div> </div> </div> <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>

Pada "MASUKKAN KODE SHOUTMIX DISINI" silahkan sobat ganti dengan kode ShoutMix punya anda.

Untuk tulisan yg saya beri warna MERAH bisa sobat edit/rubah sesuai keinginan sobat .
Example : "http://i1233.photobucket.com/albums/ff398/Proid321/Chatbox.png" bisa sobat ganti dgn gambar/icon Chatbox milik sobat. Dan pada "HIDE" silahkan sobat ganti dgn kata / bisa juga dijadikan gambar  yg sobat mau


Selamat mencoba.

    Related Posts by Categories



    16 comments:

    Windows 7 Blog said...

    udah pasang gan di blogku nh...

    Rama88 said...

    wahh keren ya kalo chatbox dibikin show hide,, hehhe,, thx for sharing sobat,,

    Tophan said...

    @Windows 7 Blog : Hehe , nice gan , saya cuma share ilmu aja buat yg belom bisa :D
    @Rama88 : Sama2 sob , thanks juga udah mampoir ..

    Bimo (Momentum of Learning) said...

    wah nanti coba saya praktekkin

    masih newbie...belajar-belajar sob...

    Tophan said...

    Hehe , monggo di coba ..
    semoga bermanfaat ilmunya sob :D

    Ridzahul Khairin said...

    Wahh keren kawamm,, mantaf untuk di gunakan, mungkin bisa di Bookmark dulu yaa.. Nice Post :D

    Tophan said...

    hehe , semoga berguna kawan (y)
    sering-sering mampir ya :D

    maria said...

    aaaaaaaaaaaaaaaaaaa aku mau nyoba kakaakakakakakaka
    kaka pintaaaaaaar sekali
    sini sini aku cium *eh

    Tophan said...

    asik asik *eh

    Rezky said...

    wah good trik bos, numpang lewat bro

    Tophan said...

    @Ros : Silahkan bro :D hehe

    Jam Tangan Flash Dot Com said...

    blogwalking gan, gantian kunjungan ya, koleksi jam tangan keren anak muda

    www.jamtanganflash.com

    Vikky said...

    maksudnya "MASUKKAN KODE SHOUTMIX DISINI" apaan ???
    sorry masih newbie

    willy said...

    blog walking gan, kunjungi balik yah :)

    http://www.kuunduh.com/

    ICAH BANJARMASIN said...

    Wahh..info yg menarik nih..trims ya bang..

    Harwan Dharma said...

    KK... ane buka blog punya ane. kog jadi ke Ripway.com?? tolong bantu gan....

    Post a Comment

    Maaf kalau saya tidak sempat menjawab/membalas komentar anda, dikarenakan saya tidak online 24 jam.
    Mohon gunakan kata-kata yang sopan dalam memberikan komentar.
    Komentar SPAM, SARA dan sejenisnya tidak akan di tampilkan.

    Next Prev home
    Follow Topgans