Menamapilkan Cbox/ShoutMix Versi 2

Berikut beberapa versi buat tampilan cbox.Silahkan copas kode berikut di get gadget html.


Berikut ini code Versi 1

<!-- left hidden chatbox by http://tipsbloggerzacky.blogspot.com START -->

<style>

#hcl {

position:fixed;

top:100px;

left:0px;

z-index:+1000;

}

* html #hcl {position:relative;}

.hcltab {

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEPjVmb_G-wDd15vOeb7EKRIQPfifdjgKmuN10C0CB45YtydLTNPtpfX_ULlO1F5wbJh_UOXX0bHVWBLEtuVEioi-xVJksgR3fNXDaFON_bFDqiTvSriE8D_XGjJFK2CYA69cdbKvekmA/s400/cbred-LEFT.png') no-repeat;

}

.hclcontent {

float:left;

border:2px solid #790909;

background:#f3f6f7;

padding:10px;

}

.hc-credit {font-size:9px}

.hc-credit a {text-decoration:none}

</style>

<script type="text/javascript">

function showHidehcl(){

var hcl = document.getElementById("hcl");

var w = hcl.offsetWidth;

hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);

hcl.opened = !hcl.opened;

}

function movehcl(x0, xf){

var hcl = document.getElementById("hcl");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

hcl.style.left = x.toString() + "px";

if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}

}

</script>

<div id="hcl">

<div class="hclcontent">



<!-- KODE SHOUTMIX ANDA DISINI -->



<br />

<div class="hc-credit">

<span style="float:left">

<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->

<a href="http://tipsbloggerzacky.blogspot.com/2010/01/hidden-chatbox.html" target="_blank">

Get this widget!

</a>

</span>

<span style="float:right">

<a href="javascript:showHidehcl()">

[close]

</a>

</span>

</div>

</div>

<div class="hcltab" onclick="showHidehcl()"> </div>



</div>

<script type="text/javascript">

var hcl = document.getElementById("hcl");

hcl.style.left = (30-hcl.offsetWidth).toString() + "px";

</script>

<!-- left hidden chatbox by http://tipsbloggerzacky.blogspot.com END -->

Berikut adalah Cbox Versi 2

<!-- right hidden chatbox by http://tipsbloggerzacky.blogspot.com START -->

<style>

#hcr {

position:fixed;

top:100px;

z-index:+1000;

}

* html #hcr {position:relative;}

.hcrtab {

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRBBoYbtx5xR_3HjdFTAB2emIi4JkRZ39I53MVv9eC5gKd1UC1ae-r5xlAtCpdTbMKUoXYN-7pxRgMNGP5xG3oXTK7q1OErmfNHYb6kg4Gwf5s6flNh46ErJdpWp6Rt0FE1_DKDT7tmKY/s400/cbblue.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 -->



<br />

<div class="hc-credit">

<span style="float:left">

<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->

<a href="http://tipsbloggerzacky.blogspot.com/2010/01/hidden-chatbox.html" target="_blank">

Get this widget!

</a>

</span>

<span style="float:right">

<a href="javascript:showHidehcr()">

[close]

</a>

</span>

</div>

</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://tipsbloggerzacky.blogspot.com END -->

KETERANGAN

#hcr {

position:fixed;

top:100px; /* Menunjukkan bahwa jarak tab dari atas adalah sejauh 100px. Bisa anda ganti dengan bottom:100px yang berarti jarak tab dari bawah menjadi sejauh 100px */

z-index:+1000;

}



.hcrtab {

height:100px; /* tinggi tab pembuka hidden chatbox */

width:30px; /* tinggi tab pembuka hidden chatbox */

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRBBoYbtx5xR_3HjdFTAB2emIi4JkRZ39I53MVv9eC5gKd1UC1ae-r5xlAtCpdTbMKUoXYN-7pxRgMNGP5xG3oXTK7q1OErmfNHYb6kg4Gwf5s6flNh46ErJdpWp6Rt0FE1_DKDT7tmKY/s400/cbblue.png') no-repeat; /* gambar yang dijadikan sebagai tab pembuka hidden chatbox */

}


.hcrcontent {

float:left;

border:2px solid #003e82; /* warna dan ukuran border hidden chatbox */

background:#f3f6f7; /* warna background hidden chatbox (tidak perlu diganti jika anda mengedit kode lain pada style) */

padding:10px;

}


BERIKUT CODE WARNA LAYOUTNYA

Kode warna border: #790909


Kode warna border: #aca500


Kode warna border: #008232


Kode warna border: #003e82


Kode warna border: #0079a0

terimakasih....www.athepostrad.co.cc