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 :)

Read this | Baca yang ini

Widget by [ Tips Blogger ]

Posted in: Go Blog