Cara Membuat Slide Out Navigasi Floating Di Atas Header

Header adalah bagian yang paling penting untuk dipercantik, baik dengan penggunaan gambar yang menarik, background yang proporsional dan tulisan yang komunikatif sehingga pengunjung blog merasa dihargai pas ketika berkunjung ke halaman blog. Pilihan lainnya adalah penggunaan flash, dan digabung dengan javascript untuk memunculkan tampilan yang dinamis dan keren.

Kali ini pilihannya adalah memasang slide out navigation floating pada header. Penggunaan slide ini direkomendasikan, karena selain gunanya mempercantik header blog, kegunaan lainnya adalah untuk membuat anchor link ke kontak online seperti Email, Facebook, Twitter, dan Plurk. Jika sobat berminat memasang Slide Out ini, ikuti langkah-langkah berikut.

1. Login ke blog sobat.
2. Masuk ke Tata Letak
3. Lalu klik Add Gadget
4. Lalu tambahkan HTML/Javascript
5. Copy-paste script dibawah :
   
   

   <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/AVvXsEh4ip9bJB3FfnWkG8-p-9F6ydV2HOo_xueDJ6gfR9GrxOwTlo_SmagaK3ugUmA-VeTCxUd3eFFOAS4OR1ZH3kb1tCVrjAx2Q04mN1E-VhQEN2YG_iQdVmrXIqT96QjH9A-TupMX6CkyCL0/s400/rss.png);
   }
   ul#navigation .facebook a {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeJyGxkt2nAv1wo9KK3LcwN-K4yLy_gEHbtBUfmQETHSt4kskNWEKb3QjBoOjpvnsCgVUh34BOld5VDhNfIDcOg39KdHOeAyI98YUClIF9zCEdS-fLFLi5a59KUii8C8Ge7rl2fdj8SrY/s400/facebook.png);
   }
   ul#navigation .twitter a {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZe-AMAyO4Z_7DXq4vbOJfSHi2xbOgqrl9B5VbBeeoKokWI6YuAfFkN7ptHfDudYrY3xpPyDAgS8xqyYhPZT2fZsHf4kfZH_u3VaMMAGgz6pv852k3c3OjHBmd0HQcB16152IbVb6OqV0/s400/twitter.png);
   }
   ul#navigation .about-me a {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpb7OBG5yAznlBU6XYYJtlwe2ENuhRX_-Q3AIfUXpiLo6XNinB7dfy3LQyAxt1btGEPWUspFDih6N8bqz8AU3feAbDMhb50KNnRyKrEgHR7WqIgbyT2FLbCUZ19Ta1NICtRcGBxT8aJKY/s400/photo.png);
   }
   ul#navigation .e-mail a {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5hZWEbPspJROXeKhloCry7iY6CXql2rJ0T2rJ-Pv2eBW3umvbJ8HbM6-sF0SQYZr5fwNdA_KMypVMsb8YXmOuX69Q74hxWLHmwRYhwJw0EG8KdBfB-mJ2A_ladyeJP_xOaDcS6JPyWak/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-sobat.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>

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 sobat, silahkan edit teks yang berwarna merah.

Good luck...