Cara Membuat Menu Slide Indah Di Atas Header

Langkah-langkahnya adalah sebagai berikut:

1.Seperti biasa login dulu ke blog sobat
2.Kemudian pilih menu Template > Edit HTML.
3.Cari kode ]]></b:skin> (Gunakan CTRL+F untuk memudahkan dalam pencarian kode tersebut)
4.Setelah ketemu letakan kode Css di bawah ini tepat di atas kode ]]></b:skin>.

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:#8e8f91; 
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 #1e1d1d transparent; 
} 
ul#navigation li:nth-child(1) a { 
background-image:url(http://3.bp.blogspot.com/-8WwZdGaZDF8/
T1jCmIXy3YI/AAAAAAAAAgs/6YHfBmBXNcM/s1600/home.png); 
} 
ul#navigation li:nth-child(2) a { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Gb-Vi5wlSqRlx51RhJf2NIJFa9DSImkNlvkN5S49Urr8Tp2JXhAfaXy84sjjR2YlAjw0oSuC4hsq7KVdAKiLxkT62ImDMg1EWNrVk2JwU1OyD2ZLZX3kNrfJc4V54F6DcXTsJsofWBI/
s1600/user.png); 
} 
ul#navigation li:nth-child(3) a { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTxWL3mUJdXkl-bESfODQr4X5Ssbm8uDMxMk8brp7nhzPwPXtUYJCuzROj3_rU6GdLB2wdyIdBH_nbR1IDSXGn5tVelXKr0B5kWFIKe0eaWSbsx50ThfVj4uS5jvnTRgPCMLnY3QJLynM/
s1600/mail.png); 
} 
ul#navigation li:nth-child(4) a { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyQLFfRvmxQiH5ckYGJMz9hQXAaOmw70uK0d-XfKBBr1oveNXTCr1mJiQawtTtddSNEZDjn16DvtjASju4X6LpKG-ZWThSq5JtO72NtGaOLIBgmVbZ3RvP16DnHoSX2HkRz9BZAorFzL0/
s1600/rss.png); 
} ul#navigation li:nth-child(5) a { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDVgbbjweGrR0HXMKczu_xc2286T90Q6EpEDUIw7x6Ua9jhSDmDMepe0nGjwA25Cq8P2EkQIM6li07uugzORgZWj7icbaYbH6BpYulfM08idSXw_ZyRk5lieQPXnGhx7TOtTBh_L7dWak/
s1600/link.png); 
} 
ul#navigation li:nth-child(6) a { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwHslWNSolshtL-iBGGB2IxLJi87Jk5kTVkN8ZB-vo5ytTw6BUgQv61DjxOJBzA2tBujH54WgqWbGqgbsrnXWn0w8Cc4uZWQSlnAA4aQzhmf3CTEltMWhfilScguwhktYsMPfvgEvt2qE/
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;} 
}

5.Kemudian cari lagi kode </body> dan pastekan kode Css di bawah ini tepat di atas kode </body>

<ul id='navigation'>
<li><a href='Alamat Url'>Home</a></li>
<li><a href='Alamat Url'>Blogging</a></li>
<li><a href='Alamat Url'>Contact</a></li>
<li><a href='Alamat Url'>Windows</a></li>
<li><a href='Alamat Url'>Link Exchange</a></li>
<li><a href='Alamat Url'>Internet</a></li>
</ul>

6. Kemudian Simpan Template, (selesai dan lihat hasil tampilan blog)
.

Artikel Terkait