Search

Home » BLOGGING TUTORIAL » Add Floating Email Subscription Widget to Your Blog

Nov 5, 2016

Add Floating Email Subscription Widget to Your Blog

at 7:48 AM
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'
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://
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...">
<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>
<div class="bottom_lock_policy">We
Respect Your Privacy | <a href="http://ift.tt/2eoQuT6">Get This Widget</a> </
div>
   <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>
   <a href=" http://www.twitter.com/
Chi_obinna" target='_blank' rel='nofollow'
title="Follow on Twitter"><i class="fa fa-
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>
#FF5959
title="Follow on Pinterest"><i class="fa fa-
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.


Tags: WMF
October 30, 2016 at 08:15PM
Open in Evernote

0 comments:

Post a Comment

 

Follow us