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.

Kali ini saya akan membagi widget memasang slide out navigation floating pada header. Memang saat ini sebagian besar templates sudah memasang widget ini, namun banyak juga blogger yang belum terdapat widget ini. 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 Navigation pada blog sobat, ikuti langkah-langkah berikut.

1. Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.
2. Copy dan paste kode di bawah pada content HTML/Javascript.
3. Save dan Lihat hasilnya.

Lihat Script:

><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/AVvXsEgpCxJ1MKa0Y4RbwN9lDBh7caCmDEFnDU0q89rhDjCgqHTzCNIly70tu9Bj2geqOWqWBtPwXx8SaWCysj0Ds6avKC9sPyJvU-LGwUSK61yXTfFC9l7zDSqo1lmq0fsE-G07kTczOerk76U/s400/rss.png);

}

ul#navigation .facebook a {

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

}

ul#navigation .twitter a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-nlOu37hIW-X4-m5UJjGcvMto7RDKQw7dv8E5ASvN2OKrYvbNiaQEQXmMYBro3Vduq7ogO-McRu3PP4txdoDAtdqkbKiSStexh5dUFlfS-42ZNtWxYb0NcgkcC0MRKJ6vBvsA60bxXDM/s400/twitter.png);

}

ul#navigation .about-me a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjga2vYbFDRyHYMiWgAteOdvAeDvASjA_rk9S_zby-4oYwPhxwHHX2RYm8Rjq8hj01dY19v5GZcmPoo0p4lSjxeaOmCrw21v9kopp2hUACVS392pteCt9X6jY75oL-OPD85WlOK_yCqS0s/s400/photo.png);

}

ul#navigation .e-mail a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZYpjxkt-C19s_uuTEBp_v0rJgSJLbBJT1xdOSRB3J8wfBoIbUT0s2wQdfciynGQvyqid9I_ADw-QhrLgZFiZtxuuwMtTdUuvGKIMdAhBudVLqa2ai2KkA0x2hlgwJayy0IC24vmTWWS0/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>