Add Floating Ticker Subscription Box for Blogger

Recently I shared an Awesome Popular Post Widgets for your Blog. Now, today I’m with another Awesome Widgets for Blogger i.e Floating Ticker Subscription Box. Yes, this is an subscription box for blogger. This widget will lets your visitors to subscribe easily in one click. Social media widget is a way to increase subscriber into your blog. So nowadays bloggers are required to add social subscriber widget into their blog. So I thought for a while and now planned to make some new attractive Subscription box for Blogger.

Add Floating Ticker Subscription Box for Blogger

Earlier, I shared an Cool Notification Bar for Blogger. Now, finally I have designed the Floating Ticker Subscription widget with Open, Close buttons for my loyal readers. This widget will surely make the users to click it and make them subscribe to your email newsletters updates. You can find many subscription boxes over the internet for blogger. But, this new widget has used to make some variation. Now, I’m here to share this awesome widget with you.

Well, before starting my tutorial, I would like to share some features of this new Ticker Subscription Box. This widget is allowing the users to choose their own descisions by Opening it and by Closing the Subscription box as they like. It will hide when the users Press the Close Button. If they want to subscibe it, then they need to click the Open button. I’ve added cool bluish background for this awesome widget and with the White color for the fonts. This will widget will load faster like your blog. So don’t need to worry about it’s loading speed. You can take a live demo at my site or I’ve added an Gif image below,

Add Floating Ticker Subscription Box for Blogger

Hope this widget you would love it and it will help to increase your subscriber easily. See the live demo at here before install it into your blog. For adding it to your blog just follow the below steps.

Adding Style to Ticker Subscription Box in your Blog

Step 1: Go To Blogger >> Template and Backup your Template.

Step 2: Now, click “Edit HTML”

Step 3: Now search for </b:skin> by pressing Ctrl +F.

Step 4: Then paste the following code given bellow just Above/ Before </b:skin>

/* Ticker Floating Box */
.tickerd-box label {
position: fixed;
left: 100%;
z-index: 55555;
font: 15px oswald;
color: #fff;
background: url(“http://1.bp.blogspot.com/-BVn12-XaG1c/UfZOYXhJLQI/AAAAAAAAGvM/tLPexMCnHps/s1600/open_button.png”);
width: 78px;
height: 28px;
border: 3px solid #EBD90F;
top: 0;
-webkit-transition: .5s;
-moz-transition: .3s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
border-top: 0;
cursor: pointer;
}
.tickerd-box input[type=”checkbox”]:checked ~ .ticker-info {
top: 0;
}
.tickerd-box input[type=”checkbox”]:checked ~ label {
background: url(“http://4.bp.blogspot.com/-JVwKLm6UX3Q/UfZOX-MtEoI/AAAAAAAAGvE/709wapZ7Rh4/s1600/close_button.png”);
border-color: #fff;
}
.ticker-info h4 {
font: 85px Oswald;
margin: 18px;
}
.ticker-info p {
font: 28px Advent Pro;
margin: 9px 0;
}
.ticker-info span {
font: 24px oswald;
margin: 0;
}
.ticker-info form {
margin: 1em;
}
.ticker-info input[type=”text”] {
border: 1px solid #fff;
color: #fff;
background: transparent;
padding: 5px 10px;
font: 14px oswald;
width: 15%;
outline: none;
margin: 0;
}
.ticker-info input[type=”submit”] {
background: transparent;
color: #fff;
border: 1px solid #fff;
padding: 5px 9px;
margin: 0;
font: 500 15px oswald;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
cursor: pointer;
}
.ticker-info input[type=”submit”]:hover {
background: #fff;
color: #000;
}
.tickerd-box input[type=”checkbox”] {
display: none;
}
.ticker-info {
position: fixed;
z-index: 10004;
top: -49em;
left: 0;
text-align: center;
background: #3E85F0;
color: #fff;
width: 100%;
-webkit-transition: .5s;
padding: 1em 0;
}
.tickerd-box label {
position: fixed;
left: 100%;
z-index: 55555;
font: 14px oswald;
color: #fff;
background: url(“http://1.bp.blogspot.com/-BVn12-XaG1c/UfZOYXhJLQI/AAAAAAAAGvM/tLPexMCnHps/s1600/open_button.png”);
width: 80px;
height: 30px;
border: 3px solid #EBD90F;
top: 0;
-webkit-transition: .5s;
-moz-transition: .3s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
border-top: 0;
cursor: pointer;
}
.tickerd-box input[type=”checkbox”]:checked ~ .ticker-info {
top: 0;
}
.tickerd-box input[type=”checkbox”]:checked ~ label {
background: url(“http://4.bp.blogspot.com/-JVwKLm6UX3Q/UfZOX-MtEoI/AAAAAAAAGvE/709wapZ7Rh4/s1600/close_button.png”);
border-color: #fff;
}
.ticker-info h4 {
font: 90px Oswald;
margin: 20px;
}
.ticker-info p {
font: 30px Advent Pro;
margin: 10px 0;
}
.ticker-info span {
font: 25px oswald;
margin: 0;
}
.ticker-info form {
margin: 1em;
}
.ticker-info input[type=”text”] {
border: 1px solid #fff;
color: #fff;
background: transparent;
padding: 5px 10px;
font: 15px oswald;
width: 16%;
outline: none;
margin: 0;
}
.ticker-info input[type=”submit”] {
background: transparent;
color: #fff;
border: 1px solid #fff;
padding: 5px 10px;
margin: 0;
font: 500 15px oswald;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
cursor: pointer;
}
.ticker-info input[type=”submit”]:hover {
background: #fff;
color: #000;
}
.tickerd-box input[type=”checkbox”] {
display: none;
}

Adding Ticker Subscription Box in your Blog

Step 5: Now, add the following code just After/ Below <body> tag in your template.

<div class=’tickerd-box’>
<input id=’tick-box’ name=’tickbox’ type=’checkbox’/>
<label for=’tick-box’></label>
<div class=’ticker-info’>
<h4>Join Our Club</h4>
<p>SIGNUP To Our EMail Newsletter And Receive Updates Right In Your INBOX.</p>
<p>Get Free Access To All The Tutorials</p>
<span>JUST ENTER YOUR EMAIL ADDRESS TO GET ACCESS.</span>
<form action=’http://feedburner.google.com/fb/a/mailverify’ method=’post’ onsubmit=’window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=triposoft&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true’ target=’popupwindow’>
<center>
<input name=’email’ onblur=’if (this.value == “”) {this.value = “enter your email address…”;}’ onfocus=’if (this.value == “enter your email address…”) {this.value = “”}’ size=’20’ type=’text’ value=’enter your email address…’/>
<input name=’uri’ type=’hidden’ value=’triposoft‘/>
<input name=’loc’ type=’hidden’ value=’en_us’/>
<input class=’submit’ type=’submit’ value=’SignUp’/>
</center>
</form>
</div>
</div>

Step 6: Now just replace “triposoft” with your Feedburner id.
Step 7: Now click the Save Template button and check your blog. 

That’s it! I hope your Subscription Box widget is so Awesome than the previous one. I hope you have like this awesome widget. Kindly share this Awesome Widget with your friends and share your thoughts in comments. If you have got any problems then make us to know it in comments below. Cheers 🙂
About Harshit Jain

Harshit Jain is a passionate blogger, entrepreneur & digital marketer from India. He is founder of TripoSoft.com, He likes to share his knowledge through his own blog at TripoSoft & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge