Saturday, 26 January 2013

2 Ever Beautiful Social Network Widgets



Social Media is everywhere & it changed the way of interaction between  humans & company with customers.Social networking websites are the integral part of blogging. So adding beautiful social networking widgets to your blog will help  to increase  your blog traffic. You should not that the widget placement & Icon style are also very very Important. Here you will get 2 beautiful widgets to enhance your Blog/Website Beauty.One set of Icon consists of  "Facebook, Twitter,Google+, RSS "  and other "Facebook,Twitter,RSS,Pinterest".

Recommended Article  : Stylish Social Widgets For Blogger
                                     :Instant Twitter Follow Button For Blog/Website


1. Social Network Widget With Spinning 3D Effect


    
STEPS

1. Go To  Blogger Dashboard Click The Drop Down For Your Blog >  Layout > Click Add A Gadget > Choose HTML/Javascript .


2. Paste The  Below Code In The Box>Save (Dont Forgot To Make Changes In The Link In RED Letters)

Code  for You



<style>p#hb_socialicons img {
        -moz-transition: all 0.8s ease-in-out;    -webkit-transition: all 0.8s ease-in-out;
        -o-transition: all 0.8s ease-in-out;
        -ms-transition: all 0.8s ease-in-out;
        transition: all 0.8s ease-in-out;
    }
    p#hb_socialicons img:hover {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    </style>
    <center><p id="hb_socialicons">
        <a href="http://www.facebook.com/Facebookusername">
    <img border="0" src=" http://4.bp.blogspot.com/-Rg_dgFXlBVA/UBDscaBSYeI/AAAAAAAAFGc/Nz9NKUwKFmw/s1600/FACEBOOK-64x64.png " /></a>
        <a href="http://www.twitter.com/TwitterUsername">
    <img border="0" src=" http://4.bp.blogspot.com/-OlVYJ00Nu0c/UBDsfD1-eaI/AAAAAAAAFHA/_nRawOpz9z4/s1600/TWITTER-64x64.png " /></a>
    <a 
href="https://plus.google.com/GoogleID">
    <img border="0" src=" http://2.bp.blogspot.com/-tnyVZV10JbA/UBDsc2CXp8I/AAAAAAAAFGk/X1GBkEtnOdg/s1600/GOOGLE-PLUS-64x64.png " /></a>
        
        <a href="http://www.feeds.feedburner.com/FEEDURL">
    <img border="0" src=" http://4.bp.blogspot.com/-q5_sxe2DWJw/UBDseOSp8lI/AAAAAAAAFGs/NQhVn6FneWw/s1600/RSS-64x64.png" /></a>
        <a href="http://pinterest.com/PinterestUsername">
    <img border="0" src=" http://4.bp.blogspot.com/-lM9H1ezKOeM/UBDsdn1wYJI/AAAAAAAAFGo/y7dNIPJ2ptE/s1600/PINTEREST-64x64.png " /></a>
    </p></center>




2.Social Network Widget With Spinning Hover Effect


STEPS

1. Go To  Blogger Dashboard Click The Drop Down For Your Blog >  Layout > Click Add A Gadget > Choose HTML/Javascript .


2. Paste The  Below Code In The Box>Save (Dont Forgot To Make Changes In The Link In RED Letters)


Code for You


<style>p#socialicons img {
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
p#socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
/* Spinnig Hover Widget By Boogali */
</style>
<center><p id="socialicons">
    <a href="http://www.facebook.com/FacebookUsername/">
<img border="0" src="http://4.bp.blogspot.com/-U4-lm-VG-Rs/UAFFARjvXBI/AAAAAAAACKg/5eXZk3g6JTw/s1600/facebook.png" /></a>
    <a href="http://www.twitter.com/TwitterUsername/">
<img border="0" src="http://1.bp.blogspot.com/-v1j9lvjPaks/UAFFDtW2I2I/AAAAAAAACK4/7ux4VptLkk0/s1600/twitter.png" /></a>
    <a href="https://plus.google.com/Google Id">
<img border="0" src="http://1.bp.blogspot.com/-TatTDxZ7QlQ/UAFFBg8qgCI/AAAAAAAACKo/_iyTQXBwEEw/s1600/googleplus.png" /></a>
    <a href="http://www.feeds.feedburner.com/Feed URL/">
<img border="0" src="http://1.bp.blogspot.com/-y8Gyyv6mVpY/UAFFCqff4dI/AAAAAAAACKw/p84nEbEoIIo/s1600/rss.png" /></a></p></center>