Cara Membuat Menu Hidden Keren di Blog V2

Pada Artikel pertama saya pernah Share Membuat Menu Hidden Keren di Blog Menunya sama cuma eefect nya berbeda.

Pertama anda harus Login terlebih dahulu ke akun Bloger anda
Kemudian ke Rancangan -> Edit Html
kemudian cari kode ]]></b:skin>  salin kode berikut di bawah ini ...

ul#navigation {
position:fixed; margin:0px;
padding:0px;
top:0px; right:10px;
list-style:none;
z-index:999999;
width:820px;
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:#9E242C;
background-repeat:no-repeat;
background-position:50% 150px;
border:3px solid #303030;
-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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWvndjRrFzet9JTAB99IpxyPYeabrT2gbTxUYPFJyy8Wf6BprYSkc2DIeLtpnS30EXR2TKmyn3b3xZ20eBCeMfE4yAa0GXRC1Pc4YVVJpovEdmwwRopu8mYnZekXLlyNVWYY_h7TFdo6o/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis2hAHdUrOxRVsvTghYUS7lNa5HLPiPn-Jw5x3sOAYHaew9kM4N4qovFEo3EekaZe5wneu62SCDe02OMT9Uj9zcp4uSuN6Yd-hIYv4HWwpHhuQ_Sw44hXUjda0CbCHt0OzsXiapxKBklg/s1600/user.png);
}
ul#navigation li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgijIfkm0QSoD6FfWhTKab3-X5CgYti1XPsIWmeJ6Xig7m5GnFv0gUXfTYx2YIQkiXhC4HahQOGYWuA5aRd96Gbq-TWecvrglRqXHqIPr3LUjGb-ozla1pfm_HbansTEvS52wv54CelNPM/s1600/mail.png);
}
ul#navigation li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj25g-pS5OvzxyBEJeoedqHxzmE7c3FTjGeIp2ULZABzrkvn_tQErKE7XKZpJ182aBHivledrzzl5Zy0YdCXNsT8f-Ep1KxIswFF4J9ddfQOHRZdqmLlMyVBkwvDYA7EC_g5yxrP4MOCQc/s1600/rss.png);
} ul#navigation li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMlIuBRESyzuWy4XXS7zD8kX3Cl7tM18rvLHLWpJmiXdqHeJJJurShzBlmWV-2qmGsyisJlZB4nQhbGL67hPT6insI0y_tbeJBbAk4eBcN4o4kW1d6ca1-Ab6jD8qUWOpUHXLd1ZYVNk4/s1600/link.png);
}
ul#navigation li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5AS7pb5lclXrG2TG5i2PxIIVzKSU8WOi260rP1PkUL5MAw0hLRXCyhJwaP2oXqym4uA9os_ol_9J8hIM1PqExBD_tfRCGBc9znwgdfkxdV3JfnPMIa3KuVWCDFqRR-mrfVORFAMPz0bo/s1600/color.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;}
}

Selanjutnya cari kode </body> dan letakan kode dibawah ini danletakan diatasnya :

<ul id='navigation'>
<li><a href='Alamat Url'>Home</a></li>
<li><a href='Alamat Url'>About Me</a></li>
<li><a href='Alamat Url'>Contact</a></li>
<li><a href='Alamat Url'>Rss Feed</a></li>
<li><a href='Alamat Url'>Link Exchange</a></li>
<li><a href='Alamat Url'>Color Tools</a></li>
</ul>

Semoga ini Berguna dan Bermanfaat bagi kita semua, Tolong jangan hanya melihat dan mencobanya, komentarnya juga donk biar semangat ...
Jika ingin Copy Paste silahkan cantumkan link sumber yang sudah tersedia di Bawah ini ...
Terimakasih.

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara Membuat Menu Hidden Keren di Blog V2. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="https://bungkaryo.blogspot.com/2012/04/cara-membuat-menu-hidden-keren-di-blog.html" target="_blank">Cara Membuat Menu Hidden Keren di Blog V2</a>

:: Get this widget ! ::

- Reviewer: Unknown - ItemReviewed: Cara Membuat Menu Hidden Keren di Blog V2