Add New Social/Email Subscription Box Widget For Blogger

Hello friends after a Long days we are posting some new Social/Email subscribe widget.you are thinking why did i name it responsive because the subscribe button is made with responsive.! This widget will attract visitors to make him subscribe to your blog.This widget come's with four social icons in it Like Google+,Facebook,Twitter and Youtube.This four social sites help us in increasing traffic to our site/blog.

☻ HOW TO ADD EMAIL/SOCIAL SUBSCRIPTION BOX FOR BLOGGER

Written explanation

1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box) 

]]></b:skin>

3) Now Paste the Code Shown Below just Before it.

#Social-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9W3bXi-fJjVnSN6TP9ttBJ7gMvinTD4qEYJb4fDE7trlNveYIUufeXbB8fcPYr5TcCjccvU2uPlbX7nnyIhgWPjtUyW4QRmVDkhwZ6p7NX-7twW-X7zUEXJrJCiTcDCvyOryXsQehB4/h2/pctoolstips.blogspot.com.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.Social-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVC7Obyv5N2lc6YpoWYAdb8YfKTjge4VMznUI5UoorST6QgvVVvuS5hemU-a2n6zZHOpf7NCCLAa2Gl94wpM2bk7xG7s4cwfu1-Rk5lWLu6VkT75kRJCsCVBJV92fi8nsohgk_Fuzpcg8/h120/pctoolstips.blogspot.com.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
.Social-subscribe-box-form{clear:both;display:block;margin:10px 0}form
.Social-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
.Social-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdM9GDqbVd1FKBnEgk049HJjqMPlSEBvGLxyMImHNQkRFRMhSRX_oAzmXCyPUctLoovrU70D9VSQfU-LORbLOnXuopZzrPcLp1gWI7lgnBUpDu5gHaxePyr0M_I-ysCeS9bOr4rqt41-c/h120/pctoolstips.blogspot.com.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.Social-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
.Social-subscribe-box-email-button:hover,
.Social-subscribe-box-email-button:focus{background:#1ca4ff}
.Social-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJ-4-MSkEW6nwuu-vkpPaVW8c3S9fCDMV8BoDQWcVSeNwhyXSdF07-zaKjyHmxdJofajnUGkzbkkGstt3MAgUVGdwkYuEXz65Nf38hlLYJYirGTBCgBEWyxFLwY16KIP8__M7MrJ0mg4/h120/pctoolstips.blogspot.com.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}

4) Now save your template.

5) Go to Blogger Dashboard → Layout → Page Elements.

6) Add a HTML/JavaScript Gadget.

7) Paste below code in it.

<div id="Social-subscribe-box">
<div class="Social-subscribe-box-wrapper">
<p>Subscribe to our email newsletter & receive updates right in your inbox.</p><center>
<table>
<tbody><tr><td><a href="http://youtube.com/user/USERNAME1
" class="linkopacity" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWlRJPAfkRlV-Qf82Tdu5wvPp4r9u_QwSriK57LS58sRmJPUupV1F8pIMHxucHxZTIAjo_L1uHzJYy5NO74OUGoIxDPODewmbbEEQ-aSfmUKjc8zdOn2eRSACHV8U19OCt-H21yZPmR28/h120/pctoolstips.blogspot.com.png" /></a></td>
<td>
<a href="http://www.facebook.com/USERNAME2" class="linkopacity" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ0-XlCsHVSQ0MPvym4MvG8002WMIYfdIf2rODnlCSOG9C3neVNKIbWAa556DstHTiu1_TbaGjR18jZeFs3gek9YvIt3tWfD9pSG0wm66NHNtLIjy7B6s-humwTP4KevIr8XQob_yuoYA/h120/pctoolstips.blogspot.com.png" /></a>
</td>
<td>
<a href="http://twitter.com/USERNAME3" class="linkopacity" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWLc7zuoiGkQf7dEfD_eXA-yLUHM3d0kRARka_AzPraj0ftO2E20DCSvJ3miZepYp8C6IA0jUT9BGMYK6_qaBeK69jAHvLEL6LtZphKL7RkAnbRvTWLMJ2swPY-WYS6iqoToVjOrI5rmc/h120/pctoolstips.blogspot.com.png" /></a>
</td>
<td>
<a href="G+ URL" class="linkopacity" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoZoQCD46I1oNRwTWeJ1ibSUjpHLVRd1D_KBOxKCWTY_SJijH_gFii84FaiHCZ5xRNic8k-tRi7z8E_ml8-LgU38TSUgqNCYysvT2ZimGdaEp6690a5q7HCU3u88nejgHrb4dn7jom3R8/h120/pctoolstips.blogspot.com.png" /></a>
</td>
</tr></tbody></table>
</center><div class="Social-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=USERNAME4" class="Social-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USERNAME4', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="USERNAME4" /><input name="loc" type="hidden" value="en_US" /><input class="Social-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="Social-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form>
</div></div></div>

8) Customize your setting.Find any word click F3 or Ctrl+F. 

 ♥ Replace it USERNAME1 with your Youtube Username. 

♥ Replace it USERNAME2 with your Facebook Username. 

♥ Replace it USERNAME3 with your Twitter Username. 

♥ Replace it G+ URL with your Google+ Page url . 

♥ Replace it USERNAME4 with your Feedburner Username. 

9) Save your Widget.