Kamis, 15 Juli 2010
Menyembunyikan Buku Tamu / Buku Tamu Melayang
Setelah membuat posting cara membuat Shoutbox ( shoutmix ), saya terinspirasi untuk membuat bagaimana caranya supaya membuat tampilannya berbeda yaitu dengan membuatnya tersembunyi di samping halaman Blog.
ikuti yuk langkah membuatnya. beginilah tahap-tahapnya:
1. Login ke Blog kamu
2. Klik menu Layout / Tata Letak / Rancangan
3. Klik Page Element
4. Klik add Gadget
5. Tambah element HTML/JavaScript
6. Copy Paste Script berikut.
8. Ganti kode berwarna merah dengan Script shoutmix/Cbox kamu.
9. Ganti juga ukuran yang berwarna biru untuk atur posisinya. Ubah aja nilai atribut
10.Jangan lupa Save.
silahkan di coba dan lihat hasilnya.
ikuti yuk langkah membuatnya. beginilah tahap-tahapnya:
1. Login ke Blog kamu
2. Klik menu Layout / Tata Letak / Rancangan
3. Klik Page Element
4. Klik add Gadget
5. Tambah element HTML/JavaScript
6. Copy Paste Script 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMbAzktXBx9_wPL_t1hWgTf39HiKyYnoiClcK_d_YFbCxfDEvkH87qRqo6ZEH7ATBSX5CWeuWhweitLE2MNPLmdpcmqKlGwjitCv4twE3loy5_qOdgQcTpbEa1uCq_eRvg7gPkImnJVaMM/') 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 ini dengan kode buku tamu kamu -->
<br/>
Mau punya buku tamu seperti ini?<br/>
Klik
<a href="http://www.z33s.co.cc/2009/11/cara-membuat-shoutbox-shoutmix-buku.html">
DISINI
</a>
<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>
8. Ganti kode berwarna merah dengan Script shoutmix/Cbox kamu.
9. Ganti juga ukuran yang berwarna biru untuk atur posisinya. Ubah aja nilai atribut
top
-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px
atau 20px
, terserah kamu.10.Jangan lupa Save.
silahkan di coba dan lihat hasilnya.
No comments yet