Assalamu alikum..
hai sobat blogger..
sekarang saya mau bagi tips buku tamu yang saya kembangkan dari pembahasan sebelumnya..
pada pembahasan buku tamu tersembunyi di kiri, yang berbeda dari buku tamu biasanya..
yaitu posisi dan float-nya, yang tadinya di sebelah kanan atau right di ubah menjadi kiri atau left.
sangat simpel sebenarnya, tapi tergantung dari kejelian dan kekreatifan sobat melihat suatu script..
pada pembahasan kali ini, yang saya kembangkan dari script buku tamu biasa..
yaitu pada bagian teks berwarna merah..
<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent">
awalnya teks berwarna merah tersebut seperti ini onclick kemudian diganti menjadi onmouseover..
sebenarnya sangat mudahkan.. tinggal sobatnya aja mau mempelajari bentuk script..
atau mungkin sobat malas ngutak-atik scriptnya., takutnya salah ngedit..
kalo gag mau repot.. sobat bisa langsung copas aja script di bawah ini..
nah selamat mencoba ya..
semoga bermanfaat..
hai sobat blogger..
sekarang saya mau bagi tips buku tamu yang saya kembangkan dari pembahasan sebelumnya..
pada pembahasan buku tamu tersembunyi di kiri, yang berbeda dari buku tamu biasanya..
yaitu posisi dan float-nya, yang tadinya di sebelah kanan atau right di ubah menjadi kiri atau left.
sangat simpel sebenarnya, tapi tergantung dari kejelian dan kekreatifan sobat melihat suatu script..
pada pembahasan kali ini, yang saya kembangkan dari script buku tamu biasa..
yaitu pada bagian teks berwarna merah..
<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent">
awalnya teks berwarna merah tersebut seperti ini onclick kemudian diganti menjadi onmouseover..
sebenarnya sangat mudahkan.. tinggal sobatnya aja mau mempelajari bentuk script..
atau mungkin sobat malas ngutak-atik scriptnya., takutnya salah ngedit..
kalo gag mau repot.. sobat bisa langsung copas aja script di bawah ini..
<style type="text/css">
#gb{
position:fixed;
top:100px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:250px;
width:50px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFQUNtluCFRWIZtd1NPUmntdN-lxbnf7Jc3ZEKzU2Pu33YtmqOKEAH5MmxzIG860TgL4kk2q2yc6gydCljGkR3pFUk75FQsjObDLRER7F29Iy5afMDNjfWeFVMvREOZ6TPBJKBe9Zg_8OR/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #81F781;
background:#81F781;
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" onmouseover="showHideGB()">
</div>
<div class="gbcontent">
LETAKKAN SCRIPT BUKU TAMU SOBAT DI SINI
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
</div>
#gb{
position:fixed;
top:100px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:250px;
width:50px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFQUNtluCFRWIZtd1NPUmntdN-lxbnf7Jc3ZEKzU2Pu33YtmqOKEAH5MmxzIG860TgL4kk2q2yc6gydCljGkR3pFUk75FQsjObDLRER7F29Iy5afMDNjfWeFVMvREOZ6TPBJKBe9Zg_8OR/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #81F781;
background:#81F781;
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" onmouseover="showHideGB()">
</div>
<div class="gbcontent">
LETAKKAN SCRIPT BUKU TAMU SOBAT DI SINI
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
</div>
nah selamat mencoba ya..
semoga bermanfaat..
Tidak ada komentar:
Posting Komentar