Social Media Subscribe Us With FontAwesome Icons Widget For Blogger

0
Social Media Subscribe Us With FontAwesome Icons Widget For Blogger
Hello guys,Today we are going to teach you how to install sidebar subscription box widget in blogger template by using fontawesome icon and social media profile links and backlink too.This stylish subscription box gadget have some good features like, Fully Responsive Design,very easy to customize the colors of the subscription box,and it also have social media profile links in bottom,and most important we have used fontawesome icons to display social media icons and it has hover effect too.Subscribe us widget is purely made with CSS and HTML.To grab this widget/gadget box just follow the steps mentioned below.

How to add subscribe us/Join Our Newsletter widget in blogger template

installation steps:

Step 1. Open https://www.blogger.com and Sign in to your account
Step 2. Now From Blogger Dashboard click on ->Template ->Edit HTML 
Step 3. Now Search for the following <head> tag and paste the below CSS Link After <head>.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>.
Note:If your blogger template already have fontawesome icons CSS link then skip the above step. 

Step 4. Now save your template.
Step 5. Now go to your Layout section.
Step 6. Now Click on "Add a Gadget" Button and Add "HTML/JAVASCRIPT" Widget.
Step 7. Now paste the following code in it and click on save.
<style>
/* ----------------------------------------------------
Sidebar Social Subscription Box Widget
Designed by :: http://www.Bloggersstand.com
Please Do Not Remove The Credits.
-----------------------------------------------------*/
#bloggersstand {
  padding: 0;
  padding-bottom: 5px;
  font-family: inherit;
  display: block;
  margin: 0;
  width: 100%;
  border-radius: 1px;
  border: 0;
  background: #363636;
}
#bloggersstand .main_tagline {
  padding: 0px 0px;
  line-height: 2.5em;
  font-size: 26px;
  margin: 0;
  height: 95px !important;
  overflow: hidden;
  font-weight: normal;
  color: #FFF;
  text-align: center;
  border: 0;
  background-color: #FF5959;
}
#bloggersstand .email_icon {
  display: table;
  margin: -35px auto 0px;
  font-size: 25px;
  padding: 12px;
  height: 25px;
  width: 25px;
  background-color: #363636;
  color: #FFF;
  border-radius: 50px;
  border: 10px solid #FFFFFF;
  line-height: 0;
}
#bloggersstand p {
  font-size: 15px;
  color: #F9F9F9;
  text-shadow: 0px -1px 0px #000;
  line-height: 27px;
  padding: 5px 10px 5px;
  text-align: center;
  width: 80%;
  margin: 5px auto 20px;
  border-bottom: 2px solid #6A6A6A;
  border-radius: 20px;
}
#bloggersstand .rssform {
  padding: 0;
  margin: 0 auto;
  display: block;
}
#bloggersstand .rssform input {
  padding: 8px;
  margin: 20px auto 15px;
  font-size: 13px;
  color: #000;
  text-align: center;
  display: block;
  font-family: inherit;
  font-weight: normal;
  width: 90%;
  height: 38px;
  text-transform: uppercase;
  outline: none !important;
  border: 1px solid #FFFFFF;
  border-radius: 1px;
  background-color: #FCFCFC;
  box-sizing: border-box !important;
}
#bloggersstand .rssform .button:hover {
  background: #000000;
}
#bloggersstand .rssform .button {
  background: #FF5959;
  color: white!important;
  border: 1px solid #FFFFFF;
  margin-top: 15px;
  outline: none !important;
  transition: all .3s ease-in-out;
  padding: 5px 2px !important;
  float: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
}
#bloggersstand .bottom_lock_policy {
  background: url(https://2.bp.blogspot.com/-MO4fAHBEekk/Vnuc4-kIVpI/AAAAAAAACsE/mHL6EePP7Gk/s1600/Lock-bloggersstand.png) no-repeat 3% -2px;
  color: #959595;
  text-align: center;
  font-size: 12px;
  margin: 0;
  padding: 3px;
  line-height: 25px;
}
#bloggersstand .bottom_lock_policy a {
  color: #959595;
  text-decoration: none !Important;
}
#bloggersstand .social_profiles {
  line-height: 1.2em;
  display: table;
  float: none;
  margin: 0px auto;
  text-align: center;
  min-width: 157px;
  padding: 5px 0px;
  border: 0;
}
#bloggersstand .social_profiles a:hover {
  color: #FFF;
  background-color: #666666;
  border-color: #FFF;
}
#bloggersstand .social_profiles a {
  color: #000000;
  margin: 0 5px;
  text-align: center;
  float: left;
  display: table;
  padding: 4px 5px;
  background-color: #FFFFFF;
  border-radius: 50px;
  border: 2px solid #2D2D2D;
  width: 15px;
  height: 15px;
  line-height: 0;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
#bloggersstand form {
  margin-bottom: 10px !important;
}
</style>
<div id="bloggersstand">
            <div class="main_tagline">Join Our Newsletter</div><div class="email_icon"><i class="fa fa-envelope"></i></div>
                 <p>Get Free Updates On Blogging Tips & News From Bloggersstand</p>
   <div class="rssform">
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggersstand', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" name="email" placeholder="Enter your email address...">
            <input type="hidden" value="bloggersstand" name="uri">
            <input type="hidden" name="loc" value="en_US">
            <input value="Join Now" class="button" type="submit">
            </form>
            </div>
      <div class="bottom_lock_policy">Safe With us! | <a href="http://www.bloggersstand.com/2015/12/add-sidebar-social-subscription-gadget-for-blogger-template.html">Get This Widget</a>   </div>
   <div class="social_profiles">
   <a href="http://www.facebook.com/bloggersstand" target='_blank' rel='nofollow' title="Join on Facebook"><i class="fa fa-facebook"></i></a>
   <a href="http://www.twitter.com/bloggersstand" target='_blank' rel='nofollow' title="Follow on Twitter"><i class="fa fa-twitter"></i></a>
   <a href="http://plus.google.com/+bloggersstand" target='_blank' rel='nofollow' title="Follow on Google+"><i class="fa fa-google-plus"></i></a>
   <a href="http://www.pinterst.com/bloggersstand" target='_blank' rel='nofollow' title="Follow on Pinterest"><i class="fa fa-pinterest"></i></a>
   </div>
            </div>

 Customization:

  • To change the  background color or color scheme of the subscription widget replace #666666  with your desired color hex value.you can choose colors from here.Color wheel picker,Color code generator.
  • To change the headlines of the widget replace above line in red colors.
  • To replace the social media profile links and rss change above lines in green color with your username.

That's it folks !
We hope this article helped you to learn How To Add  Responsive Social Media Subscribe Us With FontAwesome Icons Widget For Blogger Template.If you liked this article please Join us on Facebook,Twitter,Google Plus.
Social media subscription widget,join our newsletter gadget,social media sharing profile link using fontawesome icons blogger template sidebar unique stylish pure css and html widget gadget for blogger template.
Hello guys,Today we are going to teach you how to install sidebar subscription box widget in bl...
SUMMARY

Social media subscription widget,join our newsletter gadget,social media sharing profile link using fontawesome icons blogger template sidebar unique stylish pure css and html widget gadget for blogger template.

You Might Also Like:

We hope this article helped you to learn Social Media Subscribe Us With FontAwesome Icons Widget For Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Social Media Subscribe Us With FontAwesome Icons Widget For Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand