Cara Membuat Widget Social Bookmark Melayang (Efek Mouseover)

Widget untuk berbagi artikel ke layanan social bookmark sudah banyak kita jumpai diberbagai situs.
Efek mouseover artinya kalau mouse didekatkan pada obyek tertentu maka akan menghasilkan efek tertentu .

Cara membuat navigasi social bookmark melayang (floating social bookmark widget) :

1.       Seperti biasa, login dulu ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script widget social bookmark dibawah ini, dan paste pada gadget.

<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:#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuPJzxAu6BgjytqCAHNk9lUYAhh9W7193vyZpwPCeG81fWQqD60u0_F0XMJxWXHymftDm2FWo1RHcg-rXWVtH2dPVEJ09YjKUnr45DtljaTAA35npsti9GGPLjWdLpNRxWieqSQ5UmyVc/s1600/64x64.png);

}

ul#navigation .facebook a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUUHRFTt7BrN41jKuuIeD8UqkguKpcGlWDSrS0YdQTX1RTF5aWbgujHi0YrUSvzH5YyrBtnt0C11jLa-RcuE65fe01n4QZrlvmqIUeC6oKAxh5OrKVsyAJPg1Qw5OpBJqkq7TfD4jEAQ4/s1600/64x64.png);

}

ul#navigation .twitter a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYPQX-g_1uIM7UjhAw6Haph7CVuLhUbxQlMfLK0ZolAkScMBtWqLERiHxqZJGyzdj2GPlHP-MYVhFnQDxeCt0qgTtvTgQF45sgAvnE4wkRoip_2x7EuacCspixcTVEmpVP7jRC4ofaHZI/s1600/64x64.png);

}

ul#navigation .googlebookmarks a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8-q3vQSuH3jU75iJ1EHkniKw8KK46pKgphyPvTuqgPHS2Pg89GlR8uxZIqLCNsk_IJm9Wx9p_HMbkLK3zRWDrzjN_3A1S2ift3K76NT5bu7VbeMRn3T2czaUFDaMABhB50JDheVcFIFU/s1600/64x64.png);

}

ul#navigation .e-mail a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIzWn7szarKSF1XogyEaymy8LKQ-tV5ZAXDF3TSb78KkOtmEpaYvz9zJQriTu2W3F7ZDsQpRpWaSvtTRox1NGYeTkff_4cXaJnB4RonJ3s5O7tl_c3-HJBX99qgvZ-YMjBqRBmgi0qjnQR/s400/yahoo_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>

<ul id="navigation">

<li class="rss"><a href="http://YOUR-BLOG.blogspot.com/atom.xml">RSS Feed</a></li>

<li class="facebook"><a href="FACEBOK-PROFILE">Facebook</a></li>

<li class="twitter"><a href="TWITTER-ACCOUNT">Twitter</a></li>

<li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li>

<li class="e-mail"><a href="<div style="color: red;"YAHOO!-ACCOUNT">Yahoo!</a></li>

</ul>

4.       Silahkan edit link akun social bookmark yang ada pada script, sesuai dengan akun social bookmark yang sobat miliki.

5.       Simpan / Save gadget 

Posted in: Trik Blog