Pada tutorial kali ini saya akan membahas artikel tentang bagaimana caranya membuat buku tamu yang melayang di sisi monitor komputer.
Sebenarnya sudah lama saya menyimpan artikel ini dalam draft saya, karena dulu salah seorang sobat PC pernah bertanya kepada saya bagaimana caranya membuat buku tamu seperti itu. namun kelihatannya dia sudah menemukan caranya dengan bertanya kepada si mbah google. hehee....
Tapi karena saya bingung ingin membahas apa pada tutorial kali ini, maka saya berfikir untuk menerbitkanya.
Baik, langsung saja ini dia step by stepnya/
<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://i493.photobucket.com/albums/rr292/marcel_freezer/GuestBook2.gif') 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 code atau script shoutmix anda disini
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
7. Save
catatan:
Link yang berwarna hijau adalah URL gambar, ganti dengan gambar yang anda suka.
Script yang berwarna merah adalah tempat anad memasang script chatbox anda, anda juga dapat memasang widget lain yang anda suka.
Selamat mencoba...
Sebenarnya sudah lama saya menyimpan artikel ini dalam draft saya, karena dulu salah seorang sobat PC pernah bertanya kepada saya bagaimana caranya membuat buku tamu seperti itu. namun kelihatannya dia sudah menemukan caranya dengan bertanya kepada si mbah google. hehee....
Tapi karena saya bingung ingin membahas apa pada tutorial kali ini, maka saya berfikir untuk menerbitkanya.
Baik, langsung saja ini dia step by stepnya/
- Login ke akun Blogger anda
- Klik Tata Letak
- Elemen Halaman
- Tambah Gadget
- HTML/Java Script.
- Copy-paste code dibawah 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://i493.photobucket.com/albums/rr292/marcel_freezer/GuestBook2.gif') 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 code atau script shoutmix anda disini
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
7. Save
catatan:
Link yang berwarna hijau adalah URL gambar, ganti dengan gambar yang anda suka.
Script yang berwarna merah adalah tempat anad memasang script chatbox anda, anda juga dapat memasang widget lain yang anda suka.
Selamat mencoba...
Outbound Lembang, Outbound Bandung, Outing Lembang, Outing Bandung, Gathering Lembang, Gathering Bandung, Offroad Lembang, Offroad Bandung, EO Outbound, Provider Outbound, Jasa Outbound, Penyelenggaran Kegiatan Outbound, EO Outing, EO Gathering, Provider Offroad, Rovers Adventure Indonesia,
0 komentar:
Posting Komentar