Cara Membuat Buku Tamu Melayang

Kali ini saya akan posting articel tentang pembuatan buku tamu melayang di blogger. shoutmix pada blogger sangatlah penting karena untuk memudahkan para pembaca untuk meninggalkan kesan di blog kita. dan dengan shoutmix kita dapat mempererat persahabatan melalui blog.

adapun caranya :

1. Login Ke blogger

2. MAsuk Ke Rancangan

3. Tambahkan Java Script/Edit HTML

4. Pilih JavaScript

5. Copy Paste CodeScript Di bawah ini.

Lihat Contohnya Disini DEMO

<style type="text/css">

#at{

position:fixed;

right:450px;

z-index:+1000;

}

* html #at{position:relative;}

.attab{

height:120px;

width:60px;

float:left;

cursor:pointer;

background:url();

}

.atcontent{

float:left;

border:3px solid #00FF00;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUrhrA5LX_KDD1XpnUdVe4BMi3x99FN6CFVvVwxi4erJBMUzUYrF4ulzJhf14ZP1MXxN6_Nsv3PlqL_XVu_DX93BXHKP6dKpDgGeYEqLVxMcHSkI_3JQ0SqOWxXDd5zISA7dsMqjPpP0w/s1600/color,graphic,design,wallpaper,aura,wallpapers-781cad833b0039dddc6ad951f017fbd2_h.jpg) #000000 repeat-y center;

-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 #00FF00;

}

</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:url(http://i53.tinypic.com/6gx34z.jpg) no-repeat center;">

lt;br />

MASUKKAN KODE ANDA DISINI !

<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i53.tinypic.com/vvtyc.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>

<div style='display:scroll; position:fixed; top:60px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://b.imagehost.org/0611/buku-tamu.png"/></a>

</div></div></div>

CATATAN :

1. Ganti Tulisan Yang berwarna MERAH dengan Buku tamu Anda

2. Ganti Tulisan Yang Berwarna BIRU dengan Image Jika Mau anda Ganti

Semoga Sukses Selalu