Hidden Chatbox

          Hidden Chatbox adalah sebuah tempat menyimpan atau meletakkan widget chatbox (Shoutmix, Shoutbox, dll) yang bisa bersembunyi. Contohnya seperti punyaku yang ada di sebelah kanan dan kiri., Manfaat dari Hidden Chatbox ini untuk menghemat template blog., Apakah kalian mau menggunakan cara seperti ini ? ya udah akan ku kasih tau caranya.
         Caranya sebagai berikut :
  1. Login ke Blogspot >> Rancangan >> Elemen Laman 
  2. Itu kan sudah langsung ke Elemen Laman terus Tambah Gadget >> Edit HTML/ Javasript
  3. CopPas kode di bawah ini :

    Left Hidden Chatbox




    <!--left hidden chatbox by http://dopind.blogspot.com/ START -->
    <style>
    #hcr {
    position:fixed;
    top:100px;
    z-index:+1000;
    }
    * html #hcr {position:relative;}
    .hcrtab {
    height:96px;
    width:96px;
    float:right;
    cursor:pointer;
    background:url('http://web.bryant.edu/~alumni/2009images/june/Soccer_ball.png') no-repeat;
    }
    .hcrcontent {
    float:right;
    border:2px solid #003e82;
    background:#f3f6f7;
    padding:10px;
    }
    .hc-credit {font-size:9px}
    .hc-credit a {text-decoration:none}
    </style>
    <script type="text/javascript">
    function showHidehcr(){
    var hcr = document.getElementById("hcr");
    var w = hcr.offsetWidth;
    hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
    hcr.opened = !hcr.opened;
    }
    function movehcr(x0, xf){
    var hcr = document.getElementById("hcr");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    hcr.style.left = x.toString() + "px";
    if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="hcr">
    <div class="hcrtab" onclick="showHidehcr()"> </div>
    <div class="hcrcontent">

    <!-- KODE SHOUTMIX ANDA DISINI -->

    </div>

    <br />
    <div class="hc-credit">
    </div>
    </div>

    <script type="text/javascript">
    var hcr = document.getElementById("hcr");
    hcr.style.left = (30-hcr.offsetWidth).toString() + "px";
    </script>
    <!-- left hidden chatbox by http://dopind.blogspot.com/ END -->



    Right Hidden Chatbox





    <!-- right hidden chatbox by http://dopind.blogspot.com/ START -->
    <style>
    #hcr {
    position:fixed;
    top:100px;
    z-index:+1000;
    }
    * html #hcr {position:relative;}
    .hcrtab {
    height:96px;
    width:96px;
    float:left;
    cursor:pointer;
    background:url('http://web.bryant.edu/~alumni/2009images/june/Soccer_ball.png') no-repeat;
    }
    .hcrcontent {
    float:left;
    border:2px solid #003e82;
    background:#f3f6f7;
    padding:10px;
    }
    .hc-credit {font-size:9px}
    .hc-credit a {text-decoration:none}
    </style>
    <script type="text/javascript">
    function showHidehcr(){
    var hcr = document.getElementById("hcr");
    var w = hcr.offsetWidth;
    hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
    hcr.opened = !hcr.opened;
    }
    function movehcr(x0, xf){
    var hcr = document.getElementById("hcr");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    hcr.style.right = x.toString() + "px";
    if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="hcr">
    <div class="hcrtab" onclick="showHidehcr()"> </div>
    <div class="hcrcontent">

    <!-- KODE SHOUTMIX ANDA DISINI -->

    </div>

    <br />
    <div class="hc-credit">
    </div>
    </div>

    <script type="text/javascript">
    var hcr = document.getElementById("hcr");
    hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
    </script>
    <!-- right hidden chatbox by http://dopind.blogspot.com/ END -->

Tulisan berwarna biru = Menunjukkan bahwa jarak tab dari atas
Tulisan berwarna biru muda = Tinggi dan lebar tab pembuka hidden chatbox
Tulisan berwarna kuning = Gambar yang dijadikan sebagai tab pembuka hidden chatbox

SemoGa pOstinG Q kali ini berManfAat bagi semua yang liat postingku ini dan jangan lupa tinggalkan komentar.., byE..,

Artikel Terkait

39 komentar:

abd hakim mengatakan...

wah...akatsuki mang besh...snang nk tutorial..!!

Deo Pein Nagato mengatakan...

tHanks., haKim..,

hakim mengatakan...

akatsuki...
kalau mahu tukar perkataan chatbox mcmne?

Deo Pein Nagato mengatakan...

uDah Q kasih tw kn ?
hweheheehehe

мα∂∂ʏ мαяcɛℓℓα mengatakan...

, duh~
, knp sye punye tidk mnjadi ??

Deo Pein Nagato mengatakan...

@мα∂∂ʏ : coba' lah sekali lagi..,

Andhy BlogGerZ.com mengatakan...

sob!!... ko aneh jdi ny,??.,... liat dah punya aqu.. cuma sdikit layar nya !! ;'(

Deo Pein Nagato mengatakan...

@Andhy : edit dari Shoutmix-nya..,

Andhy BlogGerZ.com mengatakan...

iya, iya.... dah bisa nih... km mau gx yg chatbox 2 ??? ternyata ada yg baru dr chat boX !!!,, yaitu chatbox 2 !!!!! tampilan ny sich lbih bgus dri pd yg sblum ny !!!!!

Deo Pein Nagato mengatakan...

@aNdhy : gg deh makasih !
sorry gg biza follow qmu

|R*M|THE_bomm mengatakan...

keren...nice blognya

ardiian tiias erithama mengatakan...

thas gan :)

muhaemin mengatakan...

d mana yah cara taroh shotmixnya?

Deo Pein Nagato mengatakan...

tuh bro di kode atas... ada tulisan yg di back hitam...

bimacruzz mengatakan...

thanks a lot dude.. let me follow you :D

Deo Pein Nagato mengatakan...

@bima : thx ! :)

agus khan mengatakan...

ewewewewe

Deo Pein Nagato mengatakan...

@agus : hehehe.. thx kunjungannya :)

puluth® mengatakan...

Kalo yang pake link ada gak gan??

Deo Pradipta mengatakan...

mksdnye?

SMK muhammadiyah larangan mengatakan...

makasih..keren euy

Deo Pradipta mengatakan...

sama2 sob .. thankz ^_^

annaFARHANA :) mengatakan...

i cant make it . how ? pleasee teach me :D

Deo Pradipta mengatakan...

hohoho... okey i'll teach yaa :p
#mboh bener ta gak bosone.. XD

Anonim mengatakan...

Om contoh kode shoutmix tu yang gimana Maklum newbie

Deo Pradipta mengatakan...

ya kyk kode2 yg rumit gitu sob.. coba aja ambil dari cbox.ws aja..

tantoIT mengatakan...

mw tanya nih sob kok merusak menu dropdown yya

minta solusinya donk cpba liat

http://tantoit.blogspot.com/

Deo Pradipta mengatakan...

merusak yg mana ya ? :/

Karya kita mengatakan...

nice Info gan :)

Deo Pradipta mengatakan...

iya sob.. makasih ^_^

tantoIT mengatakan...

enga jadi hehe mungkin emang skrip tempelate q yang eror jadi agak patah" droopdown nya :p

Deo Pradipta mengatakan...

blog ente jelekk .. wkwkwk.. canda ._.v

hn mutiara mengatakan...

kok gambarnya separo .piye hadeh .. biar gambarnya besar n utuh gimana nih gan.

Deo Pradipta mengatakan...

gambar apanya ? ini kan menu hidden.. gambarnya kalo di klik ntar bakal muncul chtboxnya^^

hn mutiara mengatakan...

ituloh yang tulisan warna kuning kan buat gambar kan.. di blog aku gmbarnya cuma setengah
coba deh diliat di bagian left nih http://kreasiisengmiti.blogspot.com .

Deo Pradipta mengatakan...

oh.. ente blum atur lebar gambarnya sob.. yang warna biru muda tuh ^^

hn mutiara mengatakan...

oya udah matur tengkyu ^_^ .

Deo Pradipta mengatakan...

ehehe.. samasamaaa yaw ^^

Jefry mengatakan...

agar tidak terlihat penuh sepertinya perlu juga membuat hidden seperti ini
terima kasih ulasannya

Poskan Komentar

Askorus Distro Askorus Distro
Copyright 2010 - 2012 ^ Akatsuki Blog™ - Compatible with Chrome 1024 x 768 -