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 :
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/
http://www.ordenaro.co.cc/
http://www.lapar-makan.co.cc/
Dan
http://blog-tips-and-trick.blogspot.com/
Label:
Tutorial Blog
14 komentar:
hehe ..
thanks ya ..
rupanya, kode jg yang di pake, haha ..
makasih banyak lohh ...
Biyuh ruwet bgt code ne.....
@toni>> heheh,...bisanya bru segithu
besuk diedit lagi
@cadez>> wkwkwk,...kui rung sepiro.o mas......
drop-down menu seng paling mumet kodene xixixixi
yang warna hitam bagus tuh ..
hehe ...
@toni>> silahkan ambil
nice tips....
numpang nyerap tipsnya yah.....
saya sudah follow and networkblog sukses.....
ditunggu kunjungan baliknya.....
sukses selalu...
COPY PASTE SCRIP GUEST BOOK DISINI
maksudnya apa yah....
kakak ku yang cantik,aku bingung ama KATA yang di tanyain ama kak rizky arif fauzi,itu maksudnya apa?
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
makasih tutornya saya ambil :D
sukses, tutornya dah dicoba.
dah cantik, pinter lagi, keren lah
tengkyu deh :)
Tips And Trick Fajri For World
http://www.hatakefajri.co.cc
Salam kenal & kunjungan balik
Okey......
nice posting... and very useful.. thanks
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