nie hah lgi 1 tutorial..

tab menu bergerak

1 . Pergi Dashboard > Design > Page Element > Add a Gadget > Edit HTML

2 . Copy paste code ne .

<style>

#container {

width: 100%;

margin: 0px 0px;

padding: 0px 0px 40px 10px;

}

ul, li {

margin: 0; padding: 0;

}

#blob {

border-right: 1px solid #0059ec;

border-left: 1px solid #0059ec;

position: absolute;

top: 0;

z-index : 1;

background: KOD WARNE KOTAK;

background: -moz-linear-gradient(top, KOD WARNE KOTAK, KOD WARNE KOTAK);

background: -webkit-gradient(linear, left top, left bottom, from(KOD WARNE KOTAK), to(KOD WARNE KOTAK));

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

-moz-box-shadow: 2px 3px 5px #011331;

-webkit-box-shadow: 2px 3px 5px #011331;

}

#lava-lamp {

Background-image:url(URL GAMBAR);

float: left;

border: 1px solid #BDBCBA;

margin: 0px 0px 15px;

padding: 10px 3px 10px 0px;

}

#lava-lamp li {

float: left;

list-style: none;

border-right: 1px solid #4a4a4a;

border-left: 0px solid #4a4a4a;

}

#lava-lamp li a {

color: #00000;

text-shadow: 0 0px 1px #81807B;

position: relative;

z-index: 2;

float: left;

font-size: 13px;

font-family: arial, sans-serif;

font-weight: bold;

text-decoration: none;

padding: 0px 20px;

}

</style>

<div id="container">

<ul id="lava-lamp">

<li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li>

<li><a href="http://link-di-sini.blogspot.com">About Me</a></li>

<li><a href="http://link-di-sini.blogspot.com">Blog Tutorial</a></li>

<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>

<li><a href="http://link-di-sini.blogspot.com">KELUAR</a></li>

</ul>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery.spasticNav.js"></script>

<script type="text/javascript">

$('#lava-lamp').spasticNav();

</script>

3 . Ok . korang edit pape yang patut . buat bende ne mmg pening . kene bace betol2 . selamat mencube .

4 . Klaw korang still xpaham meh sini saye tunjukkan lagi .. saye kan abek .. HAHA

5 . KOD WARNE KOTAK tu korang gantikan dengan code warne kotak yang bergerak2 tu ..

6 . URL GAMBAR tu korang gantikan dengan url gambar background yang korang nak . nampak x kat kotak saye tu gambar polka dots kan ?? ha . korang cari lah gambar background die .

7 . Code2 warne korang boleh cari kat sini .

nk bwat tutorial nieh..

ajax float shoutbox

1 . Pergi Design > Page Element > Add a Gadget > HTML

2 . Copy paste code ne .

<div style='display:scroll; position:fixed; top:70px; right:-0px;'>

<!-- Start Ajax Popup Shoutbox by -->

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script>

$(document).ready(function() {

//select all the a tag with name equal to modal

$('a[name=modal]').click(function(e) {

//Cancel the link behavior

e.preventDefault();

//Get the A tag

var id = $(this).attr('href');

//Get the screen height and width

var maskHeight = $(document).height();

var maskWidth = $(window).width();

//Set heigth and width to mask to fill up the whole screen

$('#mask').css({'width':maskWidth,'height':maskHeight});

//Get the window height and width

var winH = $(window).height();

var winW = $(window).width();

//Set the popup window to center

$(id).css('top', winH/2-$(id).height()/2);

$(id).css('left', winW/2-$(id).width()/2);

//transition effect

$(id).fadeIn(2000);

});

//if close button is clicked

$('.window .close').click(function (e) {

//Cancel the link behavior

e.preventDefault();

$('#mask').hide();

$('.window').hide();

});

//if mask is clicked

$('#mask').click(function () {

$(this).hide();

$('.window').hide();

});

});

</script>

<style>

img { border: none; }

#mask {

position:center;

left:0;

top:0;

z-index:9000;

background-color:#000;

display:none;

}

#boxes .window {

position:fixed;

left:0;

top:0;

width:271px;

height:480px;

display:none;

z-index:9999;

padding:20px;

}

#boxes #wanhazelshoutbox {

background:url(BODY/BACKGROUND SHOUTBOX) no-repeat 0 0 transparent;

width:271px;

height:480px;

padding:56px 0 20px 5px;

}

#closesb {

padding:2px 0 0 0;

}

#author {

padding:8px 0 0 168px;

}

</style>

<ul><center> <a href="#wanhazelshoutbox" name="modal"><img src="ICON SHOUTBOX" border="0" /></a> </center> </ul>

<div id="boxes">

<!-- Start Shoutbox -->

<div id="wanhazelshoutbox" class="window">

<!-- Begin ShoutMix - http://www.shoutmix.com/ --><center>

CODE SHOUTMIX

</center>

<!-- End ShoutMix -->

<div id="author">

</div><div id="closesb"><center><input type="button" value="Close" class="close" /><center>

</div></div><!-- End of Ajax Shoutbox -->

<!-- Mask to cover the whole screen -->

<div id="mask"></div></div>

<!-- End of Ajax Popup Shoutbox--></div>

5 . OK . then korang gantikan BACKGROUND SHOUTBOX tu dengan background korang .

6 . Gantikan ICON SHOUTBOX tu dengan icon shoutbox korang .

7 . Gantikan CODE SHOUTMIX tu dengan code shoutmix korang .