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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFzvTu5q1vWUlGribuGiLoUtVJWRkO579mGQLF_tOooNI6hWjwiIBobfu6nZJWv2VoDXQkrugxJ0McermysFZbgwOHHPjYR8CjzC-bLQC0TBTkFG4a_n-gSmsFu-eXkTDbSYtHLKUoTesX/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.