Membuat show/hide guest book

Alhamdulillah, satu demi satu ku tulis ulang ilmu yang aku peroleh dari senior-senior sebelah. Dan tutorial kali ini aku tujukan buat kawanku Toni, semoga bermanfaat ya.

Disini aku hanya ingin mengedit beberapa saja yang aku anggap mudah karena sekali lagi aku masih juga begitu awam masalah kode-kode javascrip. Tpi tutorial kali ini lebih mudah coz cuma nambah widget aja.

1. Seperti biasanya kalian kudu Log-In dulu dengan ID masing-masing

2. Selanjutnya “Rancangan” lalu “Elemen Laman”

3. Trus “Tambahkan Gadget”

4. Pilih “HTML/JavaScrip”

5. Lalu tambahkan kode dibawah ini :

Kode Disini >>

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:130px;
width:50px;
margin-right:-3px;
float:left;
cursor:pointer;
background:url('http://lh3.ggpht.com/_ILzML2joCeU/TL1YyUv0f6I/AAAAAAAAACA/u6SvrxLTFis/gust%20book%20red.png') no-repeat;
}
.gbcontent{
float:left;
border-top: 10px solid #aa4545;
border-bottom: 10px solid #aa4545;
border-left: 10px solid #fc5050;
border-right: 10px solid #fc5050;
background:#cc0000;
padding:10px;
margin-right:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 50-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" onclick="showHideGB()"> </div>
<div class="gbcontent">

COPY PASTE SCRIP GUEST BOOK DISINI

<br />

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>

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

Kode Disini >>

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh5.ggpht.com/_ILzML2joCeU/TL1YyKEPxeI/AAAAAAAAAB4/EGABQy51Ddg/guestgreen.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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" onclick="showHideGB()"> </div>
<div class="gbcontent">

COPY PASTE SCRIP GUEST BOOK DISINI

<br />

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Kode Disini >>

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh3.ggpht.com/_ILzML2joCeU/TL1YyML9q_I/AAAAAAAAAB8/AEV2Kh1m2D0/GuestPink.gif') no-repeat;
}
.gbcontent{
float:left;
border:5px solid #BF00FF;
background:#FF00FF;
padding:5px;
}
</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" onclick="showHideGB()"> </div>
<div class="gbcontent">

COPY PASTE SCRIP GUEST BOOK DISINI

<br />

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Kode Disini >>

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh5.ggpht.com/_ILzML2joCeU/TL1YyIRfmXI/AAAAAAAAAB0/6HJo2okT8CA/GuestBLACK.gif') no-repeat;
}
.gbcontent{
float:left;
border:5px solid #000000;
background:#FFFFFF;
padding:5px;
}
</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" onclick="showHideGB()"> </div>
<div class="gbcontent">


COPY PASTE SCRIP GUEST BOOK DISINI


<br />

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Kode Disini >>

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:45px;
float:left;
cursor:pointer;
background:url('http://lh3.ggpht.com/_ILzML2joCeU/TL1YyUv0f6I/AAAAAAAAACA/u6SvrxLTFis/gust%20book%20red.png') no-repeat;
}
.gbcontent{
float:left;
border:10px solid #8B0000;
background:#FF0000;
padding:5px;
}
</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" onclick="showHideGB()"> </div>
<div class="gbcontent">


COPY PASTE SCRIP GUEST BOOK DISINI


<br />

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Kode Disini >>

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh5.ggpht.com/_ILzML2joCeU/TL1YyKEPxeI/AAAAAAAAAB4/EGABQy51Ddg/guestgreen.png') no-repeat;
}
.gbcontent{
float:left;
border:5px solid #6B8E23;
background:#00FF00;
padding:5px;
}
</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" onclick="showHideGB()"> </div>
<div class="gbcontent">


COPY PASTE SCRIP GUEST BOOK DISINI



<br />

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

6. Klik "Simpan"

---

---

Tutorial Diatas Di-Ilhami Dari
http://www.ordenaro.co.cc/
http://www.lapar-makan.co.cc/
Dan
http://blog-tips-and-trick.blogspot.com/