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 berminat memasang Slide Out Navigation pada blog anda, ikuti langkah-langkah berikut.

• Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.
• Copy dan paste kode di bawah pada content HTML/Javascript.

<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/AVvXsEjAIKTblasn6PJx6HIvwMNpP4rkxF-Q9oXdEOmN4UxHmNK4VrW-HXsTdZ_CglETgDY1ZC7jTM4b3Q_xHZfSiqzPw2Qw0GexqI62GW003Aefc0vhbYxSUDN4VrTZiWNcIziG44MUXV1ftm4/s400/rss.png); } ul#navigation .facebook a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5-qk5R99fLNm_wopjD6eAqpKsY_Frc4fbo6uThnK_CiTbTBGMXajlBzI45766S1ZYsncsL4LXiw0gIwTu1e2SII6V5EFjNVkw2j-ivmR5GVa52g0tUYpjrXxyvdVStuNCauLkbJc4tY/s400/facebook.png); } ul#navigation .twitter a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8u7EaVnA6iXLldG0tRj2kTkExP0Cvo8Xtopr3t9d7aLqNBRBIRDiO_W4vUsoTA4MeXFepCVyPseq7gfXFTkBI5rFQJz-78UzOP_L-Snta_YuVtC5PIwJkMst3baHUTiBSMeH9SKiSn4A/s400/twitter.png); } ul#navigation .about-me a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibWI1iVwMhEyUHj_SHYBYC3Wh68Ucy80_XUbk8czXFh7kfirV_4WreWafmBeK-SCRf6pbB8gYPOiXid2WCOC4awoLOImxwGM4sLz6r8tMgFTmcl6Dn1ZJPQcTu_1dF-333k0WeKzvRKnM/s400/photo.png); } ul#navigation .e-mail a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWmNJtk838FFCK7X7flCS35RnAd8XA1gCps_EpJE-Uqq5kZdkwoZ90r7pI6aM-mKf5dPU39V5KN_4hZL3S0_8HnFYJ8Vg9l_jAtYBG56ykegSYi8GBhcXi3-J7Fbe5G-7gDm4NGiWO7pE/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>

Catatan:

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.

Akhir sekali, klik Save. Selamat mencoba...