Cara Membuat Navigasi Share Menu diatas Header

Seperti postingan saya sebelumnya, tentang Cara membuat Navigasi Menu Share di sisi kanan maka sekarang saya akan mencoba berbagi lagi dengan kawan yaitu Cara Membuat Navigasi Share Menu di atas Header :z
Untuk Demonya kawan bisa lihat disini 
Bagaimana ingin tahu cara membuatnya :r
Caranya sebagai berikut :

1. Masuk Account Blogger dengan ID kawan
2. Pada Design / Perancang Template pilih Tambah Gadget  
3. Copas Kode berikut kedalamnya

<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:transparent;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #FFF;
-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;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#699ab8;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#FF0;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5au3MiQKW8z4CqnHGacQ4vyPLbRrBxWhxpgrO6IxfA5PnX5aUaCWRDl28iMe8e-2lnce_z9wva-JheyD2a_xUPOl2I53_SSDNnM1cTkDJw97ly3SbEZ66FEf8oeRXOkYcfDY2jH8fFvg/s400/rss.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7s6vfJCtWIoRvcv4XOhvFHA-nJAOQEC1mAwBvTts4gck-BetNpVt_KjNQOIxG45OaD8FYY60CmlI4xV6LAatXvrmNMkQttDdlmn4yGYJQ-IIYaPT_rO4t9_aDWAhFpqmCDA74tAWJO_I/s400/facebook.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicoe29a_0FpAD_chZSryhCuI8j-DsXa_pImuKB-746jL7BTBl5OH8c0XYI50bzlqaaj-FJkTmIeesW3c0hMzDPposyEz9foMlL1njsgbE7xJjmGmb-4HczRVIQYHrsW5rW526rtcj0xbE/s400/twitter.png);
}
ul#navigation .profile a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW2LCsVhjpzDDRWis6Zrg95_Vm4D-_BMO4dtQybmlEsD79wpeVSeHB_eEbZwnY5FkI9MmvxpXwDCt6kIwmOHB2ZiaShcLd1BwIgZCEnWahZdlRzuF3citGThp6k-ElCplDYm0189unStg/s400/photo.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNep83T17wYD29i3QI0GPl4odyFVGO4a4xPNjwhQ6b4jl9qZ7BmS_oAS0B2M4Lt7JkOQeCuQ1IgAuJGFuTGgmUQKBNSCCx7EyI_4QnxJxTjGJtymYQtNXrKbgFtFKJ1aG1nx4YjSUobhU/s400/mail_edit.png);
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
<ul id="navigation">
<li class="rss"><a href="http://info-blogbego.blogspot.com/atom.xml" target="_blank"><span>RSS Feed</span></a></li>
<li class="facebook"><a href="http://www.facebook.com/KASTAONE" target="_blank"><span>My Facebook</span></a></li>
<li class="twitter"><a href="http://twitter.com/KASTAONE" target="_blank"><span>My Twitter</span></a></li>
<li class="profile"><a href="http://www.blogger.com/profile/14829445231709686413" target="_blank"><span>My Profile</span></a></li>
<li class="e-mail"><a href="https://mail.google.com/mail/u/0/?hl=id&shva=1#inbox" target="_blank"><span>My E-Mail</span></a>
</li></ul>

• Ganti Link atau URL saya dengan Link kawan 
• Masalah warna silahkan kawan menggantinya sesuai keinginan
• Simpan Template kawan dan lihat hasilnya