Memasang Buku Tamu Show/ Hide Pada Blog
Salah satu sarana untuk berinteraksi antara pemilik blog dengan para pengunjung blog adalah dengan memasang sebuah buku tamu. Dengan demikian para pengunjung dapat mengungkapkan segala isi hatinya, baik yang berhubungan dengan isi blog, maupun hanya sekedar ngobrol atau sekedar say hallo saja.
Yang akan saya bahas kali ini adalah bukan bagaimana cara menciptakan widget Buku Tamu, tapi bagaimana cara menempatkannya, sehingga widget buku tamu ini dapat terlihat/ tersembunyi (Show/ Hide). Jadi Buku Tamu ini akan ditampilkan jika diperlukan saja, dengan cara meng-klik icon/ gambar yang sudah di tentukan.
Cara memasangnya pun cukup mudah, anda dapat nenempatkan kode berikut ini kedalam tag body atau dimanapun anda ingin menampilkan icon/ gambar link Buku Tamu tersebut.
Berikut ini adalah kode lengkap untuk memasang Widget Buku Tamu Show/ Hide :
Yang akan saya bahas kali ini adalah bukan bagaimana cara menciptakan widget Buku Tamu, tapi bagaimana cara menempatkannya, sehingga widget buku tamu ini dapat terlihat/ tersembunyi (Show/ Hide). Jadi Buku Tamu ini akan ditampilkan jika diperlukan saja, dengan cara meng-klik icon/ gambar yang sudah di tentukan.
Demo :
Letakan cursor pada gambar berikut ini, kemudian Klik untuk menampilkan Buku Tamu...
Cara memasangnya pun cukup mudah, anda dapat nenempatkan kode berikut ini kedalam tag body atau dimanapun anda ingin menampilkan icon/ gambar link Buku Tamu tersebut.
Berikut ini adalah kode lengkap untuk memasang Widget Buku Tamu Show/ Hide :
<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 Guest Books atau Buku Tamu anda disini -->
</div>
</div>
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpZoTkO75woBgASUOsBdWSTX6KJyesW4WlIPE45UJiH26llNf1aTmYUHHvb-ljzBQZGqGhgEWzFIAptRyTSTuJa8w2zFT04IBz3kUcPO5q35328UGnMF2iN8qMbIcHA9rgiqjPlLbjxr_W/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>
Selesai...#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 Guest Books atau Buku Tamu anda disini -->
</div>
</div>
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpZoTkO75woBgASUOsBdWSTX6KJyesW4WlIPE45UJiH26llNf1aTmYUHHvb-ljzBQZGqGhgEWzFIAptRyTSTuJa8w2zFT04IBz3kUcPO5q35328UGnMF2iN8qMbIcHA9rgiqjPlLbjxr_W/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>
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon