Pasang menu ini di blogmu.


Masuk ke EDIT HTML.

Copas kode berikut diatas ]]></b:skin>
ul#navigation{
position:fixed;
margin:0px;
padding:0px;
top:0px;
right:10px;
list-style:none;
z-index:999999;
width:735px;
font:normal 11px Arial,Sans-Serif;
-webkit-animation:2s fxhompinav ease-in-out;
-moz-animation:2s fxhompinav ease-in-out;
-ms-animation:2s fxhompinav ease-in-out;
animation:2s fxhompinav ease-in-out;
}

ul#navigation li{
width:103px;
display:inline;
float:left;
margin:0 0 0 2px;
}

ul#navigation li a{
display:block;
float:left;
margin-top:-78px;
width:100px;
height:22px;
background-color:#111;
background-repeat:no-repeat;
background-position:50% 150px;
border:2px solid #e6e6e6;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
-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;
border-radius:0px 0px 10px 10px;
color:#ccc;
text-decoration:none;
text-align:center;
text-shadow:0 1px 1px #000;
padding-top:85px;
-webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
-moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
-o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
}

ul#navigation li a:hover{
margin-top:-3px;
background-position:50% 10px;
color:#fff;
position:relative;
}

ul#navigation li a:hover:after{
content:"";
width:0px;
height:0px;
position:absolute;
top:100%;
left:45%;
margin-top:-10px;
border-width:5px;
border-style:solid;
border-color:transparent transparent #e6e6e6 transparent;
}

ul#navigation li:nth-child(1) a{
background-image:url(http://4.bp.blogspot.com/-Yofmy0GpcY0/TtLyWnIr0jI/AAAAAAAABYQ/di5O82hzbrA/s1600/home.png);
}
ul#navigation li:nth-child(2) a{
background-image:url(http://2.bp.blogspot.com/-2OSziw4y00Y/TtLybmgNpbI/AAAAAAAABZA/CfXysrknh5k/s1600/user.png);
}
ul#navigation li:nth-child(3) a{
background-image:url(http://4.bp.blogspot.com/-PafE8z-wPaE/TtLya7QCLRI/AAAAAAAABY0/2ggfAcDdL4c/s1600/search.png);
}
ul#navigation li:nth-child(4) a {
background-image:url(http://4.bp.blogspot.com/-70Y4BlTmU2k/TtLyY5xd4wI/AAAAAAAABYo/3f2DFCIXHSY/s1600/photo_camera.png);
}
ul#navigation li:nth-child(5) a{
background-image:url(http://3.bp.blogspot.com/-5gyngAu_azs/TtLyaHMRCpI/AAAAAAAABYs/njvXEAaM4AM/s1600/rss_feed.png);
}
ul#navigation li:nth-child(6) a{
background-image:url(http://1.bp.blogspot.com/-B6GMO8E3wCQ/TtLyXVvr9lI/AAAAAAAABYY/s5EbibQXFGE/s1600/ipod.png);
}
ul#navigation li:nth-child(7) a{
background-image:url(http://3.bp.blogspot.com/-m9LeNCW7A4s/TtLyYIsDygI/AAAAAAAABYc/TBmNRPoQZ3s/s1600/mail.png);
}

@-webkit-keyframes fxhompinav{from{margin-right:-1000px;} to{margin-right:0px;}}
@-moz-keyframes fxhompinav{from{margin-right:-1000px;} to{margin-right:0px;}}
@-ms-keyframes fxhompinav{from{margin-right:-1000px;} to{margin-right:0px;}}
@keyframes fxhompinav{from{margin-right:-1000px;} to{margin-right:0px;}}
Copas kode berikut diatas </body>
<ul id='navigation'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Search</a></li>
<li><a href='#'>Photos</a></li>
<li><a href='#'>Rss Feed</a></li>
<li><a href='#'>Podcasts</a></li>
<li><a href='#'>Contact</a></li>
</ul>
Klik Save.

2 comments

20 Desember 2011 16.25

cara ganti link nya gmana ya ... soal nya saya mau pasang juga ./..

20 Desember 2011 16.32

misal ( a href='#'>Home</a )

ganti aja tanda # nya

silahkan dicoba

Posting Komentar

Konversi Kode
[Mulai Senin, 30 Januari 2012] Maaf, Jangan Masukkan Link Pada Komentar