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

 sebagai berikut   :

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/AVvXsEiEUL28NhikjiK1l3TUTEeizWcUbjecRrjVSIfnfhFmhmLWdx_yuqwWgWl759H8_s8IHz_9tDAqSkQl80XwqvZqrvZvm_o8dRXHTxNIQfwW3dtQ95KU7_FgkbzzUs5lB3GAQ7hUGLaopsE/s1600/64x64.png);

}

ul#navigation .facebook a {

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

}

ul#navigation .twitter a {

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

}

ul#navigation .googlebookmarks a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicNg-IuuBpf5id2-MVhRgFHd2s_Obavby1mshHgVmLQllAzpd-gXxwMaA2LT28D5WLNNjjGg4Py0MjsaEAa4zYvVOC6c5Jp_JKpEjRS3mTZxkDP5YqXUK3bnTc9xg4Vc38OIEX_gYVwyM/s1600/64x64.png);

}

ul#navigation .e-mail a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmG0_G7UK_dltbyls0bpqf2PDSCzJ_1T_Jj06pQV6XMyTSDcpQVVnHsvk5RAv6vGyXB2ii0NckBxAUPj-IRU4t8ScMBNSTLzSyGj840glqS0lFicNid7SC5S6bkaCM8CgdeCNkLHkuFV-Q/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+=500);

});

$('#navigation > li').hover(

function () {

$('a',$(this)).stop().animate({

'marginTop':'-2px'

},100);

},

function () {

$('a',$(this)).stop().animate({

'marginTop':'-80px'

},100);

}

);

});

</script>

<ul id="navigation">

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

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

<li class="e-mail"><a href="YAHOO-ACCOUNT">Yahoo!</a></li>

</ul>

 

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

5. Simpan / Save gadget