How to Make Widgets Subscribe in a blog article

My Backlink , How to Make Widgets Subscribe in a blog article - In this post I will explain how to add an RSS subscription box widget with social media icons. I hope to make a friend can post this widget disliked it. By using this widget, visitors can subscribe to your blog. So, it can help visitors of your blog to get the latest article updates via email. I am using CSS and HTML for this widget, so bloggers who want to use this widget, no need to bother to edit your template HTML. Simply by adding gedget HTML / Javascript.


If you want to install this widget on your blog, please follow the following steps.

  1. Log into your blog account.
  2. Choose Layout = >> Add gedget / Add gedget.
  3. Select HTML / Javascript.
  4. Copy the code below, then paste in the box HTML / Javascript.

<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX-CDod-QwZyzHXBx6p-5V1gaDzZU4ym5vHj-CZV_IKK33TXHJPBLioiQc-wDJZeduid8sVOmBqrItCSfeMjTsiRqxbLE9AaW-QhTuzh-3PHjqePEScLqerd1Sr7WxAbfHDJix1XlBZNI/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPTDWaZ-iHWoKVM_ZS00Kbx7MCiuq_43G8i5FmMJ7EfHg6WL5C7pAYTVS_nDUj84EzRien9pjG8C2xdFhnlP9goY1ZU5MZE7hCg1W-5JWx9lu2RIg-Lhyphenhyphenlx90OLQ6hAnlz19e2H6SqZbc/s1600/icons.png) no-repeat 0 -27px;border:1px
solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.sidebar-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%}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
.sidebar-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{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%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<br/>
<a class="social-icons" href="https://facebook.com/xxxx"><img src="http://i1319.photobucket.com/albums/t668/Rozzby24/Mariberbagi244-Facebook_zps68f4035b.png" /></a>
<a class="social-icons" href="https://twitter.com/xxxx"><img src="http://i1319.photobucket.com/albums/t668/Rozzby24/Mariberbagi244-Twitter_zps433926c5.png" /></a>
<a class="social-icons" href="https://plus.google.com/xxxxx"><img src="http://i1319.photobucket.com/albums/t668/Rozzby24/Mariberbagi244-Googleplus_zps8404ed17.png" /></a>
<a class="social-icons" href="http://feeds.feedburner.com/xxxx"><img src="http://i1319.photobucket.com/albums/t668/Rozzby24/Mariberbagi244-RSS_zpsc0214ee8.png" /></a>
<p>Subscribe To Our Email Newsletter & Receive Updates Free</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=xxxx" class="sidebar-subscribe-box-form" method="post" onsubmit=&
quot;window.open('http://feedburner.google.com/fb/a/mailverify?uri=xxxx', 'popupwindow',
'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="xxxx" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address here"/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form>
</div></div></div>

Please note:
Replace the code that is color blue with the Facebook URL / fanspage you.
Change the code color red with your Twitter URL.
Change the color code Orange with your Google Plus URL.
Replace the code that is color purple with your Feedburner URL.
Replace the code that is color green with your Feedburner ID.

  5. Save HTML / Javascript.