Tuesday, January 15, 2013

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/AVvXsEi1_RJWHLknEh5aE0hbx5vPhu5zEuCpFxhyw6e_dIq-Tls7bsbkz0tdPNbvRahZLVtc0ZYY1gjGH0kShJ-M2j6fQKD1oUw4tmSwx1YXh-DBUGqxT1kIRB4dktivCoCI5nlpvdZnDJVN21RH/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/AVvXsEiHNywpAcniTxcTGc49K-kHt8T1EDqlchQXKyTtxMDq3S8g9umHylY4vWdwMCcMInaXEXmu7x_1YRuX1oscCrRhOyMLD-tQUq-8KLxFQlbbeln6UqshtELCsXDLiwYFjtf0Rz_s3AW_ABTZ/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/AVvXsEjjN-xP4aI4e0JItkyyFIdvxVflPioy_hIO-zpASbRR4HQG0KkDlnsCbKa_5D5eXw1C8BrhQu5QkgDEjECY4Zlzdxeu9yp40vBkuwAw7dccyCw6pYL1PGiS1AAwE2HcoudQwau4T_OW-ywd/s1600/facebook-icon.png' title='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>