Wednesday, December 21, 2011

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. Jika ingin tau lebih jelas lagi silahkan lihat demonya Disini. 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;
}
ul#navigation .rss a{
background-image: url(http://2.bp.blogspot.com/_znjmv4LDwck/Sj_axehjkOI/AAAAAAAAA9c/nk9FGYOz-X4/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(http://4.bp.blogspot.com/_znjmv4LDwck/Sj_bXRRRXzI/AAAAAAAAA98/HIXOZAkEyqY/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(http://1.bp.blogspot.com/_znjmv4LDwck/Sj_cLDgz2cI/AAAAAAAAA-E/Nc04OTHnR48/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(http://1.bp.blogspot.com/_znjmv4LDwck/Sj_ak6NscZI/AAAAAAAAA9M/rqTYrs6mybg/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

Selamat Mencoba!!!

No comments:

Post a Comment

My Ping in TotalPing.com
Feedage Grade D rated
Preview on Feedage: web-design Add to My Yahoo! Add to Google! Add to AOL! Add to MSN
Subscribe in NewsGator Online Add to Netvibes Subscribe in Pakeflakes Subscribe in Bloglines Add to Alesti RSS Reader
Add to Feedage.com Groups Add to Windows Live iPing-it Add to Feedage RSS Alerts Add To Fwicki
Ping your blog, website, or RSS feed for Free