Cara Membuat Slide Out Navigasi Floating Di Atas Header Blog

Langkah 1
Copy kode dibawah ini.

<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:#E7F2F9;

background-repeat:no-repeat;

background-position:50% 10px;

border:1px solid #BDDCEF;

-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:#CAE3F2;

}

ul#navigation li a span{

letter-spacing:2px;

font-size:11px;

color:#60ACD8;

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/AVvXsEh9p53NtcCCpSP98DDYFiBGqsbn0EhH9Ns7IAiR1mCX5QbrkMzak9Mk45fuBTjwvzAZo90hdAdIPBdYafQJwy9cni2l93Cs6K_9PBki_1FbiDfgBpe-VZx5IhGCMAgH5FGB5P4ob3dfc2U/s400/rss.png);

}

ul#navigation .facebook a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9IlZHxgPACCB490n-S5FOwedyHOFOCXCDFgsg_tJ3tHOeR4jj2p63EaZMtbpWhvlEOn9ZvQFOKQxZfePcrqXCp7alLwsMm6USbzP-rBkfXdlZoERa1ZQjVjc0yj_XOJ3vZwTAP8RSF04/s400/facebook.png);

}

ul#navigation .twitter a {

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

}

ul#navigation .about-me a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA8Q-ZK48z-2e9AgAahNj9mX0qhcEAg1SekazPAxyOygIEFy_8dPC-g2seraKyFwtkB_-uOg_uS6pK5cDmuzPFH965d-TU9teLgP73aQAvUn432BpP3iTi8qUkGuvwonqSlbCT3dOznYk/s400/photo.png);

}

ul#navigation .e-mail a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfkxIgd9bWOcX7UCJcNHqnhIeiwu7e4pZwRSpfYtud_94_JVllk-8c3irx13ua7sONhdXNdB37YaKbVfIE00DPiyDYwv1quDbqh7uaZk5je44Q7ZhyKQzKvFNcLR6ZtU48k1s6d90mdRs/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://nama-blog-anda.blogspot.com/atom.xml"><span>RSS Feed</span></a></li>

<li class="facebook"><a href="http://www.facebook.com/profile.php?id=masukkan-ID-Facebook-disini"><span>My Facebook</span></a></li>

<li class="twitter"><a href="http://twitter.com/masukkan-ID-Twitter-disini"><span>My Twitter</span></a></li>

<li class="about-me"><a href="http://draft.blogger.com/profile/masukkan-ID-Blogger-disini"><span>My Profile</span></a></li>

<li class="e-mail"><a href="mailto:masukkan-email-disini@gmail.com"><span>My E-Mail</span></a></li>

</ul>

Tambahan:

1.Untuk mengubah warna background, silahkan edit kode background-color:#E7F2F9;

2. Untuk mengubah warna tulisan, silahkan edit kode color:#60ACD8;

3. Untuk memasukkan ID bagi akun Facebook, Twitter , RSS Feed, Profile dan E mail anda, silahkan edit kode yang di bold dengan warna merah.

Langkah 2

Cara Pemasangan.

1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;

3. Pilih HTML/Javascript;

4. Copy paste code HTML diatas ke dalam Content yang telah tersedia;

5. Akhir sekali klik save.