Classic Subscribe Widget with CSS3

4:12 AM Posted by Hammad Ansari

The Classic subscribe widget has the most common social media platforms to subscribe to which includes Twitter, Feedburner, Facebook (same as the previous version). It has got the same classic look but with a few adorable changes, the hover effect with the CSS3 transitions and box shadows, the new color combination which makes it look more professional. It fits in the sidebar automatically, no matter what the size of the blog's sidebar is. The installation process has been kept simple, follow the steps below as mentioned.

How to Add:

Go to Blogger >> Layout.
Add a Gadget.
Select HTML/JavaScript and paste the following code in it:

<style>

/* ---------Blogger TAT Classic Subscribe Widget ----------- */

.social-connect-widget{background:#D7D7D7;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;
-webkit-transition:all .6s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .6s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#FFFEF9;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-size:14px;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px;height:32px;width:32;}
</style>


<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a href='http://feeds.feedburner.com/USERNAME'><img alt='RSS Feed' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzkRMsN6seoi8cs1IRgRTb0C4OCQ27R3WxEq3xwO_hZn5_QBLOKdT1jJF1w5Fs9sxhTpXwqpVSjancBYYd9aeP_tJwBBjnvEKxcqIc8fIwkPDz9b-prH4kQLXGHkWuH7sW44bPk1al2KGZ/s1600/rss.png"/></a><a href='http://feeds.feedburner.com/USERNAME'>Subscribe to our RSS Feeds!</a>
</div>

<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS4LtoWgvM4tR-oM0BnMG7YpQ_ZlirSeUx4BS3jvLXTm0m4dNoS2ASLYans40G8QOgX4budfyts-OK5P1bgTB_2hrGgkV5c3DbHQHP2a7W9htHsNtbspvN08kpSsx9hcP1rso_MSdHAVLu/s1600/twitter.png" title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME'>Follow Us on Twitter!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/USERNAME'><img alt='Be Our Fan!' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPFy9fjg6uVNLvbo_CzlBa3MjPfcYIN5czUoBoSTz_bIn4pFpho8frU5GqupqXHoYO0_OrFHQv-Hp-ZFRgqzP9R3DzwtcUlfPcCizkB61cYSgG9cMuKtkuJrsQII0347Hvnq8ACUilnFhj/s1600/facebook.png' title='Be Our Fan"/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a>
</div>

Before saving, Proceed to the next step.

Customization:

You need to replace the following with your own.

http://feeds.feedburner.com/USERNAME with your own Feedburner id.
http://twitter.com/USERNAME with your own Twitter id.
http://facebook.com/USERNAME with your own Facebook fan page link.

Save and you are done. :)

Tags: Classic Subscribe Widget, Subscribe, Widgets

Share your views...

0 Respones to "Classic Subscribe Widget with CSS3"

Blogger TAT

Popular Posts