MEMBUAT BUKU TAMU (southbox) TERSEMBUNYI


Kalau anda melihat blog toturial blog ini maka pada pojok kanan blog akan muncul tulisa berwarna hijau yang kalau anda klik akan muncul 'shouthbox' sebuah buku tamu / setiap pengunjung blog anda meninggalkan pesan.

Bagaimana cara membuatnya,,????

1. Login pada blogger dasbor anda
2. Tata letak >>> Elemen Halaman >>> Tambah Gadget
3. Klik (+) HTML/Java script Copy dan pastekan kode di bawah ini


<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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW-_L8FfZP-huF4gzSqUPJSFtl9ChEhtyYrarxAV7XIfq7P7_OPHRGSXbaNp-Y3uFalIZVWIr15ZgZlt9EfSKRXBJimeBlN4rwAzf5RC55Qn9b-qAgrJAjMsw5L2YvZxwGBRcFU_BPezHa/') 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">


Letakkan disini kode Shoutbox Anda>
<div style="text-align:right">
<a href="http://toturialbkog.blogspot.com">
[Toturial blog]
</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> 

4. Kalau mau ganti gambar/tulisan silahkan diganti tulisan warna biru
    




height: 130px
width: 35px
background URL: http://i25.tinypic.com/jl5dsg.png
border: 3px solid #003399





height: 100px
width : 30px
background URL: http://i30.tinypic.com/2cqh6yu.png
border: 2px solid #A5BD51


height: 100px
width: 30px
background URL: http://img22.imageshack.us/img22/8941/tabs2.gif
border: 2px solid #FF0033  


5.Ganti warna merah ini di ganti dengan kode 'southbox' anda
6. Simpan

Jangan lupa tinggalkan coment,,,, Salam bloggerservice mobil

Ditulis Oleh : Unknown // 5:47 AM
Kategori:

 

Popular Posts