Selamat datang ke BelajarBlogs...
Home » » Tutorial Buku Tamu Version 3

Tutorial Buku Tamu Version 3

Klik Gambar Untuk Lebih Jelas lagi


Kali ini tutorial memang agak menarik.Buku Tamu ini mempunyai kelainan sedikit iaitu kita letak sahaja cursor mouse kita pada gambar ia akan keluar sendiri.Macam automatiklah,zaman kan dah maju.

Langkah 1

1. Login ke Blogger, Klik Design :


2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;


Langkah 2
Anda perlu copy kode dibawah ini kedalam Widget.


<style type="text/css">

#gb{

position:fixed;

top:20px;

z-index:+1000;

}* html #gb{position:relative;}


.gbtab{

height:150px;

width:50px;

float:left;

background:url('https://sites.google.com/site/jeritanblog/javascript/Chatting.png') no-repeat;

}


.gbcontent {

float:left;

border:1px solid #BB0000;

-moz-border-radius-bottomleft:10px;

-webkit-border-radius-bottomleft:10px;

-o-border-radius-bottomleft:10px;

-khtml-border-radius-bottomleft:10px;

-moz-border-radius-topright: 10px;

-moz-border-radius-topleft: 10px;

background: #000000 url(http://1.bp.blogspot.com/_O84nraTVNhw/TVAOSS5OUpI/AAAAAAAAAPs/SjzZrVNr21w/s1600/api.gif) no-repeat bottom;

padding:10px;

}


</style>


<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);

gb.opened = !gb.opened;

}function moveGB(x0, xf){


var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}

}</script>


<div id="gb">

<div class="gbtab" onmouseover="showHideGB()"> </div>


<div class="gbcontent">

<center>


Letakan Script Buku tamu anda Disini



<br />

<div style="text-align:center">

<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup chattingbox">

<center><hr /><img src="https://sites.google.com/site/jeritanblog/javascript/CloseComment-1.png" /><hr /></center>

</a>


</div>

</center></div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (50-gb.offsetWidth).toString() + "px";

</script></div>


Info :
Jangan lupa tukar
Letakan Script Buku tamu anda Disini dengan script kode HTML anda .

Akhir sekali,semoga berjaya ^_^

10 ulasan:

  1. salam..
    wahh..menarik ni
    boleh lah cuba nanti
    :)

    TQ

    BalasPadam
  2. @zulkbowaalikumussalam..
    boleh cuba..

    welcome

    BalasPadam
  3. cam ne nak dapat kan script buku tu ?? kurang pahaam :))

    BalasPadam
  4. script buku lme tu ltk kt mane?? x phm :DD

    BalasPadam
  5. @i.t.a.h.
    ambik kode lama tu tukar dengan Letakan Script Buku tamu anda Disini

    BalasPadam
  6. masukan kode buku tamu anda di sini

    Kk Kalu Itu Maksud Nya Ap............

    BalasPadam