Tutorial : Float Navigation

10:09:00 PM

 
 
 
 Preview : Copy code dibawah dan paste di SINI
1. Klik SINI dulu :D Sedekah sikit. Tapi, ikhlas ye ^_^ Then, buat la apa yang korang suka.

2. Dashboard > Layout > Add A Gadget > HTML/JavaScript

 


 



Klik untuk tumbesaran sihat lagi kuat ^^ Rawrrr :) 

 

3. Copy code kat bawah ni and then paste kat HTML/Javascript tadi
<style>
ul#fafa-navigation {
-webkit-transition: .5s;
-moz-transition: .5s;
position: fixed;
margin: 0px;
top: 0px;
list-style: none;
z-index:999999;
width:600px;
}
ul#fafa-navigation li {
width: 104px;
display:inline;
float:center;
border:0;
}
ul#fafa-navigation li a {
-webkit-transition: .5s;
-moz-transition: .5s;
display: block;
float:left;
margin-top: -2px;
margin-left: 3px;
width: 70px;
height:0px;
background-color: #fff;
background-repeat:no-repeat;
background-position:50% 5px;
border:3px solid #ffcccc;
-moz-border-radius:0px 0px 20px 20px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-khtml-border-bottom-right-radius: 20px;
-khtml-border-bottom-left-radius: 20px;
text-decoration:none;
text-align:center;
padding-top:30px;
opacity: 0.96;
}
ul#fafa-navigation li a:hover{
background-color: #ffcccc;
}
ul#fafa-navigation li a span{
letter-spacing:1px;
font-size:10px;
color:#999;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:normal;
text-shadow: 0 -1px 1px #fff;
}
ul#fafa-navigation .rss a{
background-image: url(http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic019demoji_11993130decoojp.gif);
}
ul#fafa-navigation .facebook a {
background-image: url(http://i257.photobucket.com/albums/hh205/xoxojays/smilies/barbiepink/pic010demoji_7539407decoojp.gif);
}
ul#fafa-navigation .twitter a {
background-image: url(http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic012demoji_11555198decoojp.gif);
}
ul#fafa-navigation .about-me a {
background-image: url(http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic003demoji_15412444decoojp.gif);
}
ul#fafa-navigation .e-mail a {
background-image: url(http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic013demoji_272690decoojp.gif);
}
</style>

<ul id="fafa-navigation">
<li class="rss"><a href="LINK"><span></span></a></li>
<li class="facebook"><a href="LINK"><span></span></a></li>
<li class="twitter"><a href="LINK"><span></span></a></li>
<li class="about-me"><a href="LINK"><span></span></a></li>
<li class="e-mail"><a href="LINK"><span></span></a></li></ul>

merah : url icon - Boleh ambil di SINI
oren : url page. Tak tahu nak ambil macam mana ? Tengok tuto SINI
 
 
Assalamualaikum
Blog Author : FafaKyraa

You Might Also Like

0 Commentor(s)

Assalamualaikum
Feel free to put your thoughts here XD