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 Pradipta mengatakan...

tHanks., haKim..,

hakim mengatakan...

akatsuki...
kalau mahu tukar perkataan chatbox mcmne?

Deo Pradipta mengatakan...

uDah Q kasih tw kn ?
hweheheehehe

$καяαмɛℓαʓʋяɛ mengatakan...

, duh~
, knp sye punye tidk mnjadi ??

Deo Pradipta mengatakan...

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

ARTRIX Blogger mengatakan...

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

Deo Pradipta mengatakan...

@Andhy : edit dari Shoutmix-nya..,

ARTRIX Blogger 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 Pradipta 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 Pradipta mengatakan...

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

Intikalis Kiri Administrator mengatakan...

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

Deo Pradipta mengatakan...

@bima : thx ! :)

agus khan mengatakan...

ewewewewe

Deo Pradipta mengatakan...

@agus : hehehe.. thx kunjungannya :)

puluth® mengatakan...

Kalo yang pake link ada gak gan??

Deo Pradipta mengatakan...

mksdnye?

Unknown 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

Unknown 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^^

Unknown 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 ^^

Unknown 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

Posting Komentar

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