Saturday 7 August 2010

Membuat Show Hide GuestBook

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/



14 komentar:

tony 7 August 2010 at 05:22  

hehe ..
thanks ya ..
rupanya, kode jg yang di pake, haha ..

makasih banyak lohh ...

candez 7 August 2010 at 05:41  

Biyuh ruwet bgt code ne.....

Ratna Purnama Sari 7 August 2010 at 05:47  

@toni>> heheh,...bisanya bru segithu
besuk diedit lagi

@cadez>> wkwkwk,...kui rung sepiro.o mas......
drop-down menu seng paling mumet kodene xixixixi

tony 8 August 2010 at 22:09  

yang warna hitam bagus tuh ..
hehe ...

okan 23 November 2010 at 21:24  

nice tips....

numpang nyerap tipsnya yah.....

saya sudah follow and networkblog sukses.....

ditunggu kunjungan baliknya.....

sukses selalu...

Řĩźķŷ ĀȑȉŦ Ŧāưƶļ 4 January 2011 at 03:18  

COPY PASTE SCRIP GUEST BOOK DISINI

maksudnya apa yah....

BLOGGER PEMULA 10 January 2011 at 18:18  

kakak ku yang cantik,aku bingung ama KATA yang di tanyain ama kak rizky arif fauzi,itu maksudnya apa?

angga rangkuti 10 January 2011 at 19:06  

ohh iya aku baru ingat,kk @rizki arif fauzi:klo mau dapet tu script kode kk harus daftar di http://www.cbox.ws kk klik tulisan sign up dulu,klo udah isi formulirnya klo udah semua nya di isi klik "create my cbox!"lalu kk cari kata publish di atas klo ketemu klik dehh,klo udh cari "copy to clipboard"nah di dalam copy to clipboard lh scripth nya itu,lalu tinggal copy dehh,kemudian pasang di widget nya kk ratna,selesai...kunjung baligh blog ku ya http://www.angga-vengeance.blogspot.com

gembel 14 March 2011 at 18:51  

makasih tutornya saya ambil :D

kangkam 24 March 2011 at 23:48  

sukses, tutornya dah dicoba.
dah cantik, pinter lagi, keren lah

tengkyu deh :)

Fajri 13 June 2011 at 03:15  

Tips And Trick Fajri For World

http://www.hatakefajri.co.cc

Salam kenal & kunjungan balik

Okey......

full album 15 June 2011 at 01:40  

nice posting... and very useful.. thanks

Edward Marshal Sihombing 7 September 2011 at 16:22  

TOLONG PENCERAHANNYA TENTANG "COPY PASTE SCRIP GUEST BOOK DISINI"

DIMANA AKU DAPAT SCRIPT GUEST BOOKNYA ?

TRUS BLOG BERTABUR BINTANG KU GAGAL TOTAL...
MOHON BANTUANNYA KAK RTN....

Post a Comment

  © Ratna-Always For You The Transformers by Blog Tips And Trick 2009