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/AVvXsEgXueuvVNWc3YPe73iNgX36OeNJ8lL3SU4cJvkMYaMdLlgllwD-BdcauqpTOBzWOaqqd-YsdI0qr-lYZVZGkDHjryejVYQEO5XH4OM3Kab7SFrZz5IVRAk1991eNceAOoR7jbPLQYkp99A/
s1600/user.png); 
} 
ul#navigation li:nth-child(3) a { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRj0cGXx_t856SvbOts6Bl24soiOmlPa2u_yHXtto9sTdXbmsxvFbolzBg2YI4kuz-jrlR4t8BQ7tSS2KjO-QC1sSz7yIvK8JtVlFMj8wABSNmQ3glaEtWtW6jXVrcJrT3iQOo25qkz58/
s1600/mail.png); 
} 
ul#navigation li:nth-child(4) a { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF5fNQfjyECiqQLCfRCjcfpZm4SRoPIyViHfdu_jg3LnLnazl6h3hdYLBL5AwA_ChLSzmBEohNVjm7zsWUwER4LNSh1qtJ4ChLd_YjRPRmQgCiYAOCQdbu1YXByE7dZFFn_zd3tNSAE7k/
s1600/rss.png); 
} ul#navigation li:nth-child(5) a { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigrjPupOdKimRtJLGonei1p7OqddyaH37dv48AEzFBcWTlYdGFzwMn9qAlRiJTr5QQuef-rWOYVfNatW1_R1F7hCGqSsEkC29_f5YXMI-h9La-DIVeNZKU5BbaYlq3JIttSDkuDDys-WQ/
s1600/link.png); 
} 
ul#navigation li:nth-child(6) a { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh78Ymd_RFR1PLN1MrQFDL6z_m5NIcYST8pmXsQbGCn0b7xXJmtDsMryraoJBd5ec4XnnP03nBPqmtHQXXipMkqnpCGXQ69imlCcPmij3sEQbSBFvVTyxHs9hoJsE2sfn38xYoHD8aycB8/
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)
.