Contact Us

Name

Email *

Message *

» » Cara memasang widget floating social bookmark efek mouseover

Cara memasang widget floating social bookmark efek mouseover

Cara memasang widget floating social bookmark efek mouseover


Di liburan ini saya akan menerbitkan post tentang "Cara memasang widget social bookmark efek mouseover". Di widget ini letaknya di atas dan bila mouse di arahkan ke widget tersebut akan keluar widgetnya itulah yang dimaksud dengan efek mouseover. Kita telah banyak menjumpai widget ini di berbagai situs. Namun designnya yang berbeda - beda. Sobat ingin tau cara memasang widget ini? Langsung saja kita ke TeeKaaPee:

1. Login pada blog sobat
2. Rancangan
3. Tambah Gadget
4. Html / Javascript
5. Copy kode di bawah ini dan pasang di blog sobat
<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: 90px;
height: 25px;
background-color:#eeeeee;
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;
Baca Juga
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyzi5hknqulRnTtgBh3n7jQLdP6Y9EBbY9npRbPXODJSVhFMhfWPg3UNU6uVsuPKFSBNTO3gbMVqU0_G8qPp_b47rrVKYcDshqv2hPtP-gQJBR39siMzYZEEfAuv4icpGBPXCF6UYF1r9Y/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpMnJ_3ekOasoOrO5pD3J_VrGL8Ha6Xjl_c6CCsSx7kNSBC_3H9EiG5ATsr860gzqyjg6y2W3Hj3DnhXFyMVbLbK76Q3iCsplDAnINNMKKWnWQFFnk0qGdQenwhhkI5vtNyghRko9FLv_9/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-Hc-PGLxsyFKLNdMM3BpM3grZ1GKX-0yEccLv5Es1WATEbgQKf9mww33YMqjCUb1s9nh-Tdy0DuYF4qK5HwHOXWjiz70d54e3kd767509DHPC0ajiw65XGLPsX5KrYtmVdqdalFd6PFh/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi19p_rzIn0H4TGDGogRyR-rVdSCniO96a1bcpEZzl8Ejqk5EWYNJyKOscB95K_U7kDzLIStsFBP9nngm76J9miSpNims-fAxZbO01raR3ZOjhQc8HyN9CZ4s6z7qwCgNdEMB58WSAvLDIB/s400/google_64x64.png);
}
</style>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">
</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>

<br />
<ul id="navigation">
<li class="rss"><a href="http://Blog Kamu.blogspot.com/atom.xml">RSS Feed</a></li>
<li class="facebook"><a href="http://Ganti Dengan Url Akun Facebook Kamu">Facebook</a></li>
<li class="twitter"><a href="http://Ganti Dengan Url Akun Twitter Kamu">Twitter</a></li>
<li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li>
</ul>
6. Simpan dan lihat hasilnya



Back To Top