Auto Hidden Navigasi Menu Share diatas Header

Seperti postingan saya sebelumnya, tentang Auto Hidden Navigasi Menu Share di sisi kanan dan atas permintaan kawan kita pada kotak Komentar yang katanya ke dabling sama Buku Tamunya [ShoutMix] ada  nggak solusinya :z  jawabannya pasti ada :x  dan banyak cara yang bisa kita terapkan, ya hitung-hitung sambil berkreasi. Disini saya akan mencoba kasi contoh yang ringan-ringan saja [karena saya juga Newbie] misalnya :  :r

1. Ganti salah satu Link image [misalnya Image Profil] dengan Link ShoutMix tapi sebelumnya Css ShoutMix disimpan dulu pada Post Editor yang selanjutnya copas Linknya.
2. Pindahkan Box ShoutMix pada tempat lainnya [misalnya pada Menu Navigasi diatas posting atau bikin melayang di sisi kiri seperti Blog ini]
3. Atau yang akan share-kan sama kawan sekarang ini, yaitu cara membuat auto hidden Navigasi menu di atas Header,  :# Demonya kawan bisa lihat disini 

Langsung saja ke cara membuatnya :

• Masuk ke Account Blogger dengan ID kawan
• Pilih Tambah Gadget - HTML atau JavaScript
• 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/AVvXsEjLcB7OU08u8dp7JsmaxfRM1dmQ8oUJHNxL2CaPcxImbHwvEaddPUH6TxyBiHAkYVfYkBaGwDLnL2uqt7Pp6hBMws9_6EfmvVVsPPC3n2TWu0jwEcOQ3gw4zbq75uVRB373ADMv_gV-l4U/s400/rss.png);

}

ul#navigation .facebook a {

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

}

ul#navigation .twitter a {

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

}

ul#navigation .profile a {

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

}

ul#navigation .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() {

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

Mudah-mudahan kawan tidak menemui masalah dan berkenan membantu saya dengan memberikan komentar, karena komentar kawan adalah motivasi bagi saya disamping sama-sama menguntungkan untuk menurunkan pagerank Alexa Blog kita, hehehe memaksa ?!