Auto Hidden 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/AVvXsEjLcB7OU08u8dp7JsmaxfRM1dmQ8oUJHNxL2CaPcxImbHwvEaddPUH6TxyBiHAkYVfYkBaGwDLnL2uqt7Pp6hBMws9_6EfmvVVsPPC3n2TWu0jwEcOQ3gw4zbq75uVRB373ADMv_gV-l4U/s400/rss.png);

}

ul#navigation1 .facebook a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPFC9Gha4TU0KK24sheXE8vrSeC16ZfanpI8bf6bkTJmtrFHNL7FBU080GQDn9t-otFANXSxHt06cYnVaLhP-OuK7I4b0Wat8pm9kQOOAVZ_0W-s24gcwzgVnPj8nJGp8U41GFgsQs3T8/s400/facebook.png);

}

ul#navigation1 .twitter a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitllyUGeiW3PoJ0VETNkgCJXqU30qoIp3C-i2NK1zpma-NFH8OiJMZUbEl39rfeMGIptzQGvxaj5CDwZrCE2pHeDHkkUTrGkxzQksDYjQ72a4gz4UWDwuN4JgrM1Rhccxj5gKHQCBECUU/s400/twitter.png);

}

ul#navigation1 .profile a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_AvJ37Wi3Z9bYPtQLBAQ_0Qprhyphenhyphen669TPaTs2kT6ZaHaPM6WVjSODx0Ih1tJcGvtHIvHmmasLNV09HaybpQgUg03ofQw7HsLq0UdjU9NS-l8rg9UZDoa44keGot6v_Pe07LrVJQNFPAQc/s400/photo.png);

}

ul#navigation1 .e-mail a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8FXs38M3mc51DGrynKuLuqji87ezVZupYhnXVzuPN6upNWvVmMN07OQ04QHMYa1zn1Kfja4mtoBppKzAVwSc-e_YdqEctrbZlMBdMywqF1BuPIzsFsooiRLanYo7EFlLWPp1DwO7n0BI/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://info-blogbego.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 merah diganti dengan warna kesukaan kawan
• Ganti semua URL saya yang berwarna merah dengan URL kawan 
• Kalau semuanya sudah okey simpan kembali template kawan 

Mudah-mudahan apa yang saya sampaikan ini cukup jelas bagi kawan, dan jangan lupa berikan sepatah, dua patah kata sebagai komentar dan jejak kawan agar saya bisa mengunjungi Blog dan membalas komentar kawan, terima kasih