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

    Ros 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-vq 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..

    Nothing 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