Add a Simple and Sober Social Subscription Widget

Finishing and hovering effect is very awesome in the CSS and when we create anything by using them then result always comes out very awesomely and very creative. We also do something like this with it and create one of the very awesome and simple and sober social subscription widget with RSS, Twitter and Facebook which can be fit in any kind of size and it is purely created by using CSS without any JavaScript OR jQuery. So it will work very awesomely like in live demo.

Live Demo

Add Simple Subscription Widget

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• Paste below code in it.

 <style>
/*  ---------www.widgetgenerators.blogspot.com----------- */
.social-connect-widget{background:#FFFFFF;border:1px solid #E7E6DE;padding:5px; border-radius:5px; -moz-border-radius:5px;}
.social-connect-widget:hover{border:1px solid #000000;background:#e5e3e3;
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:none;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px;height:42px;width:42;}
</style>
<br/>
<div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<a href="http://feeds.feedburner.com/WidgetGenerators"><img alt="RSS Feed" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEtIM38-7jSTT-bT4uf1RTZYmolwUuSR_gAWXl1uaVwQaKKMC8G0rc5L7KrF9v-zNk6RtLWWIVVep2k2OPt3Lf-q66mAoIe5DoYhUqrN5kQHDlFaKxgEHTCa5rz1LvQGexQ3eMvKelHuPa/s1600/Rss-icon.png" /></a><a href="http://feeds.feedburner.com/WidgetGenerators">Subscribe  RSS Feeds!</a>
</div>
 <div class="social-connect-widget" style="margin-bottom:10px;">
<a href="http://twitter.com/WidgetGenerator"><img alt="Follow Us on Twitter!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPTAvOSoTPM5JJMkuZJRY-6dMsi_eZ5oIu4jJHI-juBkRPmwj6ypayisPtQgnPvukKz6Ywqd02GwBXnqhdI9SnwVCbAw_A0AstdZWcFtT6NvWOnqdQlajqkqEpEdsQtkLSyrtEjXglYtC/s1600/Twitter-icon.png" title="Follow Us on Twitter!" /></a><a href="http://twitter.com/WidgetGenerator">Follow Us on Twitter</a>
</div>
<div class="social-connect-widget" style="margin-bottom:10px;">
<a href="http://facebook.com/WidgetGenerators"><img alt="Be Our Fan!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFbTn9hH0TpIL-_UDR3Po9MFbBTskiNmNLU-p5QEkeRLh2CjQmzQFSYKkvdgQ-rTeh_PhbbBJfz6aLMd6uWATG_N1aWNkdOxJfk-SrebcD4GVNlUxnuGMvrlvXJD7K8n-saKHSz6Q_uQ5j/s1600/facebook-icon.png&#39; title=&#39;Be Our Fan" /></a><a href="http://facebook.com/WidgetGenerators">Follow us on Facebook </a>
<a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.widgetgenerators.blogspot.com/"></a>
</div>

• Now Save your Widget.

 Make Changes....!

• Replace WidgetGenerators it with your RSS user name (2 times)
• Replace WidgetGenerator it with your Twitter user name (2 times)
• Replace WidgetGenerators it with your Facebook  user name (2 times)

If Any Problem Comes, Ask in Comments