Cool Subscribe Widget With Css3 For Blogger/blog

Posted by محمد On Friday, August 3, 2012 0 comments
Subscribe widget
One of the most beautiful gadgets that you can use to enhance your blogger/blogspot is the Subscribe widget V2 With Css3. This is a new version of his previous work and this one has the most common social media platforms like Twitter, Feedburner, and Facebook. The Subscribe Widget V2 with CSS3 is similar in nature as version 1, with the same classic look but with upgrades like CSS3 transitions and box shadows. The latest color combination also makes it more professional

To Add This Widget to Your Blogger Blog Follow Simple Below Steps :
  • Go to Blogger Dashboard > Layout
  • Add a Gadget
  • Select HTML/Javascript and copy and paste the code below :
<style>
/* ---------Subscribe Widget V2----------- */
.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>
<!-- Classic Subscribe Widget V2 Start -->
<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/AVvXsEiyB3WmUWKBD3x_L8nRb1qemIon3sgcPi0dzf7PRIJTnPsN6ZjT1RR5aropgwptOGyuj_9-_4kvcZ6TE_qjtl_0vO6Cs9Bkw2ZwYSWGxLt9r0_6SSBl9k8fWjP4NpxGEyFyFx08ATkBhxF7/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/AVvXsEhqMFoGn68VhHMcPhvv3k1BeqrMjCLoNVIoyWrjDyORxGo05JY0LI34KGvQXZBMJi2uRO9Tv6MMmNw0_umkEAymufz-1Y4kc5QGj7ez9kW5lQRb91v_hmYr1_tBZICGcokuhUxXrYXY1hXp/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/AVvXsEh29IHNraBxbvhp6cq7Wra4qebhW7XnP1_i3Fw3MQQK-Vn3hSOQmfTz9YekUgMogZGdcetwIJLLe-A_wWmPQEaiH69KZnounqkmmeF3B73nc-makc50fqdHRavuOv2v4yF61sG3mkgDHTJY/s1600/facebook.png' title='Be Our Fan"/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a>
</div>
<!—End Classic Subscribe Widget V2—>
  • Replace the following with your own :
    http://feeds.feedburner.com/USERNAME >> with your own Feedburner id.
    http://twitter.com/USERNAME >> Change with your own Twitter id.
    http://facebook.com/USERNAME >> with your own Facebook fan page link.
  • Click save And you are done :)

0 comments:

Post a Comment

Facebook Page

Followers