Social Subscribe Gadget with buttons for Blogger

Here I come with Social subscribe gadget with buttons for blogger platform.Now I want to teach you an another simple trick of CSS (Cascading Style Sheet). With this trick you can create and customize your own Social Subscribe Gadget for Blogger Blog with Buttons. This is made with the help of CSS and HTML.


In the previous post i wrote an article on cool hover social subscribe buttons and explained you a trick of CSS (Cascading Style Sheet) and HTML (Hyper Text Markup Language). Using this tips, you can learn how to add social subscribe buttons to website.

If you have any issue then you can subscribe to us for more tips and tricks. You can also check 3D pressable button.

Here is the Image of this Gadget:-

Features:-

1. This Box or Gadget is well made with CSS and HTML.
2. This Box or Gadget is free of cos (No Cost).
3. Easy to install in Blogger Blog.

How to add this Gadget in Blogger Blog:-

• Goto www.blogger.com and log in to your account.
• Then Click on Layout option.
• In layout, click on add a Gadget.
• Now click on HTML/JavaScript option to add this code.

• Copy and paste the following code in the area.

CSS Code:-

<style type="text/css">
.social { border-radius:7px;}
.social ul {list-style:none; display:inline}
.social li {float:left;padding: 0px 1px 0px 0px; margin:1px; border-radius:7px;}
.social li:nth-child(6) {padding: 0;  }
.social li a img{height:49px;width:48px  }
#rss-news {background-color: #47A56A;width: 275px;color: white;padding: 0 15px 15px;margin-top: -3px; border-radius:7px;}
#rss-news input {outline: 0; }
</style>

HTML Code:-

<div class="social"><span class="glap"><ul><li><a href="Your Facebook link Here"><img src="http://websitesforrockstars.com/wp-content/uploads/2012/09/facebook-square-logo-50x50.jpg" /></a></li><li><a href="Your Twitter link Here"><img  src="http://www.epo.org/news-issues/social-media/twitter-logo.png?lenya.module=svg&height=50&width=50" /></a></li><li><a href="Your Google Plus link Here"><img src="http://www.cs.umn.edu/images/google_logo.jpg" /></a></li><li><a href="Your RSS link Here"><img src="http://www.hoards.com/sites/default/files/RSS-feed-logo-50.gif" /></a></li><li><a href="Your Pinterest link Here"><img src="http://www.projectpetslimdown.com/Content/images/icon-pinterest-lg.gif" /></a></li><li><a href="Your YouTube link Here"><img style="width:50px" src="http://www.sg-fitness.co.uk/images/youtube-logo-large.png" /></a></li><br><li>&nbsp<div id="rss-news"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin-bottom: 2px" 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:270px; 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="YOUR FEEDBURNER ID" /><input name="loc" type="hidden" value="en_us" /><br /><span><span>(*) Check mail to confirm information!</span></span></form></div></li></ul></span></div>

Customization:- 

• Customise Your Facebook link Here with your Facebook profile.
• Customise Your Twitter link Here with your Twitter profile.
• Customise Your Google Plus link Here with your Google + Id.
• Customise Your RSS link Here with your RSS URL.
• Customise Your Pinterest link Here with your Pinterest Id.
• Customise Your YouTube link Here with your YouTube channel name.
• Customise YOUR FEEDBURNER ID with your FeedBurner URL.

I hope that above social subscribe buttons will help you.