Memasang Slide out navigation floating di atas header

Untuk memasang Slide Out Navigation floating pada sebelah atas blog seperti yang anda lihat pada blog ini, hanya ikut beberapa langkah yang mudah di bawah.




Langkah 1

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

langkah 2

Copy dan paste kod di bawah pada content HTML/Javascript.

Spoiler:

<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/AVvXsEimOQ3nL8HisteKFyMOgrZ7swqB6mB5VR8A0k9DOcpLa8uctvb-nM3p1UxufaDQDhtUwWFVFE-Zedkr_4KljWvIRpk1ci93RvbBuvEpf9ynzUaNLXxlqyV-i98qNQKXfEe9TpzGCIihJ_M/s400/rss.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcTLf0qH06v3PwRJ7gtqmGO2wWHxzBIhR9vYM33XVkqUCrAn8IDTQQL-KOikIbUFWSKB0jy5WnYjjnQd1ym0rtxqe-yRA3F7EMee98HhrtMUM_w50rAmIHxdTDDvmnwMtDCQAAwseTfr4/s400/facebook.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0KRCh0WsL9iNj0nkYDs4fMdJZXQi1MAMPDS2cZDreHr4ipfv-tS2JiM0lXHKAI_eaN5D73M8FZHeR36wcFm5y6IDdzwGKzRtJXxDoacWVwnno7gM5my8BFTe_URXZaIXuZrjYW9hXLKk/s400/twitter.png);
}
ul#navigation .about-me a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbYYI5OjHtSNvpFuBSwkAgMnU-jl0tDq35SEOBZy2iC8Zg57wjhucAL9MhzP-2p_tkqcsbUHi3X3RcjeDt72DFrwJtOjemfbsM7TkR2yu97n9-MV7ncsM35HCrOyn3NJOq8J7kzYCmU5c/s400/photo.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipvEB57lRyU7snDS7oXKQc43pHBlcNHPDujL38SePo_MVuSiNuiMTTdYmKMAm-OZfSNUcBJdkG7Ca-mGEj-eQgPbQ_3yyGfcLRxsbHVZOPWnnkHVhaIU-S90ehUP9Taph-WRZVLY1pw1M/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>

1.Untuk mengubah warna background, sila edit kod background-color:#E7F2F9;

2. Untuk mengubah warna tulisan, sila edit kod color:#60ACD8;

3. Untuk memasukkan ID bagi akaun Facebook, Twitter , RSS Feed, Profile dan E mail anda, sila edit kod yang di bold dengan warna merah.

Akhir sekali, klik Save.

Sila drag kotak Jquery Slide Out Navigation dan letakkan di bawah post jika terdapat tanda yang keluar pada efek tersebut.

Jika anda ingin mengubah icon, anda boleh dapatkan icon-icon yang menarik di Dryicons.com