Friday, April 25, 2014

// // Leave a Comment

Floating Social Media Widget for Blogger

After my previous articles about Css Animated Menu Widget for Blogger today i am going to share A beautiful and distinctive custom Widget for who have Blogs with limited space. Sensitive to touch the mouse, after automatically opens that touched a category.

So let's See The Tutorial How to add Floating Social Media Widget For Blogger 


  • Go to Blogger Dashboard
  • Click on Drop & Down Menu of your blog
  • Click layout >> and click Add a Gadget >> Html/Javascript 
  • Then paste the below code on it

<style type="text/css">
ul#social {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 20%;
    left: 0px;
    list-style: none;
ul#social li {
    width: 100px;
ul#social li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;  
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
ul#social .twitter a{
     background:#0F96C6 url(;
background-position:center center;
ul#social .googleplus a      {
    background:#D73D27 url(;
background-position:center center;
ul#social .facebook a      {
    background:#1A4B97 url(;
background-position:center center;
ul#social .rss a      {
    background:#FAAE17 url(;
background-position:center center;

ul#social .pinterest a   {
    background:#963336 url(;
background-position:center center;

<script src=""></script>

<script type="text/javascript">
$(function () {
    $('#social a').stop().animate({
        'marginLeft': '-85px'
    }, 1000);

    $('#social > li').hover(
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-2px'
            }, 200);
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-85px'
            }, 200);
<br />
<ul id="social">
<li class="twitter"><a href="#" title="Twitter"></a></li>
<li class="googleplus"><a href="#" title="Google Plus"></a></li>
<li class="facebook"><a href="#" title="Facebook"></a></li>
<li class="rss"><a href="#" title="Rss"></a></li>
<li class="pinterest"><a href="#" title="Pinterest"></a></li>

  • Save It. 
View your blog this widget will appear correctly if you facing some problem then leave a comment below.


Post a Comment

Confused? Don't hesitate to ask We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows.

Note: Please do not spam. Those type of comments will be deleted upon our review.