Floating Social Bookmarks Widget

Floating Social Bookmarks sa mouseover efektom, korisna i primamljiva stvar. Widget kao i svaki drugi samo što ovaj stoji na vrhu stranice i reaguje na dodir miša.

Live Demo

1. Log in na blogger account
2. Design --> Page Elements --> Add Gadget
3. Izaberite "HTML/Java Script"
4. Dodajte kod ispod u HTML i zamenite URL sa vašim facebook, twitter itd. adresama

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/AVvXsEhZjXNg0ce2j0vdfPvpZTXpUcGYZMyceRxvTeevFIucr-m5aR40Kh3SJgti-4uyZcuFDv1JFtEcbF3pxunP8DVYdH75FZbjYK73AAUa1sajVchJ_L3KLth_tlCITb-HDqdvnHINjT4ltBiU/s400/rss_64x64.png); } ul#navigation .facebook a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm0fprO6NTHWQVOaPbl4GfBEQL_JxsZo5WEPBekNCaewaOWFyHpHGMDOSl8EmmK4wuKK1WbV85ssH97UVzDHmIy46FgZj4h6BUqv4ouNcSIamMGh463EbYfZhDpjdGNTKrisw-y330O2pi/s400/facebook_64x64.png); } ul#navigation .twitter a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGyvUCPyaCHTmZYp_eEOofJ-XbJQss7cHNmUKIe_RRqg4562xJQgAt4bubA1MoEl7G-7TY3v6dMwE9J0Rn_XethXAPEqlat3DC7QittSx33pkVQT2f5GNXBMG94jFi_YgNQVttp7W5YVJf/s400/twitter_64x64.png); } ul#navigation .googlebookmarks a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2vzpAMihFTQKYKKhMNfRZYs7q23za5WFKOjpn_DQa45qDXSHYZOi-qjDe0mO-JdKVH8SmNHggfpdBDgb2gOKVSh_I1iOiGNNQN6SS5EmAaCJQseMFcaZdibHpUOihSFEprOqbUxn0z91T/s400/google_64x64.png); } ul#navigation .e-mail a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-YRw3w6FYoCtbf13CAX0z_exojqcv0eSA-CKhX1rFOei7B5YCz4pv9UDgNhrnP1tUazSwYT-j1LQuI02Z2Bxc5OP8DvbrK5fw-mhY4F7OjBoGx3AQzTJDKM92w_xYBzwbpuH0yQZAwkHk/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 rel="nofollow" target="_blank" href="http://tipsandtricksfor.blogspot.com/p/redirect.html?url=http://YOUR-BLOG.blogspot.com/atom.xml">RSS Feed</a></li><li class="facebook"><a rel="nofollow" href="FACEBOK-PROFILE">Facebook</a></li><li class="twitter"><a rel="nofollow" href="TWITTER-ACCOUNT">Twitter</a></li><li class="googlebookmarks"><a rel="nofollow" href="https://www.google.com/bookmarks/">Google</a></li><li class="e-mail"><a rel="nofollow" href="YAHOO!-ACCOUNT">Yahoo!</a></li></ul>

Kliknite save i gotovo.