Selasa, 09 Agustus 2011

Membuat Buku Tamu Melayang Di Blog


Buku Tamu Melayang ??? Maksudnya buku tamu bukanlah melayang seperti bergerak terbang, tetapi yang saya maksud adalah buku tamu Anda akan terus berada di layar monitor walaupun scrollnya digerakkan kebawah. Seperti yang Anda lihat pada blog saya ini. Untuk membuatnya silahkan Anda ikuti langkah-langkah berikut ini :
  1. Daftar akun chat box di cbox.ws bagi yang belum punya akun tersebut
  2. Setelah anda sudah mendaftar, silakan login di cbox.ws, kemudian klik tombol Publish, sehingga akan muncul kodenya. Simpan kode tersebut. 
  3. Kemudian Login dahulu di Blogger à Tata Letak à Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts
  4. kemudian Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts 
<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">


<!--kode buku tamu Anda-->


<a href="http://bayu-ly.blogspot.com/2011/01/buku-tamu-melayang.html" target="_blank"> Get this widget! </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> 
Kemudian ganti tulisan   <!--kode buku tamu Anda--> dengan kode yang tadi Anda dapatkan


1 komentar:

Habibi on 9 April 2023 pukul 03.05 mengatakan...

koq gak diupdate bro tutorialnya?
ayo dong terus berbagi

Posting Komentar

Followers

 

Tutorial Komputer. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com