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



Posting Komentar

10 Komentar

Unknown mengatakan…
BAGUUUUUUUUUUUUUUUUUUUUUS
Wilianto Bagus mengatakan…
Trik BACKLINK LEBIH SIMPEL, OTOMATIS, GRATIS, TANPA KONFIRMASI, SEKALI KLIK LANGSUNG TERPASANG....!!! Perhatikan contoh berikut :

1. Coba anda klik link berikut, BACKLINK GRATIS
2. Maka link Blog yang sedang anda kunjungi ini langsung terpasang di blog " BISNIS NEWBIE " secara otomatis!

Anda menginginkan juga Backlink otomatis seperti tadi...?? ikuti langkah2nya, klik SEO Newbie
Anonim mengatakan…
Permisi...salam kenal ya..

disini ada trik supaya loading blogspot jadi super cepat ngga ?

Terima kasih sebelumnya..
Harys mengatakan…
@pulsa-24
salam kenal juga
ini gan cara meringankan blogg

http://bloggersejutaumat.blogspot.com/2011/01/cara-meringankan-blog-dengan-jquery.html
Rully varadita mengatakan…
ijin copas gan......
Harys mengatakan…
@Rully Silahkan gan... tp di link ya sumbernya.. :)
ppob mengatakan…
ijin copast juga gan . .
taufik zain mengatakan…
gmna caranya mempbuat blog yang bagus dari awal
johan mengatakan…
thanks tipsnya, gimana bikin berat apa g?