Menyembunyikan Shoutmix atau Buku Tamu

Senin, 16 Mei 2011

Menyembunyikan Shoutmix atau Buku Tamu


Nah sekarang saya akan memberi tahu tips dan trik untuk membuat widget shoutmix/ buku tamu bisa tersembunyi di sudut blog.


Buku tamu tersembunyi berfungsi untuk meminimalisir ruang yang digunakan pada blog kita. Berikut langkah-langkah untuk menyembunyikan buku tamu atau shoutmix:

  1. Masuk ke account blogger anda
  2. Pilih rancangan
  3. kemudian klik add new widget, pilih HTML/Javascript
  4. kemudian copy paste kode berikut
<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">

Masukkan kode shoutmixmu disini

<br /><a href="http://blogtyo.tk" title="">BlogTyo</a><br />
<div style="text-align:right">
Mau seperti ini?<br/>
Click aja disini--->
<a href="http://blogtyo.tk">
Blogku: Ekspresiku Curahanku
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>



<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

Setelah selesai save element tersebut.

Tulisan warna biru diatas ganti dengan kode shoutmix atau kode html chatbox anda.
anda juga bisa mengatur ketinggian dan lebar di bagian top, height, dan width.
selamat mencoba :)

1 Komentar untuk "Menyembunyikan Shoutmix atau Buku Tamu"

  1. Cheap autoblog Hosting, support AGC, wp-Robot, Wp- multisite, stt,only USD 1 /month at greenbalihost.com

    BalasHapus

Terima Kasih Udah Baca Artikel Blog Tyo. Silahkan berkomentar, bebas dan bertanggung jawab. Oh ya, masih banyak artikel bagus lho di blog ini, ditunggu komentar dan kunjungannya kembali