Cara Membuat Navigasi Menu Share di Sisi Kanan

Berbicara tentang Navigasi Menu atau Tab Menu pasti kawan sudah tahu, yang biasanya berada diatas posting atau dibawah / diatas  Header dan ada juga yang menaruhnya dibawah posting [pada Footer Blog] itu semua tergantung selera masing-masing, :r tapi sekarang saya akan mencoba berbagi dengan kawan cara membuat Navigasi Menu Share di sisi kanan yang bisa Auto Hidden :z

untuk Demonya kawan bisa lihat disini

Caranya : 

• Saya asumsikan kawan sudah berada pada Design / Perancang Template 
• Tambah Gadget atau HTML / JavaScript
• Copas Kode berikut kedalamnya

<style>
ul#navigation1 {
position: fixed;
margin: 0px;
padding: 0px;
top: 100px;
right: 0px;
list-style: none;
z-index:9999;
}
ul#navigation1 li {
width:100px;
border:0px;
display: block;
padding-top:1px;
padding-bottom:1px;
}
ul#navigation1 li a {
display: block;
margin-right: -2px;
width: 100px;
height: 70px;
background-color:transparent;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #FFF;
-moz-border-radius:10px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-khtml-border-top-left-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation1 .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5au3MiQKW8z4CqnHGacQ4vyPLbRrBxWhxpgrO6IxfA5PnX5aUaCWRDl28iMe8e-2lnce_z9wva-JheyD2a_xUPOl2I53_SSDNnM1cTkDJw97ly3SbEZ66FEf8oeRXOkYcfDY2jH8fFvg/s400/rss.png);
}
ul#navigation1 .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7s6vfJCtWIoRvcv4XOhvFHA-nJAOQEC1mAwBvTts4gck-BetNpVt_KjNQOIxG45OaD8FYY60CmlI4xV6LAatXvrmNMkQttDdlmn4yGYJQ-IIYaPT_rO4t9_aDWAhFpqmCDA74tAWJO_I/s400/facebook.png);
}
ul#navigation1 .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicoe29a_0FpAD_chZSryhCuI8j-DsXa_pImuKB-746jL7BTBl5OH8c0XYI50bzlqaaj-FJkTmIeesW3c0hMzDPposyEz9foMlL1njsgbE7xJjmGmb-4HczRVIQYHrsW5rW526rtcj0xbE/s400/twitter.png);
}
ul#navigation1 .profile a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW2LCsVhjpzDDRWis6Zrg95_Vm4D-_BMO4dtQybmlEsD79wpeVSeHB_eEbZwnY5FkI9MmvxpXwDCt6kIwmOHB2ZiaShcLd1BwIgZCEnWahZdlRzuF3citGThp6k-ElCplDYm0189unStg/s400/photo.png);
}
ul#navigation1 .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() {
$('#navigation1 a').stop().animate({'marginLeft':'85px'},1000);
$('#navigation1 > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'85px'},200);
}
);
});
</script>
<ul id="navigation1">
<li class="rss"><a href="http://blog-bego.blogspot.com/atom.xml" target="_blank"></a></li>
<li class="facebook"><a href="http://www.facebook.com/KASTAONE" target="_blank"></a></li>
<li class="twitter"><a href="http://twitter.com/KASTAONE" target="_blank"></a></li>
<li class="profile"><a href="http://www.blogger.com/profile/14829445231709686413" target="_blank"></a>
</li>
<li class="e-mail"><a href="https://mail.google.com/mail/u/0/?hl=id&shva=1#inbox" target="_blank"></a>
</li>
</ul>

• Simpan Template Kawan dan lihat hasilnya :# 
• Kalau hasilnya tidak mau Auto Hidden, maksud saya Navigasi tersebut akan masuk ke sisi / pinggir kanan Blog dan akan keluar satu elemen Share kalau mouse di dekatkan pada elemen Share tersebut. [seperti gambar / image disamping] berarti pada template kawan belum berisi jquery, maka tambahkan kode berikut dibawah 

]]></b:skin> atau diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 

• Setting lainnya, kalau kawan ingin biar kelihatan warna background / latar belakang silahkan text transparent berwarna hijau diganti dengan warna kesukaan kawan
• Ganti semua URL saya yang berwarna hijau dengan URL kawan 
• Kalau semuanya sudah okey simpan kembali template kawan