Membuat Buku Tamu Auto Hide

Assalamu'alaikum wr. wb.




Setelah mencari-cari akhirnya ku temukan cara meng auto hide buku tamu (menurut bahasa saya). Bagi yang belum mengetahui wajahnya lihat gamabar samping.


Bagi yang berminat baca tutorial berikut ini:

- Masuk Blogger (iyalah masak facebook)

- Ke menu Tata Letak


- Klik tab Elemen Halaman

- Tambah gadget HTML/JavaScript


Masukkan Kode Berikut:

Sebelah Kanan


<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://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.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">

<!-- Ganti ini dengan kode buku tamu kamu -->

<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>



Sebelah Kiri


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:right;
cursor:pointer;
background:url('http://i551.photobucket.com/albums/ii449/Pastagigi/tabs.png') no-repeat;
}
.gbcontent{
float:right;
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.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!-- Ganti ini dengan kode buku tamu kamu -->

<br/>

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


-Klik Save

Beres Deh. Sekian dulu!!


Wassalamu'alaikum wr. wb.



Sumber: Coba - Coba di rumah... Sambil Browsing....

5 komentar:

tovarossi mengatakan...

OOhhh.... ini to caranya, pantes... sekarang udah banyak yang buat shoutbox model gini. Mau coba ah...

thanks bro... sukses selalu n bravo blogger indonesia

30 Oktober 2009 18.12
Moh. Arief Rahman M. mengatakan...

ahh... akhirnya dapat juga caranya... tanx ya!!!

21 Desember 2009 23.23
Tarecha mengatakan...

thanks nih gan infonya.. ^_^

24 Desember 2009 01.56
aris mengatakan...

mantap gan

6 Februari 2011 03.07
aandfx mengatakan...

caranya nulis script/html seperti diatas gmn gan?? aku nyoba posting di sertai script/html kok yang muncul visualnya? nah postingan agan yang di atas kok bisa muncul script/html nya??

mohon bimbinganya gan....

terima kasih bin sukron....

13 April 2011 07.25
:a: :b: :c: :d: :e: :f: :g:
:h: :i: :j: :k: :l: :m: :n:

Posting Komentar

Tuker Link


Kata Mereka

Teman yang Baik

 

[Dilarang Klik]