Stylish all in one social widget with hover effect for blogger

Hey Visitor's !! After publishing our first social widget "Social Sharing Widget Below Post With Hover Effect". We have taken this to one step ahed so now its time to reveal our widget for sidebar. "Stylish all in one social widget" is a kind of widget which will full fill your all requirement of social media subscribing.The widget has a colorful appeal, So it will match with your blog's or templates color.The widget is social media profiles of these days, like facebook, Twitter,Google plus, Rss, Pinterest, Bloggerz. It also includes the function of email subscribing. The widget has mouse hover effect. Which Will give a stylish touch in the widget.You can see the demo here.

LIVE DEMO

© Skillblogger™

Click to See

Features of the widget:-

• Colorfull widget, Fits almost every background.
• Eqipped with all famous social profiles.
• Includes email subscription feature.
• Opacity effect on mouse hover.
• Easy to install and customize.

How to install this widget:-

The steps are so simple and easy that any new blogger will not face any kind of problem to install it in their blog.

• Now Save the template
• Now go to Layout and Add a Gadget > select Html / Javascript from the list
• Now Paste this code in it.

<script type='text/javascript'>//<![CDATA[$(document).ready(function(){if(!$.browser.msie) $(".sbglap ul li").hover(function() {$(this).siblings().stop().fadeTo(400,0.4);}, function() { $(this).siblings().stop().fadeTo(400,1); });});//]]></script><style type="text/css">.sbsocial ul {list-style:none; display:inline}.sbsocial li {float:left;padding: 0px 1px 0px 0px;}.sbsocial li:nth-child(6) {padding: 0;}.sbsocial li a img{height:49px;width:49px}#sbrss-news {background-color: #CF274B;width: 266px;color: white;padding: 0 15px 15px;margin-top: -3px;}#sbrss-news input {outline: 0;}</style>
<div class="sbsocial"><span class="sbglap"><ul><li><a href="https://www.facebook.com/alltipsotricks"><img title='Facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYitsJvGUcrMT2f32VoC2juUl5gc9YtAwMw1yI3HBPYh51dfHAWjQ6Acc_vKo7CY97VutYIRe0A6LI76Ph6Y6d3n-pZN9Kx5Iw8ObI7J9wi1O6Ve198jbYZZwVz8zsHohvuJLGjT2Oe4/s1600/facebook_64.png" /></a></li><li><a href="https://twitter.com/alltipsotricks"><img title='Twitter'  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcxcK1ZxChIEB2YwjceliH4Zo2CVJymJ1Ary1NcYtjY5GWOxAqGgOAllplkl_tM7hra3tz_aJwAU7O7_uS-7TkLJa1zbAAXivhVs-uB9y89VgZS09cEAYIemgiLNiAho11VFaFgQM9adM/s1600/twitter_64.png" /></a></li><li><a href="https://plus.google.com/b/113080363911944909191/113080363911944909191"><img title='Google +' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPLhlztOsdrbag2vCG0yPKVuJgG2k1JAwsSTY2GVxT92pLyhUy5D6uNu6uuoRX_JyQidDjM6m1W521soJCiD4nN4oIm7lrCUihZZEyVBT9nw9wnCGxC35dasUkXOqxcdn6PxN70BfqWgM/s1600/google-plus_64.png" /></a></li><li><a href="http://feeds.feedburner.com/alltipsotricks"><img title='Rss' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpOia_kSyXdEsUOP0DZVZ62FRc-NZFjU2MfyxRaZz01WHE05GaZHo8xPX-4RbuXD6pZK-h2FsBttycNVQgAj8bfVh0KrCvs9zDH19Olv-U6Z5Ig6BEAm3Sox_kwvg6o8hi1qPBnPtOIPM/s1600/rss_64.png" /></a></li><li><a href="http://pinterest.com/alltipsotricks/"><img title='Pinterest' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmrU_eMX0NEV74nrdyCw7gPT_6c_NyxJ2pA1IQsTcuNf8jgWw0D68V_698JdqXEPMO8g7USLXNAX3SV-dtClq5BXiQdXVt_2O_4nIsExkzN5Q4fsZhl7P2HFlwqCuNxprGFE7BzZJ-Trw/s1600/pinterest_64.png" /></a></li><li><a href="http://alltipsotricks.blogspot.com/"><img title='Bloggers' style="width:46px" src="https://dl.dropboxusercontent.com/u/87055319/blogger_64%20(1).png" /></a></li><li><div id="sbrss-news"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=alltipsotricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin-bottom: 0px" target="popupwindow"><br /><span><span class="">Sign up for email to not miss these articles every day.</span></span><br /><input name="email" style="width:240px; margin: 5px 0px; border: 1px solid #ccc; padding: 4px; font-size: 1.0em; color: #555;" type="text" value="insert your email here » enter"/><input name="uri" type="hidden" value="alltipsotricks" /><input name="loc" type="hidden" value="en_us" /><br /><span><span>(*) Check mail to confirm information!</span></span></form></div></li></ul></span></div>

Link change:-

Change our social links with your social profiles links.shown in Blue Color

All Done : Now everything is completed just  Save your Widget by pressing Save  button.

From Team All Tips o Tricks:

Hope you have enjoyed the cool and interesting session  of this awesome tutorial. we are trying to create more widgets that benefits to you and your users. If you would face any problem to add this widget feel free to ask till then, blessings and happy Sharing.

   

Note: This widget is created by Skill Blogger. Don't forgot to link back if you want to share this tutorial.otherwise dmca is waiting for some spammers.