I'M OFFLINE !
Give Me Ur Words

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>


** Hijau- Warna background dan border
Oren- Navigation untuk gambar. Pastikan nama oren atas sama dengan oren bawah.
Ungu- Background tab navigation.
Biru- Url tab navigation.
Underline- Title navigation tab


4. Save . Jangan lupa (^-^)

Post a Comment

5 comments:

Zaza said...

ehehe. .dah ada tuto nye la. .thnks. . ^^

shera said...

yey ! jadi lagi ^_^

Miss Lovouis said...

@Che Azza Utsukushii Ur qc dear =>

Miss Lovouis said...

@shera Alhamdulillah . ^_^

yaya said...

miss , yaya try tapi tak jadilah .. yang LINK tu yaya tak berapa paham sangat .. tadi dah buat .. tapi tetap tak jadi ..

Fully edited by Miss Lovouis 2013 Copyright