Home » » Cara Membuat Slide Out Navigasi Floating Di Atas Header

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(http://4.bp.blogspot.com/_LZtXSNcp76A/TQO8L8P3ZKI/AAAAAAAABUM/CI6VTjlEZsI/s400/rss.png);
}
ul#navigation .facebook a {
background-image: url(http://1.bp.blogspot.com/_LZtXSNcp76A/TQO8LKKzUVI/AAAAAAAABT0/uDnhDlFgPuA/s400/facebook.png);
}
ul#navigation .twitter a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO8MAfFqUI/AAAAAAAABUU/z1PwLV5UWlA/s400/twitter.png);
}
ul#navigation .about-me a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO9lg8rMiI/AAAAAAAABUk/DwJNZAO8Wnc/s400/photo.png);
}
ul#navigation .e-mail a {
background-image: url(http://2.bp.blogspot.com/_LZtXSNcp76A/TQO9lQ5T9GI/AAAAAAAABUc/Nyk6OTOMOH8/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>
Share this article :

3 komentar:

  1. Keren juga nih sob! Memperberat blog gak ya kira2? :D

    BalasHapus
  2. wow pntes d coba nih sob heheh kunjungan dari ajonksb.com

    BalasHapus
  3. manhtap bikin blog jadi lebih terlihat lebih menarik, ditunggu kunjungannya giribig.com

    BalasHapus

TULISKAN KOMENTAR SOBAT DISINI...
» Setiap komentar yang sobat blogger berikan, adalah cara sobat blogger menghargai setiap kerja keras saya dalam mengumpulkan artikel pada blog ini.
Mohon berikan komentar, baik ataupun buruk tentang blog ini ataupun perihal link yang sudah tidak berfungsi. Terima Kasih.