Membuat Shoutbox Melayang


Okeh..
walaupun sudah tidak asing, tapi kali ini saya akan berbagi tentang cara membuat shoutbox melayan (berada di samping jendela blog)..
Kelebihannya, terlihat lebih unik dan menghemat tempat.. Contoh bisa dilihat pada samping blog ini.. :)


Baik, tanpa panjang x lebar x tinggi.. Langsung aja yaa..

1. registrasi di www.shoutmix.com
2. Buat buku tamu sesuai dengan keinginan sobat
3. Buku Tamu selesai
4. login blogger.com
5. pilih tata letak atau page layout
6. tambah gadget (pada elemen halaman klik tambah gadget lalu “HTML/JavaScript”)
7. lalu copy-paste script di bawah

Kode Untuk Sebelah Kiri
Kode Untuk Sebelah Kanan

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:right;
cursor:pointer;
background:url('http://i551.photobucket.com/albums/ii449/Pastagigi/tabs.png') no-repeat;
}
.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

ganti dengan script buku tamu-mu

<br/>

<div style="text-align:left">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.left = (30-gb.offsetWidth).toString() + "px";
</script>

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

ganti dengan script buku tamu-mu

<br/>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>


Keterangan      :

height:100px; (untuk ketinggian buku tamu)
width:30px; (untuk kelebaran buku tanu)

tulisan berwarna biru, ganti dengan code/script buku tamu sobat yang sudah ada pada www.shoutmix.com tadi.. (buku tamu yang telah dibuat sebelumnya)..

background:url('URL gambar keinginan kamu') no-repeat;
(gambar tampilan shoutmix)

Selesai deh..
Selamat Mencoba..

Penulis : "Aythinet" ~ Sebuah blog yang menyediakan berbagai macam informasi seputar IT

Artikel Membuat Shoutbox Melayang ini dipublish oleh "Aythinet" pada hari Jumat, 07 Oktober 2011. Semoga artikel ini dapat bermanfaat. Terimakasih atas kunjungan Anda. Silahkan tinggalkan komentar jika berkenan. Sudah ada 0 komentar: di postingan Membuat Shoutbox Melayang
 

0 komentar:

Posting Komentar

Jika ada pertanyaan, langsung aja di post via kotak dialog di bawah ini ..
^_^

Terima Kasih ...

Langganan: Posting Komentar (Atom)