Email Subscription Widget Blogger.
Get more Email subscribers to your blog, with this stylish Emails subscription widget made with pure css code.
This will help increase your blog load speed.
1. Login to your blogger account.
Click on Template, Edit Html, click on the blog Template, click on the ctrl+f key on you keyboard for windows and cmd+f on Mac.
Features Of The Sidebar Subscription Box.
1) Fully Responsive Design.
2) simple and Super easy to customize the colors and text content.
3) Social Profiles' Links in the bottom.
4) Beautifu hover effect, with font awesome icons.
5) Loads faster, because it is made up of pure CSS code.
Now search for the <head> rage and paste the font awesome code below it.
<link href='http://
http://ift.tt/YLkwbr
awesome/4.3.0/css/font-awesome.css'
http://ift.tt/YLkwbr
awesome/4.3.0/css/font-awesome.css'
rel='stylesheet'/>
Save your template and go to layout click on the Add Gadget option. A new pop up window will appear, click on the + sign on the right side of add a HTML code.
Copy the code below and paste it inside the box that appear, leave the title box at the top empty.
Don't click on the save button yet
<style>
/* ----------------------------------------------------
Sidebar Subscription Box Widget = V.2
Designed by :: http://
www.TwistBlogger.com
Keep These Credits Intact, Do Not Remove
-----------------------------------------------------*/
#twist-blogger-sbox-v2 {
padding: 0;
padding-bottom: 5px;
font-family: inherit;
display: block;
margin: 0;
width: 100%;
border-radius: 1px;
border: 0;
background: #363636;
}
#twist-blogger-sbox-v2 .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;
}
#twist-blogger-sbox-v2 .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;
}
#twist-blogger-sbox-v2 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;
}
#twist-blogger-sbox-v2 .rssform {
padding: 0;
margin: 0 auto;
display: block;
}
#twist-blogger-sbox-v2 .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;
}
#twist-blogger-sbox-v2 .rssform
.button:hover {
background: #000000;
}
#twist-blogger-sbox-v2 .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;
}
#twist-blogger-sbox-
v2 .bottom_lock_policy {
background: url
(http://ift.tt/Pr3JSs
kYVqV9JYDHY/VPMC8jPKTGI/
AAAAAAAAA28/zxv0TYRIZe4/s1600/
Lock-twistblogger.png) no-repeat 3% -2px;
color: #959595;
text-align: center;
font-size: 12px;
margin: 0;
padding: 3px;
line-height: 25px;
}
#twist-blogger-sbox-
v2 .bottom_lock_policy a {
color: #959595;
text-decoration: none !Important;
}
#twist-blogger-sbox-v2 .social_profiles {
line-height: 1.2em;
display: table;
float: none;
margin: 0px auto;
text-align: center;
min-width: 157px;
padding: 5px 0px;
border: 0;
}
#twist-blogger-sbox-v2 .social_profiles
a:hover {
color: #FFF;
background-color: #FF5959;
border-color: #FFF;
}
#twist-blogger-sbox-v2 .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;
}
#twist-blogger-sbox-v2 form {
margin-bottom: 10px !important;
}
</style>
<div id="twist-blogger-sbox-v2">
<div class="main_tagline"> Join Our
Newsletter</div><div
class="email_icon"><i class="fa fa-
envelope"></i></div>
<p> Get All The Latest Updates
Delivered Straight Into Your Inbox For
Free!</p>
<div class="rssform">
<form action="http://
http://ift.tt/ttr54b"
method="post" target="popupwindow"
onsubmit="window.open('http://
/* ----------------------------------------------------
Sidebar Subscription Box Widget = V.2
Designed by :: http://
www.TwistBlogger.com
Keep These Credits Intact, Do Not Remove
-----------------------------------------------------*/
#twist-blogger-sbox-v2 {
padding: 0;
padding-bottom: 5px;
font-family: inherit;
display: block;
margin: 0;
width: 100%;
border-radius: 1px;
border: 0;
background: #363636;
}
#twist-blogger-sbox-v2 .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;
}
#twist-blogger-sbox-v2 .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;
}
#twist-blogger-sbox-v2 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;
}
#twist-blogger-sbox-v2 .rssform {
padding: 0;
margin: 0 auto;
display: block;
}
#twist-blogger-sbox-v2 .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;
}
#twist-blogger-sbox-v2 .rssform
.button:hover {
background: #000000;
}
#twist-blogger-sbox-v2 .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;
}
#twist-blogger-sbox-
v2 .bottom_lock_policy {
background: url
(http://ift.tt/Pr3JSs
kYVqV9JYDHY/VPMC8jPKTGI/
AAAAAAAAA28/zxv0TYRIZe4/s1600/
Lock-twistblogger.png) no-repeat 3% -2px;
color: #959595;
text-align: center;
font-size: 12px;
margin: 0;
padding: 3px;
line-height: 25px;
}
#twist-blogger-sbox-
v2 .bottom_lock_policy a {
color: #959595;
text-decoration: none !Important;
}
#twist-blogger-sbox-v2 .social_profiles {
line-height: 1.2em;
display: table;
float: none;
margin: 0px auto;
text-align: center;
min-width: 157px;
padding: 5px 0px;
border: 0;
}
#twist-blogger-sbox-v2 .social_profiles
a:hover {
color: #FFF;
background-color: #FF5959;
border-color: #FFF;
}
#twist-blogger-sbox-v2 .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;
}
#twist-blogger-sbox-v2 form {
margin-bottom: 10px !important;
}
</style>
<div id="twist-blogger-sbox-v2">
<div class="main_tagline"> Join Our
Newsletter</div><div
class="email_icon"><i class="fa fa-
envelope"></i></div>
<p> Get All The Latest Updates
Delivered Straight Into Your Inbox For
Free!</p>
<div class="rssform">
<form action="http://
http://ift.tt/ttr54b"
method="post" target="popupwindow"
onsubmit="window.open('http://
http://ift.tt/ttr54b?
uri=legendyechny.blogspot', 'popupwindow',
'scrollbars=yes,width=550,height=520');ret
urn true">
<input type="text" name="email"
placeholder="Enter your email address...">
urn true">
<input type="text" name="email"
placeholder="Enter your email address...">
<input type="hidden"
value=" legendtechny.blogspot" name="uri">
<input type="hidden" name="loc"
value="en_US">
<input value="Join Now"
class="button" type="submit">
</form>
</div>
value="en_US">
<input value="Join Now"
class="button" type="submit">
</form>
</div>
<div class="bottom_lock_policy">We
Respect Your Privacy | <a href="http://ift.tt/2eoQuT6">Get This Widget</a> </
div>
<div class="social_profiles">
<div class="social_profiles">
<a href=" http://ift.tt/eIlFV0
Legendtechny.blogspot " target='_blank' rel='nofollow'
title="Join on Facebook"><i class="fa fa-
facebook"></i></a>
facebook"></i></a>
<a href=" http://www.twitter.com/
Chi_obinna" target='_blank' rel='nofollow'
title="Follow on Twitter"><i class="fa fa-
twitter"></i></a>
twitter"></i></a>
<a href=" http://plus.google.com/
+ostani " target='_blank' rel='nofollow'
title="Follow on Google+"><i class="fa fa-
google-plus"></i></a>
google-plus"></i></a>
#FF5959
title="Follow on Pinterest"><i class="fa fa-
pinterest"></i></a>
</div>
pinterest"></i></a>
</div>
</div>
How to customize the css code.
1. Change this 3 highlighted #FF5959 color code to any code of your choice.
2. Change the three highlited social profile URL to your own URL.
<a href=" http://plus.google.com/
+ostani " target='_blank' rel='nofollow
<a href=" http://www.twitter.com/
Chi_obinna
<a href=" http://ift.tt/eIlFV0
Legendtechny.blogspot
3. Edit the bold highlited texts with any text of your choice, except my blog name replace it with your blog name.
...After Customizing The CSS Code, Now Click On Save Button.
Add Floating Email Subscription Widget to Your Blog
4/
5
By
Editorial Board
Dear Reader! We’re enthusiastic to see your comment but after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me.
Let’s enjoy a personal and evocative conversation. Thank You!