Cara Memasang Slide Out Navigation Floating diatas Blog

Tweet

Share

Najibblog, Oke setelah Offline beberapa waktu, kali ini saya akan Posting memasang Slide Out Navigation Floating diatas blog, langsung saja saya terangkan cara membuat Slide Out Navigation Floating diatas blog seperti yang  sobat lihat pada blog ini, Ikuti langkah langkah seperti di bawah :




Langkah 1

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

langkah 2

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(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-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, edit kode background-color:#E7F2F9; sesuai keinginan.

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

3. Untuk memasukkan ID bagi akaun Facebook, Twitter , RSS Feed, Profile dan E mail anda, edit kode yang di bold dan berwarna hijau sesuai dengan kepunyaan anda.

Jangan lupa Klik Save.... dan jangan lupa koment yach.hehe.......

Subscribe To Get FREE Tutorials!

Related Post: