Hidden Chatbox

Browse » Home » Blogging Tutorial » Hidden Chatbox

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 :

Login ke Blogspot >> Rancangan >> Elemen Laman
Itu kan sudah langsung ke Elemen Laman terus Tambah Gadget >> Edit HTML/ Javasript
CopPas kode di bawah ini :

Left Hidden Chatbox


<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">



</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>


Right Hidden Chatbox


<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">



</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>

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..,

39 komentar:

abd hakim mengatakan...: wah...akatsuki mang besh...snang nk tutorial..!!; 23 Juni 2010 pukul 15.35
Deo Pradipta mengatakan...: tHanks., haKim..,; 23 Juni 2010 pukul 15.44
hakim mengatakan...: akatsuki...
kalau mahu tukar perkataan chatbox mcmne?; 23 Juni 2010 pukul 15.58
Deo Pradipta mengatakan...: uDah Q kasih tw kn ?
hweheheehehe; 23 Juni 2010 pukul 16.40
$καяαмɛℓαʓʋяɛ mengatakan...: , duh~
, knp sye punye tidk mnjadi ??; 10 September 2010 pukul 08.04
Deo Pradipta mengatakan...: @мα∂∂ʏ : coba' lah sekali lagi..,; 14 September 2010 pukul 18.37
ARTRIX Blogger mengatakan...: sob!!... ko aneh jdi ny,??.,... liat dah punya aqu.. cuma sdikit layar nya !! ;'(; 5 Oktober 2010 pukul 18.23
Deo Pradipta mengatakan...: @Andhy : edit dari Shoutmix-nya..,; 6 Oktober 2010 pukul 05.50
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 !!!!!; 6 Oktober 2010 pukul 21.26
Deo Pradipta mengatakan...: @aNdhy : gg deh makasih !
sorry gg biza follow qmu; 7 Oktober 2010 pukul 05.53
|R*M|THE_bomm mengatakan...: keren...nice blognya; 31 Oktober 2010 pukul 13.55
ardiian tiias erithama mengatakan...: thas gan :); 18 Desember 2010 pukul 11.16
muhaemin mengatakan...: d mana yah cara taroh shotmixnya?; 28 Desember 2010 pukul 20.05
Deo Pradipta mengatakan...: tuh bro di kode atas... ada tulisan yg di back hitam...; 31 Desember 2010 pukul 10.36
Intikalis Kiri Administrator mengatakan...: thanks a lot dude.. let me follow you :D; 23 Januari 2011 pukul 21.16
Deo Pradipta mengatakan...: @bima : thx ! :); 15 Februari 2011 pukul 19.39
agus khan mengatakan...: ewewewewe; 5 Maret 2011 pukul 13.46
Deo Pradipta mengatakan...: @agus : hehehe.. thx kunjungannya :); 5 Maret 2011 pukul 22.21
puluth® mengatakan...: Kalo yang pake link ada gak gan??; 29 Maret 2011 pukul 23.40
Deo Pradipta mengatakan...: mksdnye?; 14 Oktober 2011 pukul 16.04
Unknown mengatakan...: makasih..keren euy; 8 November 2011 pukul 22.49
Deo Pradipta mengatakan...: sama2 sob .. thankz ^_^; 9 November 2011 pukul 13.43
annaFARHANA :) mengatakan...: i cant make it . how ? pleasee teach me :D; 11 November 2011 pukul 20.20
Deo Pradipta mengatakan...: hohoho... okey i'll teach yaa :p
#mboh bener ta gak bosone.. XD; 11 November 2011 pukul 22.42
Anonim mengatakan...: Om contoh kode shoutmix tu yang gimana Maklum newbie; 27 Februari 2012 pukul 08.49
Deo Pradipta mengatakan...: ya kyk kode2 yg rumit gitu sob.. coba aja ambil dari cbox.ws aja..; 27 Februari 2012 pukul 12.03
tantoIT mengatakan...: mw tanya nih sob kok merusak menu dropdown yya

minta solusinya donk cpba liat

http://tantoit.blogspot.com/; 3 Maret 2012 pukul 18.18
Deo Pradipta mengatakan...: merusak yg mana ya ? :/; 4 Maret 2012 pukul 10.09
Karya kita mengatakan...: nice Info gan :); 8 April 2012 pukul 11.13
Deo Pradipta mengatakan...: iya sob.. makasih ^_^; 9 April 2012 pukul 20.01
tantoIT mengatakan...: enga jadi hehe mungkin emang skrip tempelate q yang eror jadi agak patah" droopdown nya :p; 10 Juni 2012 pukul 23.20
Deo Pradipta mengatakan...: blog ente jelekk .. wkwkwk.. canda ._.v; 12 Juni 2012 pukul 14.28
Unknown mengatakan...: kok gambarnya separo .piye hadeh .. biar gambarnya besar n utuh gimana nih gan.; 6 Agustus 2012 pukul 10.59
Deo Pradipta mengatakan...: gambar apanya ? ini kan menu hidden.. gambarnya kalo di klik ntar bakal muncul chtboxnya^^; 6 Agustus 2012 pukul 13.05
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 .; 6 Agustus 2012 pukul 14.20
Deo Pradipta mengatakan...: oh.. ente blum atur lebar gambarnya sob.. yang warna biru muda tuh ^^; 6 Agustus 2012 pukul 15.46
Unknown mengatakan...: oya udah matur tengkyu ^_^ .; 7 Agustus 2012 pukul 09.14
Deo Pradipta mengatakan...: ehehe.. samasamaaa yaw ^^; 7 Agustus 2012 pukul 13.33
Jefry mengatakan...: agar tidak terlihat penuh sepertinya perlu juga membuat hidden seperti ini
terima kasih ulasannya; 28 November 2012 pukul 13.08