TUTO : SLIDE DOWN NAVIGATION TAB

Assalamualaikum

Peace petang semuanya (n_n)v

Hari rabu hari tu , miss direquest oleh sweety bawah ni

Widget tu , digunakan oleh miss untuk page.

Widget tu jugak boleh digunakan untuk letak ape2 link.

Contoh : Link FB / Fanpage / Twitter and so on.

Uk , so now miss share dengan lorang k . Care nak buat widget tu.

1. Dashboard ke Design > Klik Add a Gaddget

2. Scroll cari HTML/JavaScript dan klik.

3. Copy kod bawah ni dan letakkan dalam kotak HTML tadi . *kalau da ade kotak HTML yang lain sebelum ni , boleh guna jugak.

<style>

ul#navigation {

position: fixed;

margin: 0px;

padding: 0px;

top: 0px;

left: 0px;

list-style: none;

z-index:999999;

width:621px;

}

ul#navigation li {

width: 103px;

display:inline;

float:left;

border:0;

}

ul#navigation li a {

display: block;

float:left;

margin-top: -2px;

width: 100px;

height: 25px;

background-color:#ffffff;

background-repeat:no-repeat;

background-position:50% 10px;

border:1px solid #000000;

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

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-bottom-left-radius: 10px;

text-decoration:none;

text-align:center;

padding-top:80px;

opacity: 0.96;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

ul#navigation li a:hover{

background-color:#ffffff;

}

ul#navigation li a span{

letter-spacing:2px;

font-size:13px;

color:#60ACD8;

font-family:Arial;

font-weight:bold;

}

ul#navigation .tuto a {

background-image: url(http://i.imgur.com/Nflfh.png);

}

ul#navigation .info a {

background-image: url(http://i.imgur.com/fEPHs.png);

}

ul#navigation .miss a {

background-image: url(http://i.imgur.com/ZaLVn.png);

}

</style>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">

</script>

<script type="text/javascript">

$(function() {

var d=300;

$('#navigation a').each(function(){

$(this).stop().animate({

'marginTop':'-80px'

},d+=150);

});

$('#navigation > li').hover(

function () {

$('a',$(this)).stop().animate({

'marginTop':'-2px'

},200);

},

function () {

$('a',$(this)).stop().animate({

'marginTop':'-80px'

},200);

}

);

});

</script>

<ul id="navigation">

<li class="tuto"><a href="http://lovoiustory.blogspot.com/p/t.html">Tutorials</a></li>

<li class="info"><a href="http://lovoiustory.blogspot.com/p/i.html">Info to YOU</a></li>

<li class="miss"><a href="http://lovoiustory.blogspot.com/p/about-miss-lovouis-holla-korunk.html">Miss Lovouis</a></li>

</ul>

<div class='clear'></div>

<span class='widget-item-control'>

<span class='item-control blog-admin'>

<a class='quickedit' href='http://www.blogger.com/rearrange?blogid=3881834237447415706&widgettype=html&widgetid=html8&action=editwidget&sectionid=lsidebar' onclick='return _widgetmanager._popupconfig(document.getelementbyid("HTML8"));' target='confightml8' title='edit'>

<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>

</a>

</span>

</span>