Warung Bebas
HOME SING IN LOG OUT
SELAMAT DATANG DI WITTO BLOG | TEMPAT NONGKRONG PARA BLOGGER | Voucher Bersama - Witto Blog - Tutorial Blog | SELAMAT MENUNAIKAN IBADAH PUASA MOHON MAAF LAHIR DAN BATHIN | MAAF ATAS KE TIDAK NYAMANANNYA

Jumat, 09 Juli 2010

Pasang RIGHT - Hidden Chatbox Pada Blogger

Jumat, 09 Juli 2010
Hidden Chatbox adalah sebuah tempat menyimpan atau meletakkan widget chatbox (Shoutmix, Shoutbox, dll) yang bisa bersembunyi. Sembunyi disini pastinya bukan berarti hilang, kabur, atau lari. tapi sengaja kita sembunyikan untuk menghemat ruang blog. Setelah belajar dan paham, saya menggunakan trik Hidden Chatbox ini untuk memasang shoutmix sehingga blog saya tidak terlihat sesak lagi(walau sebenarnya masih sesak banget, hahhahaha....).
Trik Hidden Chatbox ini terbagi menjadi 2 pilihan, yaitu LEFT-Hidden Chatbox dan RIGHT-Hidden Chatbox. Kalau yang saya pakai di blog ini adalah RIGHT-Hidden Chatbox. Berikut kodenya:

<!-- right hidden chatbox by http://gadogadorahma.blogspot.com START -->
<style>
#hcr {
position:fixed;
top:150px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFHzD8mU1jzGPjAP3lgvzuyg6p8xDkl8oICOJ-KSyy4cKJ22s_D5b1nGR_F3q8e5dIMJjB4JgmFZaFaene3G_JbGtbvGTywT8PL8rcXCFoQYxOB56NKl6Ka3XSRyGGzqUQGcIvqmaQGhA/s400/cbblue-2-LEFT.png') no-repeat;
}
.hcrcontent {
float:right;
border:2px solid #A9D0F5;
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">
<center><blink><span style="font-weight:bold;">Tinggalkan Pesan Anda</span></blink></center><br />
< MASUKKAN CODE SCRIPT CBOX ANDA -->

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://gadogadorahma.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://gadogadorahma.blogspot.com END -->

NaH, sekarang kita pasang kode itu di blog. Udah tahu caranya kan ???? Itu, pilih Rancangan > Page Elements > HTML/Javascript, lalu masukkan kode Hidden Chatbox diatas.
Catatan: Trik hidden ini bisa juga anda gunakan untuk memasang widget lain, jadi trik ini tidak khusus untuk memasang Cbox. Anda tinggal berkreasi dengan kode-kode yang bikin botak kepala,..hahahahahah

Selamat Mencoba,...

Cari Artikel Lainnya Disini
Custom Search

Bagi yang ingin belajar PHP / HTML / MySQL dengan sangat mudah sambil langsung praktek dalam waktu yang singkat,di tuntun dengan tutorial video yang di rancang khusus dan mudah di mengerti, Witto Mengajak anda belajar DISINI.

0 komentar:

Posting Komentar

Comment Yuk Biar Lebih Seru....

Prev Prev Home
 

Follow

Buku Tamu No Link