Monday, May 20, 2013

Hover Style Social Media Widget for Blogger

In post I am gonna explain how to add Hover Style social media widget for blogger. By using this widget  you can link your social media profile Facebook ,Twitter , RSS, Google+ and YouTube.Check link for Demo.Click here.

social widget

STEPS:

  • Goto to the Layout Option which you can find on your blogger dashboard.
Layout

  • Click On Add Gadget and Select HTML/Javascript.

  • <style>
    .StarsBloggingSocialButtonsBorder {
    margin:0 auto;
    padding:5px;
    width:auto;
    border-radius:5px;
    border: 1px #BBBBBB solid;
    }
    #blogtrixz-SexySocialButtons{
    list-style:none;
    text-decoration:none;
    font-size:0.9em;
    font-family:trebuchet ms,sans-serif;
    }
    #blogtrixz-SexySocialButtons a{
    text-decoration:none;
    font-family:trebuchet ms,sans-serif;
    }
    #blogtrixz-SexySocialButtons li{
    position:relative;
    height:38px;
    cursor:pointer;
    padding: 0 !important;
    }
    #blogtrixz-SexySocialButtons .facebook, .googleplus, .YouTube, .rss, .twitter{
    position:relative;
    z-index:5;
    display:block;
    float:none;
    margin:5px 0 0;
    width:210px;
    height:38px;
    border-radius:5px; background:url(http://1.bp.blogspot.com/-JKq0eFFwx34/UGx39fhHO_I/AAAAAAAABE4/56i9phAS2do/s1600/NBT+Sprites+Social+Icons.png) no-repeat;
    background-color:rgba(217,30,118,.42);
    -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
    -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
    box-shadow:rgba(0,0,0,.28) 0 2px 3px;
    color:#141414;
    text-align:left;
    text-indent:50px;
    text-shadow:#333 0 1px 0;
    white-space:nowrap;
    line-height:32px;
    -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;
    -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;
    -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;
    -o-transition:width .25s ease-in-out,background-color .25s ease-in-out;
    transition:width .25s ease-in-out,background-color .25s ease-in-out;
    -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
    }
    #blogtrixz-SexySocialButtons li:after{
    position:absolute;
    top:0;
    left:50px;
    z-index:2;
    display:block;
    height:38px; color:#ffffff;
    content:attr(data-alt);
    line-height:32px;
    }
    #blogtrixz-SexySocialButtons .icon{
    overflow:hidden;
    color:#fafafa;
    }
    #blogtrixz-SexySocialButtons .facebook{
    width:32px;
    height:32px;
    background-color:rgba(59,89,152,0.42);
    background-position:0 0;
    }
    #blogtrixz-SexySocialButtons .twitter{
    width:32px;
    height:32px;
    background-color:rgba(64,153,255,0.42);
    background-position:0 -33px;
    }
    #blogtrixz-SexySocialButtons .googleplus{
    width:32px;
    height:32px;
    background-color:rgba(228,69,36,0.42);
    background-position:-3px -66px;
    }
    #blogtrixz-SexySocialButtons .YouTube{
    width:32px;
    height:32px;
    background-color:rgba(174,45,39,0.42);
    background-position:-2px -95px;
    }
    #blogtrixz-SexySocialButtons .rss{
    width:32px;
    height:32px;
    background-color:rgba(255,102,0,0.42);
    background-position:-3px -126px;
    }
    #blogtrixz-SexySocialButtons li:hover .icon,
    .touch #blogtrixz-SexySocialButtons li .icon{
    width:210px;
    }
    .touch #blogtrixz-SexySocialButtons li .facebook, #blogtrixz-SexySocialButtons li:hover .facebook{
    background-color:rgba(59,89,152,1);
    }
    .touch #blogtrixz-SexySocialButtons li .twitter, #blogtrixz-SexySocialButtons li:hover .twitter{
    background-color:rgba(64,153,255,1);
    }
    .touch #blogtrixz-SexySocialButtons li .googleplus, #blogtrixz-SexySocialButtons li:hover .googleplus{
    background-color:rgba(228,69,36,1);
    }
    .touch #blogtrixz-SexySocialButtons li .YouTube, #blogtrixz-SexySocialButtons li:hover .YouTube{
    background-color:rgba(174,45,39,1);
    }
    .touch #blogtrixz-SexySocialButtons li .rss, #blogtrixz-SexySocialButtons li:hover .rss{
    background-color:rgba(255,102,0,1);
    }
    </style>
    <div class="blogtrixzSocialButtonsBorder">
    <ul id="blogtrixz-SexySocialButtons">
    <li data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/blogtrixz">Follow us on Facebook</a></li>
    <li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/dhavalkuku">Follow us on Twitter</a></li>
    <li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/103181909992661418479">Follow us on Google+</a></li>
    <li data-alt="Subscribe us on YouTube"><a class="icon YouTube" href="https://youtube.com/Username">Subscribe us on YouTube</a></li>
    <li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/blogtrixz">Subscribe with RSS</a></li></ul></div>
    
    
    


                        Replace blogtrixz with your Facebook username 
                        Replace dhavalkuku with your Twitter Username
                        Replace 103181909992661418479 with your Google+ ID
                        Replace Username with your YouTube Username
                        Replace blogtrixz with your Feed burner ID.
    • Now Save you HTML/JavaScript.

    Now you can enjoy your hover style widget..:)
               






              2 comments:

              Post a Comment

               
              ;

              Get Latest News realted to Technology Amazing Technology |