Buku Tamu Show/Hide dari Atas #2

untuk demo Bisa dilihat disini
Bisa dilihat dengan mengklik gambar di samping layar seperti gambar dibawah...........
untuk cara mmbuatnya Cukup Kopi paste kode berikut pada menu  Rancangan, Edit Html, Tambah Gadget, dan Pilih Html/Java 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/AVvXsEiomd6GXaiDQfYSOz2XSEkoHH9tSJznGAYSBwByv8_FW7J8BtvJiX4HrNsAh53Ru-amGl_lZjMluYD3o46beJIKVsYxDKazAmEdtc_Ct1mc_cAj19Zg_TXlUCVePw9yhFP_xfRLDl9T93k/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh89DBhIt8wgR54T_jPIxHkpa0UP2xrZ0lyLpUg3IUfBBwVEbt4vB3L0XCUYb2rM6xty0qcoIikwgWs9dnpA-DP8xWdSFrg5WS3y-rRxI85ga3rypWcWAJjiVS9yPSAFptA8PHXfT6s4RI/s1600/guestbook.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

Simpan........

Membuat buku tamu/shoutbox melayang di samping blog with jquery

Untuk tampilannya mungkin bisa dilihat dan klik gambar disini :

  untuk dara membuatnya yaitu sebagai berikut :

1. Log in blogger
2. Masuk ke rancangan
3. Elemen laman
4. tambah gadget, html/java script
5. Kopi pastekan kode di bawah ini :

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px; right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYEzdyEirRIkKNiwGQoNBloIjEEi_e-tSp-fvfn360MZ90Cjx6l8QaXzlcYywE3GCLuWIs-5KUMdov4uKHeBZQvmX0y_LFLaUX8m770PdeV15UtcyUDdvUVd48zk5_qA_XswNkaW2FBcGx/s1600/papers.jpg
)repeat;
color:#000;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 2px 2px 4px #8bd268;
-moz-box-shadow: 2px 2px 4px #8bd268;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style=" background:-moz-linear-gradient(top, #051547, #999, #051547); color:#6cec17;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 2px 2px 4px #8bd268;
-moz-box-shadow: 2px 2px 4px #8bd268;"> TUTUP BUKU TAMU </b></a></div>

Masukkan script atau kode buku tamu kawan disini

</td></tr></table>
</div>
<script src="http://kangdadang.googlecode.com/files/shouteffect.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCFXg5l-8SEAeX9_XclLk5m71M2ej_Qty3Gi5HAKKMGWbqBsd5qDltys_-FkYL7pQIRfXj1lbmi7G-8pK6pJE0lN70SgAekWMr3fV8DRTPXXbFBm6cjLLcCNyJNimrDyILWT3TFUxGrXE/s1600/TabGBcopy.png" />

</a>
</div>

Masukkan script atau kode buku tamu kawan disini silahkan masukkan kode buku tamu nya disitu,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCFXg5l-8SEAeX9_XclLk5m71M2ej_Qty3Gi5HAKKMGWbqBsd5qDltys_-FkYL7pQIRfXj1lbmi7G-8pK6pJE0lN70SgAekWMr3fV8DRTPXXbFBm6cjLLcCNyJNimrDyILWT3TFUxGrXE/s1600/TabGBcopy.png adalah link gambar, silahkan ganti sesuai keinginan

Jika sudah langsung Simpan..................

dan lihat hasilnya.

selamat mencoba

Buku Tamu Show/Hide dari Atas #1

Untuk demonya bisa dilihat disini

Cara membuatnya :
1. Login blogger
2. Rancangan, Tambah Gadget,  Html/Java Script
3. Dan Simpan kode berikut :

<style type="text/css">
#gb{
position:fixed;
right:450px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.gbcontent{
float:left;
border:2px solid  #0F0;
background:#ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!--  Script Chatbox nya disini -->

<center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a>

</center></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.top = (-400-gb.offsetWidth).toString() + "px";
</script></div>

<a class="west" href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfWJ_loXJ9YKPJzaSjOVVMXw9B6PHqKx9qh5EY1kEInz-6eeQlVJqF3l3SMOu6dgnmm1PQNGcxOSzaI0caZAyDwHGrTQyP2qJpxHemSl5LqHFFLMl33YmCELyBSTIM0TZxJACQYJt6HJs/s1600/Guestbook.png" border="0" /></a>

4. Simpan dan lihat hasilnya