Stylish CSS Animated Social Connect Widget

After many days of Blogging I wanted to do a CSS animated Social Connect Widget for myself. So worked on it and finally got it done. Now the visitors can connect with us through social networks and stay tuned with us.

Then i thought if I gave the code to viewers it will be very useful to them. It is made with simple CSS and very easy to implement. There are 6 social network links so that you can connect them to your social accounts.

Special Features :

1. 6 social connections-Facebook, Twitter, Google+ ,Pinterest, StumbleUpon, YouTube.
2. Mouse Hover Effects are coded using CSS for social plugins.
3. Stylish Icons.
4. Also Have Feed-burner Subscribe Button.
5. Attractive Heading.
6. Easy to Install.
7. Loads Quickly.

How To Install To Blogger??

• Goto Blogger> Layout > Click On "Add A Gadget"

• Search For "HTML/Javascript"

• Leaving Title blank, paste below Code there.

• After Doing it you have to make some changes to connect your Social Accounts. Refer the NOTE below to do that.

<!--xlololxSofts CSS Animated Social Widget Code Strats --><style>.US-widget1 img{ -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); -webkit-transition-duration:0.4s; -moz-transition-duration:0.4s; -o-transition-duration: 0.4s; } .US-widget1 img:hover{ -webkit-transform:scale(2); -moz-transform:scale(2); -o-transform:scale(2); } .US-subbutton img{ -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); opacity: 0.6; } .US-subbutton img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); box-shadow:0px 0px 25px gray; -webkit-box-shadow:0px 0px 25px gray; -moz-box-shadow:0px 0px 25px gray; opacity: 1; } </style></br> <center><img src="https://lh5.googleusercontent.com/-vz9ufzqXHlg/UVQHtxxVlII/AAAAAAAABcA/316jxhqho_s/s912/heading-background.png" alt="Heading" width="350" height="60"/><div class="US-widget1"> <a href="FBURL" target="_blank" rel="nofollow"> <img src="https://lh6.googleusercontent.com/-xhKlpKtBOqs/UVBGfhFjWDI/AAAAAAAABXY/cfWWgeAiWhM/s128/facebook_128x128.png" alt="facebook-pagepeel"height=66 width=66 /></a><a href="TWTRURL " target="_blank" rel="nofollow"> <img src="https://lh6.googleusercontent.com/-bAHQC15QMP4/UVK_qi2ZjCI/AAAAAAAABYw/_Oi0U1nfTQ8/s128/twitter_128x128.png" alt="twitter-pagepeel"height=66 width=66 /></a><a href="G+URL" target="_blank" rel="nofollow"> <img src="https://lh6.googleusercontent.com/-11WQWv96HE8/UVP746mDwdI/AAAAAAAABbk/bH4gIAFM_gI/s128/google%252B%2520128x128.png" alt="google+-pagepeel"height=66 width=66 /></a><a href="PINURL " target="_blank" rel="nofollow"> <img src="https://lh6.googleusercontent.com/-C8bf_4ZNcV8/UVBGgE5JUlI/AAAAAAAABXo/P5CUXi768Mc/s128/pin.png" alt="pinterest-pagepeel"height=66 width=66 /></a><a href="STUMBLERURL " target="_blank" rel="nofollow"> <img src="https://lh6.googleusercontent.com/-enBByVGSmy0/UVBGg-8GmdI/AAAAAAAABX4/Sw3_wmkXI-U/s128/stumbleupon_128x128.png" alt="stumbleupon-pagepeel"height=66 width=66 /></a><a href="http://www.youtube.com/channel/UCXo7Ond38foyVjw0BnpbWcg" target="_blank" rel="nofollow"> <img src="https://lh3.googleusercontent.com/-IR9jkmFh95g/UVBGhCgKNiI/AAAAAAAABX8/6QZeFGu5jeg/s128/youtube_128x128.png" alt="Youtube-pagepeel"height=66 width=66 /></a></div><br/><div class="US-subbutton"><a href="FEEDBURNER " target="_blank"> <img src="https://lh4.googleusercontent.com/-C7Ko9NKc-jc/UVPq1UhnSBI/AAAAAAAABag/IeEGTMfZFH4/s209/Button-SubscribeByEmail.png" alt="subscribe button"/ height=30 width=135 style="border: 5px outset #999999"></a></div></center><div align="right"><a href="http://xlololx.blogspot.com//2013/03/stylish-css-animated-social-connect.html" target="_blank" rel="dofollow" style='text-decoration: none'><small>₪ Grab This Widget ₪</small></a></div><!--xlololxSofts CSS Animated Social Widget Code Ends -->

NOTES :

1. Change FBURL with your Facebook page/profile URL
2. Change TWTRURL with your Twitter Account URL
3. Change G+URL with your Google + page/profile URL
4. Change PINURL with your Pinterest profile URL
5. Change STUMBLERURL with your StumbleUpon profile URL
6. Change YOUTUBEURL with your YouTube profile URL
7. Change FEEDBURNER with your feed-burner subscription URL.                                        (Click here to watch my video on How to find your feed-burner subscription URL)

• Then hit Save. You Are Done.!!

If you need any modification in the widget or if you have any problems in installing fell free to comment ...

-Vishwas]kVn[

Admin