Your Shopping Cart
Total Items:
SubTotal:
Tax Cost:
Shipping Cost:
Final Total:

Hidden Chatbox


Hinor Enterprise Chatbox
Macam mana nak buat profesional Hidden Chatbox? Hidden Chatbox merupakan salah satu widget chatting untuk diletakkan pada laman web / blog secara tersebunyi seperti shoutmix, shoutbox, cbox.ws dan lain-lain. Trik hidden chatbox ini digunakan bagi mengurangkan kepadatan widget layout pada sesebuah laman web / blog. Bagi mengikut kesesuaian sesebuah laman web / blog, widget ini boleh dipasang pada sebelah tepi di kiri atau kanan. Contoh yang saya gunakan pada blog Hinor Enterprise adalah pada sebelah kanan dan menggunakan imej dan kod warna border: #003e82





Hidden Chatbox - Kiri
<!-- left hidden chatbox by http://www.hinorenterprise.com.my 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('http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S2Evq5hIpUI/AAAAAAAABAM/3qo6ScKImhw/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://www.hinorenterprise.com.my/p/hidden-chatbox_3.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://www.hinorenterprise.com.my END -->


Hidden Chatbox - Kanan
<!-- right hidden chatbox by http://www.hinorenterprise.com.my 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('http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S2EvgsgQ7nI/AAAAAAAAA_k/gq8QRLZcHFs/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://www.hinorenterprise.com.my/p/hidden-chatbox_3.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://www.hinorenterprise.com.my END -->


Keterangan:

#hcr {
position:fixed;
top:100px; /* Menunjukkan bahawa jarak tab dari atas adalah sejauh 100px. Boleh digantikan dengan bottom:100px yang bermaksud 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('http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S2EvgsgQ7nI/AAAAAAAAA_k/gq8QRLZcHFs/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 mengubah kod lain pada style) */
padding:10px;
}


Berikut beberapa gambar tab pembuka hidden chatbox dan kod warna html untuk border yang serasi:

Kod warna border: #790909





Kod warna border: #aca500





Kod warna border: #008232





Kod warna border: #003e82





Kod warna border: #0079a0




Untuk memasang pada blogspot, pastikan anda telah log masuk kepada blogger Layout > Add a Gadget > HTML/Javascript, kemudian masukkan kode Hidden Chatbox dan klik Save.

Pesanan: Trik hidden chatbox ini juga boleh digunakan untuk memasang widget lain seperti HINOR ENTERPRISE fan pages, Anda hanya perlu gantikan kod HTML nya sahaja seperti tulisan berwarna HIJAU.

Selamat mencuba...

0 comments:

Post a Comment

Backlink perniagaan percuma busuk org pingje Kedai Backlink,Backlink Percuma blogr Free Auto Malaysia Backlinks Malaysian Free Auto Backlink Exchange CK Free Auto Backlink Backlink DrSneez4u.com Mommy Pinky DNS Powered by DNSEver.com Perlis | Kedah | Perak | Selangor | Pahang | Kelantan | Terengganu | Putrajaya | Negeri Sembilan | Melaka | Johor | Sabah | Sarawak | Labuan | Dapatkan Backlink Ping Perniagaan Percuma Seluruh Malaysia Untuk Tingkatkan Trafik Website Blog