Daftar Sekarang Bonus $10 langsung dari PROFITCLICKING
Kali ini saya akan membagi tips dan trik "Cara Membuat Buku Tamu Show/Hide dari Atas". Gak Pake Lama langsung aja Dach...
- Login blogger
- Rancangan, Tambah Gadget, Html/java script
- Dan Simpan kode berikut :
Kode Script
<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #999;
background: #000;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:#000;">
<!-- Simpan Kode cbox atau shoutmix nya disini -->
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-E5AN1cLbhLVaHac_YYlYrCs9pbMZlZ0oykPODIomp5tPh624XfMx-xlZX-WPpDI_hbFejQKONoCrNFolpwVoj2i-6JpB6YN-2tbF-33_pN7LN5tPdLlaWy27ZXXYdjxSSWE0hEY9PWrm/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>
<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/GUESTBOOK.png" alt="cbox" title="Click here to open Guest Book" /></a></center>
Catatan:
Jika ingin menampilkan posisi Tombol di samping seperti Blog saya ini, Tinggal ganti Kode di bawah ini
<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/GUESTBOOK.png" alt="cbox" title="Click here to open Guest Book" /></a></center>
Dengan Kode di bawah ini
<div style='display:scroll; position:fixed; top:20px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/CHATBOX.png" /></a>
</div>
Sekian Terima Kasih...
GET UPDATE ARTIKEL MENARIK CELOTEH GALANG
Dapatkan kiriman artikel terbaru langsung ke email anda!
nice trik sob..thanks ya dh sharing..hhe..jangan lupa jga komentar balik di blogku ya sobat
soutboxnya mana gan?
ane ki$$ ya :D
Salut
Beragi memang indah
Terima kasih ya sob :)
Salam sahabat
Bagus dan memberikan informadi bagi saya jadi lebih diharuskan untuk memahami kode kode yang ada
Oh iya dah saya follow thanks ya
FOLLOW BACK GAN GALANG..
hahah okey,,mksh sob infonya,,,ttrick ini udah nacep di blog saya :)
kk kalao bikin chatbox yang ada backgroundnya kea apa caranya kk mohon di kasihtau caranya....
and FOLLOW BACK
mantap gan,,,, ane dah pasang,,,cek dimari, thx ya gan. ^^
nanya nie gan'
gimana ya klo show hide na dri bawah???kya chat facebook gtu" hehehe
thank dlu infox. :)
Makasih Mas, ini sangat membantu saya..maklum masih pemula...heheh
thanks gan dah beri ilmunya.. :)
ijin copas yah,
maklum masih newbie
@husni_fadillah:ok copas aja asal kasih link sumbernya aja...
keren,,, cara ganti smiliesnya gimana?? kayak yg di blog ini, soalnya lucu
ijin sedot gan :D
gan maaf tolong di cek di http://mbahtrik.blogspot.com/ karena punya saya gak mulus padahal sudah ngikutin caranya seperti yg di atas
thx ya mas...ini sangat banyak membantu saya...tp yg saya copy sptnya ga ngefek ya...tdk ada perubahan untuk sharing is caringnya.
http://decomile.blogspot.com/
ini blog saya sdh saya ikuti semuanya dan hasilnya biasa aja...ga ada perubahan...mohon bantuannya ya...thx
Kunjungi blog ane yg newby ya gan...
http://rodelaide.blogspot.com/
bagus infonya sob ,jangan lupa mampir yaaa...http://kink-exclusive.blogspot.com/
oke, mas mksih tutorialnya
templatenya keren :D
http://dunia-android21.blogspot.com
makasih kang infonya
http://adutburza.blogspot.com/
ww.giribig.com
duniagame.info
idcheat.com