-->
Home » » Dark Style Rss Subscription Widget For Blogger

Dark Style Rss Subscription Widget For Blogger


In  this  tutorial   I'm   gonna   explain  how  to   add  dark
style  Feed  Subscribe Widget. By  using this widget you 
can  link  your  social   media  profile   Facebook, Twitter
Rss Google  Pinteret plus and subscribe  field. It will help
to get the new updates by emails.


Dark+Style+Feed+Subscription+Widget

How to add Feed Subscription Widget For Blogger


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below code. (You can add any Names for Title )

<style>
#btrix-newsletter{ width:290px;background:#2e3639; color:#fff; padding:20px; font-size:14px;  margin-bottom:20px;  -moz-box-shadow: 2px 2px 2px #000000;-webkit-box-shadow: 5px 5px 5px #000000;box-shadow: 5px 5px 5px  #000000;border:double 5px #000000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}

#btrix-newsletter .btrix-title {  margin-bottom:10px;margin-top:-10px; }
.btrix-title{margin-left: 8px;font-size:25px; font-weight:bold; border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;padding:1px 8px 2px 8px;text-align:center;border:1px solid #151819;color:#fff;background:#222729;display:inline-block;}

#footer-subscribe-btn {width:116px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;
position:relative;left:135px;}
.footer-submit-btn {margin-left:50px;margin-top:-5px;margin-bottom:-50px;border: none;color: #fff;text-transform: uppercase; font-size: 13px;padding: 5px 18px 5px;background: #e93a30;border-radius: 30px;-webkit-border-radius: 30px; 
-moz-border-radius: 30px;font-weight: bold;-webkit-transition: background .2s linear;
-moz-transition: background .2s linear;-ms-transition: background .2s linear;-o-transition: background .2s linear;transition: background .2s linear;cursor: pointer;
}
.footer-submit-btn:hover { background:#e51111;}

#fastsearch ,#footer-subscribe-email{background:#62686b;color:#fff;font-size:14px;border:none;
box-sizing:border-box;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;outline:none;padding:0px 15px; height:30px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
#fastsearch.inactive ,
#footer-subscribe-email.inactive {color:#b5b7b8;}
#footer-subscribe-email {width:100%;}
#sb-nl-members-count {  font-size:12px; font-weight:bold;text-align:center;width:150px;margin:0 0 -36px 0 ;display:inline-block;
</style>


<br />
<div id="btrix-newsletter">
<div class="btrix-title">
Get Email Updates</div>
<div class="btrix-nl-text">
<center>
Subscribe to Get Latest Updates Free</center>
</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="inactive footer-text-field" id="footer-subscribe-email" name="EMAIL" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Your email address" />
<input name="uri" type="hidden" value="bloggertrix" />
<input name="loc" type="hidden" value="en_US" />
<br />
<div id="sb-nl-members-count">
<table border="0">
<tbody>
<tr>
<td style="padding-right: 4px;"><a href="http://twitter.com/bloggertrix" target="_blank" title="Follow Me On Twitter">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3l4qMtUT-Z-aQr91vNX5u24LRJNGye2w37WVJP07y_lhKcG2YIxNcCWpZ8P-3MKRlZZ45PsMAnKHz95NfPHhV3C1ixLe_AeL_6EYX1Fn8erQ9JmB50GaViXRZV_r4BHWmN1qT7yvruI8/s1600/bloggertrix.com-twitter-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://feeds.feedburner.com/bloggertrix" target="_blank" title="Subscribe Via RSS">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaI6Ys8eXhrxgqQWvZVzsZMvPYHKbmPBq8oCcsYlDyqkAQg-jFr4UEH7_hNnEZZm5oNXSJ67z9H0rtxEQl-93Re1Msby9GPSGbYAJOmm03xk1o5odqh7-ys0_f1cfkfqpo3HHzxaNjgqY/s1600/bloggertrix.com-rss-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://www.facebook.com/bloggertrix" target="_blank" title="Find Us On Facebook">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk7iTM4lyMigGD-jN7rhgUDxAlIcQdkNMs5XGLlfswBO5wJaIMKR0Ol9awGh_ayZ4AgwPqVgR8fSHh_HaK4xVPfPqca8e27p4UsNSzZhXvaxV6b473hVQJ54OzG4TCAtvGRaBaOO3uarY/s1600/bloggertrix.com-facebook-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="https://plus.google.com/107955298793879607964" target="_blank" title="Add me on Google+">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBVOjHuA6vPFmwkHOWizajesaOXuOIaDoIwavvsjAgo4gzB3ISxTOxhYwdkkchWu7tvEy7_D6ccU3nSmCfuS6n4zMY86XZ-3I1Wya__tWJaYEGr7xIImHSYFEtDX2J5pCzcXZP9bFNXj8/s1600/bloggertrix.com-google-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://youtube.com/UserId" target="_blank" title="youtubr subscribe">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIqzeANlHOJ4KMHtv5xYCq3CDlSWyUPcCEXh-aNNKV_rmnNx4-akpi1Cvih4L5dNiuNQnmBPRjE7fEwCugAg-mTcBh1f2Z1M3bJS9FDVoV0-xpm8p2zjp0K40tnYKDdETM7YRtrLTJQhc/s1600/bloggertrix.com-youtube-icon.png" style="height: 25px; width: 25px;" /></a>
</td></tr>
</tbody></table>
</div>
<input class="footer-submit-btn" id="footer-subscribe-btn" type="submit" value="Subscribe" />

<div class="clr">
</div>
</form>
</div>


Replace bloggertrix with your Feedburner ID
Replace bloggertrix with your Facebook username
Replace bloggertrix with your Twitter Username
Replace 107955298793879607964 with your Google plus Id Username
Replace UserId with your Twitter Username

5. Now save your HTML/Javascript'.

    You are done...
If you need any help regarding this. Just comment or  contact me via contact us page.

0 comment:

Post a Comment

Back To Top