Senin, 25 April 2011

Cara Memasang Slide Out Navigation Floating diatas Blog

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEichZkuNSLaDg6Btmkzany8Uf8DUroaoANJX6saeBzSTDf0lqCEFFUUNmBQmJ58UoscuNtuXe5JO8CoYK88Pq0yR40g69ZCWOGvnKTHP7SOj6H_-n7Jq6IPNFYmY-9Q3naq55CMuFQi5z0/s400/rss.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGHpWn7uxx1YsvUtlzqCx4ftIrolJS0FS_gf-Vi_yFODKjUd8i6j1I8Bgcxnfrp0y0bGzdzxBbdtHv3GhIqY6Vo0Sr-t5ApX6ilZgdpX9mfqMH00abIvICDnljmc5F-BCnUJkzsPu1FN0/s400/facebook.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuORwLjQdH11_UICOF9_bkdR6wjtpd0f7dGVjMgeD753cUgut_Z58OOijHmN_AQBVPNLi2mlyJ2ZP8QaT9wSWr-dzMA-8uNq9GxlgiW2cvPWwQm1hnIPEKUFdAygIGtOQYmkUk02-rYR0/s400/twitter.png);
}
ul#navigation .about-me a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLT3no04YE_Crvqj9I9Y2TiFZc5Zkfuy2DbE8Y7vqe3BD5O6uqHux_yCD6C51oZBl5_QmRA1rTYVrq_wHLVke0Az3fa9UeeXOUO8l73RY86kZhQyDc6_lppYe0ELs7YVg7qNI4Fa7I0W8/s400/photo.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAsklc8SlO-7fwXhEA_Ayd3GxfXpeznvUgxrSkaWjKU-Yp49qfJKoL_Q2mIwTtXEuaztXSIjrhwVmGFwX3Gz9TWi-QCEFmdxGcv7HRcHwoWjUMAnCuL4CmXlptkvf4pqchHa2mmsXB7l4/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.

Categories: ,

0 komentar:

Posting Komentar

 
  • Followers

  • free counters
  • Translate this Blog

    English French German Spain Italian Dutch

    Russian Portuguese Japanese Korean Arabic Chinese Simplified


    this widget by WahYou

  • Lihat Daftar Isi
    Klik ~ DISINI ~
    IP