Home »

Add New Social/Email Subscription Box Widget For Blogger

Wednesday, October 16, 2013

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/AVvXsEhXm_VQvDrLBK9N9V-U8TOXmCmQumL7ObqNJvhvYbII7k-UgZWEeZgg1_WDGnwj5N9oxojRqwOYXsScOGPYUpKEzFHpTzRfb0I8GLtPAlDCyHEgz1ili7B5vmaHOgK8JDMUQRia4LhI59Y/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/AVvXsEhaYohXOUfHrJ1n40LaHVN-fKxUCmXZpS8vaVMd2Cby1EH75v8PByKQc5TbO1wq8fwlggzVVIDpDa_RT0o69Fc8_2kmvJedjkaeLZurwkFsJw8R-TlTHF0xdHhDVNsLyDG08oU9z1mEXpo/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/AVvXsEgqMciHiXEptryOWSLEd-VIkLmQUe4UEQ5pdlnCLtckcqNGoW8vF9Nb7xZghc7bhb9utXxhNB_0kFfjaV7b120hkd1M-tkNRKezQp303-c1aRGZAkecLM2cq1cFEMGldM2d0kL-QtoCABk/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/AVvXsEjWDRPk4sZw1CNNnSuDYc7mX9pQFHrCmUtIaoxx28bYmCs_4vkfJrp169TLjGCWRaTnBwIAEFa70rqr3XFdEQT-R8-_8o1vQSAoPEOHTLBX4mY6qc9bELwUZRZR29fksucpgs_rIcQDiB8/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/AVvXsEja7aISq9RrLT2Vo-6Tgq6exjGKnlq7ftR4hfazPOe2iTwDuYLuGGnhFYbmXAAE0Y9smzxOqYWi187aFJrG7jGsnIv1XPa4KSMCE8O9WhKSGzqGDNTr0_fsKo4mm-GtKX1sJo2h3dU9idg/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/AVvXsEjiX0_YBLBibyvmI7P9FzCNIcbGTx7ECV7u9Wkdse93qmdu2lwhRwcNIF8qHMCol-ic-Kc6VuE6qLx85_eKKoz-1huBQX8LQP7xJYQNQoz_SARAyz7vRlSIg4J75hDu09ueJFwIofc9hIY/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/AVvXsEgZkLzuOjGxeweGTRwxvaMIpsuuXwbas-kvKkKUk6wW-AZmhmm480d7FkjvepfG91N_h4KyFrnx-bCUcBRIzg3ES_EuHmpntjMifRGG_c-Xq_2PUW-o0bGOiPpPPIK6oWlZbFswz4J8SoY/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/AVvXsEgUNEJmoLXaSKCNTyuJjZYOc644ECf6PISSDTsif-iK04uybvHv4qcucWdDdhamCTOX6qNgYtg9YSHjZHAvgudxYVPNAfe_s5XkxvkzZoHaZkcE5xVODbNzi2ZnG4cEzOM1MURRXB40Wew/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.
Share On Google+Add This To DeliciousTweet/ReTweet ThisShare on FacebookStumbleUpon ThisDigg This

name is full abdelali tibicht, my country is morocco, care techniques and the development of blogging, my goal through this blog, is to help bloggers develop their blogs through my modest experience gained during my career blogging can.

Follow Me On Twitter Or Facebook

Subscribe to Get Free Blogging Tips And Quality Tutorials Straight in Your Inbox.


Did you like Thread ؟
Tags: