8 Creative Ways To Show Email Subscription Form in Blogger
Do you know what a Email subscribe box or Subscription Form is? A box which brings high traffic to your blog. People just put their email address in an ordinary box and then click on the "Subscribe" button and then, they would get all your blog's new material right on their email's Inbox and if you have feedburner's summary feature enabled, they will come to your blog by reading an interesting heading on the reached email.
So today, I am going to tell you 8 ways to show a subscribe box on a blogger blog. These different eight ways will force your blog's visitor to put their email on that ordinary box. Let's see what are the 8 ways!:
8 ways to show a subscribe box:
- Subscribe box from a hyperlinked text.
- Subscribe box from a hyperlinked and floating image.
- Subscribe box on a pop-up box after few second a visitor reach at the page.
- Subscribe box when a visitors goes to exit from a page (Lightbox Popup).
- Subscribe box on sidebar as a widget.
- Subscribe box below every post.
- Subscribe box on a floating hidden frame.
- Subscribe box when a visitor reach at the end of the page.
Let?s describe these 8 ways and also, how to add them in your blogger blog one by one!
#1. Subscribe box from a hyperlinked text
Its like hyperlinking a text but instead of a url, we'll put a subscribe box's link on it that will show a nice subscribe box when clicked. When your blog's visitors will click the hyperlinked text, a small beautiful and light weight subscribe box will appear with a subscription teaser and of course! with a subscribe box and a subscribe button. You can use this on your blog's header and hyperlink a text like 'Subscribe Us' so that, when a blog's visitor click the 'Subscribe Us' text, a small box will appear and ask the email of the visitor.
DEMO: See live demo here.
Let?s know, how to add it on your blogger blog:
- Go to Blogger Dashboard > Template > Edit HTML
Now, you have to add some CSS (Cascade Styling Script) to make the subscribe box beautiful.
- Search for ']]></b:skin>' on your template.
- Paste the following CSS above ']]></b:skin>':
.newsletter-sm
background:#fff;
width: 100%;height: 253px;
margin: 0;
padding: 20px;
.newsletter-sm form
padding: 10px;
margin-top: -37px;
.newsletter-sm h3
color: #FFF;
font-family: algerian;
font-size: 24px;
font-weight: normal;
text-align: center;
padding: 10px;
text-shadow: 2px 2px 2px #000;
margin-top: -18px;
box-shadow: 0px 0px 5px 2px #000;
margin-right: -20px;
position: static;
margin-left: -20px;
margin-bottom: 10px;
background: #009EFF;
.text
font-size: 14px;
color: #FFF;
margin-left: -20px;
padding-bottom: 28px;
margin-right: -20px;
background: #009EFF;
font-family: cursive;
line-height: 20px;
.newsletter-sm .fa
float: left;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 16px;
padding-top: 7px;
font-size: 140px;
.newsletter-sm .newsletter-input-sm border: 0;
padding: 5px 10px;
width: 69%;
float: left;
height: 40px;
font-family: oswald;
color: #555;border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
.newsletter-sm .newsletter-sm-bot background: #009EFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3l6rY_xBgu4Fqeh6bNrnufa5cv9Zc9oZ-6vegHIssRFWOm6VWNSnMc6CYy3rt-il7hK1wF2RmuMNctz6rHWbEFqMkwV5ecUoGnJDeR7GJGfxqLGrFNzC71Je1hW0acs1UJxtvWBTqGZg/s1600/bg.png) no-repeat;
margin: 27px -30px 0px;
height: 64px;
padding-left: 16px;
padding-top: 16px;
.newsletter-sm .newsletter-button-sm
float: right;
height: 50px;width:23%
display: inline-block;
text-shadow: 2px 2px 1px #000;
font-size: 16px;
font-family: oswald;
padding: 10px 22px;
position: relative;
color: #fff;
text-align: center;
margin-right: 16px;
background: #009EFF;
border: 1px solid #fff;
cursor: pointer;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
.modalDialog
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.6);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 200ms ease-in;
-moz-transition: opacity 200ms ease-in;
transition: opacity 200ms ease-in;
pointer-events: none;
.modalDialog:target
opacity:1;
pointer-events: auto;
.modalDialog:target > div
margin: 8% auto;
.modalDialog > div
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
width: 500px;
position: relative;
margin: 5% auto;
background: #fff;
min-height: 200px;
h2.signup
background:#00aa9f;
border-bottom: 1px solid #008d84;
font-weight: normal;
text-align:center;
padding: 10px;
color:#fff;
font-size: 18px;
.close
color: #888!important;
position: absolute;
top: 1px;
right: -40px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 16px;
.close:hover text-decoration:none;
.close:hover color:#555;
Now, this is the time to add the main html that is required for this subscribe box.
- Search for '</body>' and above it, paste following code:
<div class="modalDialog" id="signup">
<div>
<a class="close" href="#close" title="Close"><i class="fa fa-times"></i></a>
<div class="signup-container">
<div class="newsletter-sm">
<h3>Subscribe to Newsletter</h3>
<div class="text"><i class="fa fa-envelope"></i><br><div class="texts">Subscribe us to get all our juicy article fastly. You know how and where? Directly on your inbox! Just enter your nice and good looking email id below and click on subscribe button! After that, verify it through the verification email and start learning more!</div></div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<div class="newsletter-sm-bot">
<input class="newsletter-input-sm" name="email" placeholder="Enter Your Email" type="text">
<button class="newsletter-button-sm" type="submit">Subscribe</button>
</div>
<input name="uri" type="hidden" value="tntbystc">
</form>
</div>
</div>
</div>
</div>
- Now, save your template.
Customization:
- Replace tntbystc with your feedburner username.
- You can replace text by editing the highlighted code.
How to hyperlink a text to show the subscribe box?
Now, almost everything is done. Whenever you wish to hyperlink a text, so that, the text will show a subscribe box when clicked, you have to use following piece of code:
<a href='#sign-up'>YOUR TEXT HERE</a>
Do you know? You can use this to hyperlink on an image too! Just use below piece of code:
<a href='#signup'><img src='IMAGE URL GOES HERE' alt='IMAGE DESCRIPTION' title='IMAGE DESCRIPTION'/></a>
Done! You can check it by going on your blog and clicking the text or image for which you have used the above code.
Note: This hyperlink can be added multiple times on texts on same page.
#2. Subscribe box from a hyperlinked and floating image
Instead of hyperlinking a text, why not we hyperlink a floating image? This will attract your visitor's eyes too! This time, an floating image will appear at the left-bottom or right-bottom or left-top or right-top of the page. When a visitor click on that image, a nice subscribe box will appear teasing them to put their email in the box!
DEMO: See Live Demo
Let?s know how to add it on your blogger blog:
- Same, Go to Blogger Dashboard > Template > Edit HTML
- To make this subscribe box good looking, you have to add some CSS codes. Search for "]]></b:skin>"
- Paste the following code above "]]></b:skin>"
#subscribe-button
float: left;
position: fixed;
bottom: 5%;
left: 0;
z-index: 999;
#subscribe-widget
display: none;
/* Overlay */
#mbt-overlay
background-color: #000;
/* Container */
#mbt-container
height: 350px!important;
width: 63%!important;
min-height: 350px;
min-width: 500px;
color: #222;
background-color: #fff;
border: 4px solid #ddd;
#mbt-container .mbt-data
padding: 8px;
#mbt-container a.mbtCloseImg
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6q0JqPKTpTWwW7qiZgqdrXe40wtBLEef0fm-8oCS_zpTERs01-nrPLJBosNN-VK6QLMlCRMfwZ-9gr5miBa-j8AcojX7tq90C_x2pbJ-l3xze7bnipXwgaw0GHtoih441ty_H45_AWTIJ/s1600/mbt-close-button.png) no-repeat;
width: 25px;
height: 29px;
display: inline;
z-index: 3200;
position: absolute;
top: -15px;
right: -16px;
cursor: pointer;
.subscribeheader
padding: 5px;
padding-left: 21px;
text-shadow: -3px -2px 5px #000;
box-shadow: 2px 2px 11px 1px #000000;
background: #FF8100;
color: rgba(255, 255, 255, 1);
padding-top: 11px;
border-radius: 11px;
text-rendering: optimizeSpeed;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
margin-bottom: 30px;
letter-spacing: 4px;
text-align: center;
font-family: monotype corsiva;
border: 2px dashed #FFF;
font-size: 50px;
#description
color: #AAAAAA;
font-family: times New Roman;
font-size: 25px;
font-style: italic;
float:left;
line-height: 34px;
#description img
float: right;
height: 100px;
padding: 0 25px 0 10px;
width: 100px;
#mbtfollowForm
padding: 15px;
#mbtfollowForm p
margin: 0 0 10px;
input[type="submit"]
background: #FA9227;
box-shadow: 2px 2px 1px 1px #838383!important;
width: 25%!important;
padding-left: 0px!important;
margin-left: 17px;
#mbtfollowForm input:not([type="checkbox"])
width: 67%;
margin-top: 20px;
margin-bottom: 20px;
font-family:oswald;
height:33px;
float:left;
padding: 10px 5px 10px 25px;
border: 1px solid rgb(178, 178, 178);
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
#mbtfollowForm input:not([type="checkbox"]):active, #mbtfollowForm input:not([type="checkbox"]):focus
border: 1px solid rgba(91, 90, 90, 0.7);
background: rgba(238, 236, 240, 0.2);
-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
<!--[if lt IE 7]> #mbt-container a.mbtCloseImg
background: none;
right: -14px;
width: 22px;
height: 26px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6q0JqPKTpTWwW7qiZgqdrXe40wtBLEef0fm-8oCS_zpTERs01-nrPLJBosNN-VK6QLMlCRMfwZ-9gr5miBa-j8AcojX7tq90C_x2pbJ-l3xze7bnipXwgaw0GHtoih441ty_H45_AWTIJ/s1600/hb-close-button.png', sizingMethod='scale');
#mbtfollowForm input
padding: 10px 5px 10px 32px;
width: 93%;
#mbtfollowForm input[type=checkbox]
width: 10px;
padding: 0;
<![endif]-->
- Now, to make the floating image appear, search for ?</body>?
- Paste the following chunk of code above ?</body>?
<div id="subscribe-button">
<a class="subscribe" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIISw-XWY4l0PqpaGfXpujNY2VDfSSj8yL1pUrX_L3c1q1dEn4JOp7P4QdqrbZa94PDnZ_aiWmcpfCNcMKK-A8npMefviJ8zSiVJhiXPUrbQD4dkr9GcgzcpyN9flgSVy6jo2vJR2pHHtl/s1600/hb-email-icon.png" alt="subscribe" /></a>
</div>
<div id="subscribe-widget">
<div id="mbtfollowForm">
<div class="subscribeheader">Subscribe Us</div>
<div id="description">
<img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZOpLSmEtr-WG9LDjrulbQQ1FexnkmH6y1uiLgi-Sel9mclqnEoEINr5_FFGcKCa7SS26P3lH-17Ep3Xps_QD6i53l5f8PfrvFB4xkt05pM8iGogsUXre1ZODuT8ubm4GkIfYIz5OsYARl/s1600/hb-email-icon1.PNG">Subscribe to our mailing list to get the updates to your email inbox... We can't wait more to have your email in our subscribers email list. Just put your nice email in below box:</div>
<form
action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"
target="popupwindow">
<input name="email" placeholder="Enter Your Email..." required="required"
type="text" />
<input name="uri" type="hidden" value="tntbystc" />
<input name="loc" type="hidden" value="en_US" />
<div class="button">
<input type="submit" value="Subscribe" />
</div>
</form>
</div>
</div>
<script src="https://googledrive.com/host/0B8acxOz46qBZckxsanR6Rm1KTms" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function (a)
a("#subscribe-button .subscribe").click(function (b)
a("#subscribe-widget").modal();
return false
)
)
</script>
- Save your template and you?re done!
Customization:
Yeah! Customization on the above code as following:
- If you want that image to be displayed in left, then change right to left in above code.
- If you want that image to be displayed in the top of the page, then change bottom with top.
- If you want to change the text or subscription teaser, then just replace the highlighted code.
- Change tntbystc with your feedburner username in above code.
#3. Subscribe box on a pop-up box after few second a visitor reach at the page
Nowadays, this one of the most common way to show a subscription box in a blogger blog. Many third party tools are providing this widget for free. One of the best tool that provide the pop up email subscription tool is GetSiteControl. Let's know how to add it:
- Go to GetSiteControl sign up page
- Sign up by filling the fields (email, passwords and website) and click on red 'Sign up for free' button.
- On next page, click on that green 'Create Widget' button and choose 'Subscribe' from the dropdown.
- Choose and modify your settings while creating the Subscribe Widget and at last, click on 'OK' button.
- On the next page, click on 'Activate Now' button, So that, it will activate the subscribe widget.
- Now, are you able to see a red colored bar? (as shown in below picture).
- Click on that black ?Install? button.
- On the next page, four or five line JavaScript would be given. Copy that and place in on your blog's template before '</body>'
- Now, just look at the top bar. Their, click on 'Site Settings':
- After clicking on 'Site Setting', you will see a Mail Chimp option on the screen. On the given box, put your Mail Chimp's API key, click on Connect button.
- You are done!
#4. Subscribe box when a visitors goes to exit from a page
Yes! If visitor has enjoyed your articles, he/she will surely subscribe to your blog if he get a nice subscribe box in front of him. So, its a good idea to show a subscribe box when your blog's visitor goes to exit from a page. This can be done by following all steps of way #2. The only thing you have to do different is-
- After modifying your settings, go to 'Behavior' tab from the widget creator.
- Choose & tick ?when the user is leaving the website?
- Click on OK button and you're done!
#5. Subscribe box on sidebar as a widget
Yeah! this is also a most common way to show a subscribe box in blogger. Not only common, but the easiest way to add a nice subscribe box on blogger blogs. MBT has published many subscription boxes that can be installed on your blogger blog. Here's a list of some:
Mashable Sharing Widget for Blogger
Create WordPress like Subscription Box- Add a Cool Feed Icon and Subscription Email Form to the Sidebar in Blogger!
#6. Subscribe box below every post
This is also a good way to get some more subscribers. This way increases your chances to get some new subscribers. Your visitors will surely subscribe to your blog if they found an enjoyable post and a subscription box below post, together. Here are some articles that were published by MBT before some time by which you can add a subscription box below every post on your blogger blog:
No Ordinary? Social Sharing & Subscription Widget- Subscription Box: Add an Attractive one below Post
Do You Like This Story?" - Best Blogger Widget!
#7. Subscribe box on a floating hidden frame
Did you ever seen floating Facebook like box near scroll bar?. Yeah! why not. floating Facebook like box is today one of the most famous & lovable widget of bloggers. Today, we are going to tell you a widget which works same as that Facebook like box but the difference is, this time, it is floating subscribe box.
DEMO: See live demo here.
DEMO: Live Demo
Let?s know how to add it:
- Go to Blogger Dashboard > Layout > Add a Gadget > HTML/JavaScript
- Now, leave the title box empty and move on content field.
- Paste below code on content field:
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() jQuery(".mbt").hover(function() jQuery(this).stop().animate(right: "0", "medium");, function() jQuery(this).stop().animate(right: "-250", "medium");, 500);); /*]]>*/ </script> <style type="text/css"> .mbtbackground: url("http://s12.postimg.org/gjpszngzx/Untitled_1_copy.png)" no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%; .mbt spanbottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999; .mbt span acolor: gray;text-decoration:none; .mbt span a:hovertext-decoration:underline; } </style>
<div class="mbt">
<div class="mbt-floating">
<div class="subscribe-mbt">Subscribe Us></div><br /><i class="fa fa-envelope"></i><br /><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<div class="newsletter-sm-bot">
<input class="newsletter-input-sm" name="email" placeholder="Enter Your Email" type="text" />
<button class="newsletter-button-sm" type="submit">Subscribe</button>
</div>
<input name="uri" type="hidden" value="tntbystc" />
</form></div></div>
<style>.mbt-floating
background: #F2F2F2;
height: 285px;
padding: 7px;
border: #444444 2px solid;
.subscribe-mbt
background: #444444!important;
padding: 8px!important;
text-shadow: -1px 0px 2px #000000;
color: #FFFFFF;
box-shadow: 0px 0px 7px -2px #000;
border: 2px dashed;
font-size: 20px;
font-family: algerian;
.mbt-floating .fa
font-size: 115px;
padding-left: 54px;
padding-bottom: 17px;
margin-top: -18px;
form
padding: 10px;
margin-top: -16px;
input.newsletter-input-sm
padding: 17px;
padding-top: 15px;
padding-bottom: 15px;
box-shadow: 0px 3px 4px 0px #000;
padding-left: 10px;
width: 84%;
margin-bottom: 15px;
border: 0;
button.newsletter-button-sm
background: #444444;
color: #FFF;
border: 0;
padding: 15px;
font-size: 14px;
text-shadow: 2px 2px 2px #000;
border-bottom: 2px solid #000;
border-radius: 6px;
width: 100%;
box-shadow: 0px 3px 2px 1px #000;
</style>
Customization:- Replace 'tntbystc' with your Feedburner username.
#8. Subscribe box when a visitor reach at the end of the post
This way of showing a subscribe box on blogger blog when a visitor reach at the end of the page can also help you in collecting some good subscribers. You can add this to your blogger blog by simply doing one step after doing all steps from way #3. Look at way #3's image and you will see an option- 'when the user reach at the bottom of the page? (option three); tick that option and click on OK button and done! When your visitor reach at the bottom of the page, a nice subscribe box will show up on your blogger blog.
Guest Author:
Shivansh Verma Skv is a 13 years old young blogger and a ninja member of "Blogger Help Forum". He loves to write about technology and web development. He has his own blog- Blogger Guiders You can connect with him on Google+ and Facebook . Thanks!
Do you know what a Email subscribe box or Subscription Form is? A box which brings high traffic to your blog. People just put their email address in an ordinary box and then click on the "Subscribe" button and then, they would get all your blog's new material right on their email's Inbox and if you have feedburner's summary feature enabled, they will come to your blog by reading an interesting heading on the reached email.
So today, I am going to tell you 8 ways to show a subscribe box on a blogger blog. These different eight ways will force your blog's visitor to put their email on that ordinary box. Let's see what are the 8 ways!:
8 ways to show a subscribe box:
- Subscribe box from a hyperlinked text.
- Subscribe box from a hyperlinked and floating image.
- Subscribe box on a pop-up box after few second a visitor reach at the page.
- Subscribe box when a visitors goes to exit from a page (Lightbox Popup).
- Subscribe box on sidebar as a widget.
- Subscribe box below every post.
- Subscribe box on a floating hidden frame.
- Subscribe box when a visitor reach at the end of the page.
Let?s describe these 8 ways and also, how to add them in your blogger blog one by one!
#1. Subscribe box from a hyperlinked text
Its like hyperlinking a text but instead of a url, we'll put a subscribe box's link on it that will show a nice subscribe box when clicked. When your blog's visitors will click the hyperlinked text, a small beautiful and light weight subscribe box will appear with a subscription teaser and of course! with a subscribe box and a subscribe button. You can use this on your blog's header and hyperlink a text like 'Subscribe Us' so that, when a blog's visitor click the 'Subscribe Us' text, a small box will appear and ask the email of the visitor.
DEMO: See live demo here.
Let?s know, how to add it on your blogger blog:
- Go to Blogger Dashboard > Template > Edit HTML
Now, you have to add some CSS (Cascade Styling Script) to make the subscribe box beautiful.
- Search for ']]></b:skin>' on your template.
- Paste the following CSS above ']]></b:skin>':
.newsletter-sm
background:#fff;
width: 100%;height: 253px;
margin: 0;
padding: 20px;
.newsletter-sm form
padding: 10px;
margin-top: -37px;
.newsletter-sm h3
color: #FFF;
font-family: algerian;
font-size: 24px;
font-weight: normal;
text-align: center;
padding: 10px;
text-shadow: 2px 2px 2px #000;
margin-top: -18px;
box-shadow: 0px 0px 5px 2px #000;
margin-right: -20px;
position: static;
margin-left: -20px;
margin-bottom: 10px;
background: #009EFF;
.text
font-size: 14px;
color: #FFF;
margin-left: -20px;
padding-bottom: 28px;
margin-right: -20px;
background: #009EFF;
font-family: cursive;
line-height: 20px;
.newsletter-sm .fa
float: left;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 16px;
padding-top: 7px;
font-size: 140px;
.newsletter-sm .newsletter-input-sm border: 0;
padding: 5px 10px;
width: 69%;
float: left;
height: 40px;
font-family: oswald;
color: #555;border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
.newsletter-sm .newsletter-sm-bot background: #009EFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3l6rY_xBgu4Fqeh6bNrnufa5cv9Zc9oZ-6vegHIssRFWOm6VWNSnMc6CYy3rt-il7hK1wF2RmuMNctz6rHWbEFqMkwV5ecUoGnJDeR7GJGfxqLGrFNzC71Je1hW0acs1UJxtvWBTqGZg/s1600/bg.png) no-repeat;
margin: 27px -30px 0px;
height: 64px;
padding-left: 16px;
padding-top: 16px;
.newsletter-sm .newsletter-button-sm
float: right;
height: 50px;width:23%
display: inline-block;
text-shadow: 2px 2px 1px #000;
font-size: 16px;
font-family: oswald;
padding: 10px 22px;
position: relative;
color: #fff;
text-align: center;
margin-right: 16px;
background: #009EFF;
border: 1px solid #fff;
cursor: pointer;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
.modalDialog
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.6);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 200ms ease-in;
-moz-transition: opacity 200ms ease-in;
transition: opacity 200ms ease-in;
pointer-events: none;
.modalDialog:target
opacity:1;
pointer-events: auto;
.modalDialog:target > div
margin: 8% auto;
.modalDialog > div
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
width: 500px;
position: relative;
margin: 5% auto;
background: #fff;
min-height: 200px;
h2.signup
background:#00aa9f;
border-bottom: 1px solid #008d84;
font-weight: normal;
text-align:center;
padding: 10px;
color:#fff;
font-size: 18px;
.close
color: #888!important;
position: absolute;
top: 1px;
right: -40px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 16px;
.close:hover text-decoration:none;
.close:hover color:#555;
Now, this is the time to add the main html that is required for this subscribe box.
- Search for '</body>' and above it, paste following code:
<div class="modalDialog" id="signup">
<div>
<a class="close" href="#close" title="Close"><i class="fa fa-times"></i></a>
<div class="signup-container">
<div class="newsletter-sm">
<h3>Subscribe to Newsletter</h3>
<div class="text"><i class="fa fa-envelope"></i><br><div class="texts">Subscribe us to get all our juicy article fastly. You know how and where? Directly on your inbox! Just enter your nice and good looking email id below and click on subscribe button! After that, verify it through the verification email and start learning more!</div></div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<div class="newsletter-sm-bot">
<input class="newsletter-input-sm" name="email" placeholder="Enter Your Email" type="text">
<button class="newsletter-button-sm" type="submit">Subscribe</button>
</div>
<input name="uri" type="hidden" value="tntbystc">
</form>
</div>
</div>
</div>
</div>
- Now, save your template.
Customization:
- Replace tntbystc with your feedburner username.
- You can replace text by editing the highlighted code.
How to hyperlink a text to show the subscribe box?
Now, almost everything is done. Whenever you wish to hyperlink a text, so that, the text will show a subscribe box when clicked, you have to use following piece of code:
<a href='#sign-up'>YOUR TEXT HERE</a>
Do you know? You can use this to hyperlink on an image too! Just use below piece of code:
<a href='#signup'><img src='IMAGE URL GOES HERE' alt='IMAGE DESCRIPTION' title='IMAGE DESCRIPTION'/></a>
Done! You can check it by going on your blog and clicking the text or image for which you have used the above code.
Note: This hyperlink can be added multiple times on texts on same page.
#2. Subscribe box from a hyperlinked and floating image
Instead of hyperlinking a text, why not we hyperlink a floating image? This will attract your visitor's eyes too! This time, an floating image will appear at the left-bottom or right-bottom or left-top or right-top of the page. When a visitor click on that image, a nice subscribe box will appear teasing them to put their email in the box!
DEMO: See Live Demo
Let?s know how to add it on your blogger blog:
- Same, Go to Blogger Dashboard > Template > Edit HTML
- To make this subscribe box good looking, you have to add some CSS codes. Search for "]]></b:skin>"
- Paste the following code above "]]></b:skin>"
#subscribe-button
float: left;
position: fixed;
bottom: 5%;
left: 0;
z-index: 999;
#subscribe-widget
display: none;
/* Overlay */
#mbt-overlay
background-color: #000;
/* Container */
#mbt-container
height: 350px!important;
width: 63%!important;
min-height: 350px;
min-width: 500px;
color: #222;
background-color: #fff;
border: 4px solid #ddd;
#mbt-container .mbt-data
padding: 8px;
#mbt-container a.mbtCloseImg
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6q0JqPKTpTWwW7qiZgqdrXe40wtBLEef0fm-8oCS_zpTERs01-nrPLJBosNN-VK6QLMlCRMfwZ-9gr5miBa-j8AcojX7tq90C_x2pbJ-l3xze7bnipXwgaw0GHtoih441ty_H45_AWTIJ/s1600/mbt-close-button.png) no-repeat;
width: 25px;
height: 29px;
display: inline;
z-index: 3200;
position: absolute;
top: -15px;
right: -16px;
cursor: pointer;
.subscribeheader
padding: 5px;
padding-left: 21px;
text-shadow: -3px -2px 5px #000;
box-shadow: 2px 2px 11px 1px #000000;
background: #FF8100;
color: rgba(255, 255, 255, 1);
padding-top: 11px;
border-radius: 11px;
text-rendering: optimizeSpeed;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
margin-bottom: 30px;
letter-spacing: 4px;
text-align: center;
font-family: monotype corsiva;
border: 2px dashed #FFF;
font-size: 50px;
#description
color: #AAAAAA;
font-family: times New Roman;
font-size: 25px;
font-style: italic;
float:left;
line-height: 34px;
#description img
float: right;
height: 100px;
padding: 0 25px 0 10px;
width: 100px;
#mbtfollowForm
padding: 15px;
#mbtfollowForm p
margin: 0 0 10px;
input[type="submit"]
background: #FA9227;
box-shadow: 2px 2px 1px 1px #838383!important;
width: 25%!important;
padding-left: 0px!important;
margin-left: 17px;
#mbtfollowForm input:not([type="checkbox"])
width: 67%;
margin-top: 20px;
margin-bottom: 20px;
font-family:oswald;
height:33px;
float:left;
padding: 10px 5px 10px 25px;
border: 1px solid rgb(178, 178, 178);
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
#mbtfollowForm input:not([type="checkbox"]):active, #mbtfollowForm input:not([type="checkbox"]):focus
border: 1px solid rgba(91, 90, 90, 0.7);
background: rgba(238, 236, 240, 0.2);
-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
<!--[if lt IE 7]> #mbt-container a.mbtCloseImg
background: none;
right: -14px;
width: 22px;
height: 26px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6q0JqPKTpTWwW7qiZgqdrXe40wtBLEef0fm-8oCS_zpTERs01-nrPLJBosNN-VK6QLMlCRMfwZ-9gr5miBa-j8AcojX7tq90C_x2pbJ-l3xze7bnipXwgaw0GHtoih441ty_H45_AWTIJ/s1600/hb-close-button.png', sizingMethod='scale');
#mbtfollowForm input
padding: 10px 5px 10px 32px;
width: 93%;
#mbtfollowForm input[type=checkbox]
width: 10px;
padding: 0;
<![endif]-->
- Now, to make the floating image appear, search for ?</body>?
- Paste the following chunk of code above ?</body>?
<div id="subscribe-button">
<a class="subscribe" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIISw-XWY4l0PqpaGfXpujNY2VDfSSj8yL1pUrX_L3c1q1dEn4JOp7P4QdqrbZa94PDnZ_aiWmcpfCNcMKK-A8npMefviJ8zSiVJhiXPUrbQD4dkr9GcgzcpyN9flgSVy6jo2vJR2pHHtl/s1600/hb-email-icon.png" alt="subscribe" /></a>
</div>
<div id="subscribe-widget">
<div id="mbtfollowForm">
<div class="subscribeheader">Subscribe Us</div>
<div id="description">
<img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZOpLSmEtr-WG9LDjrulbQQ1FexnkmH6y1uiLgi-Sel9mclqnEoEINr5_FFGcKCa7SS26P3lH-17Ep3Xps_QD6i53l5f8PfrvFB4xkt05pM8iGogsUXre1ZODuT8ubm4GkIfYIz5OsYARl/s1600/hb-email-icon1.PNG">Subscribe to our mailing list to get the updates to your email inbox... We can't wait more to have your email in our subscribers email list. Just put your nice email in below box:</div>
<form
action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"
target="popupwindow">
<input name="email" placeholder="Enter Your Email..." required="required"
type="text" />
<input name="uri" type="hidden" value="tntbystc" />
<input name="loc" type="hidden" value="en_US" />
<div class="button">
<input type="submit" value="Subscribe" />
</div>
</form>
</div>
</div>
<script src="https://googledrive.com/host/0B8acxOz46qBZckxsanR6Rm1KTms" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function (a)
a("#subscribe-button .subscribe").click(function (b)
a("#subscribe-widget").modal();
return false
)
)
</script>
- Save your template and you?re done!
Customization:
Yeah! Customization on the above code as following:
- If you want that image to be displayed in left, then change right to left in above code.
- If you want that image to be displayed in the top of the page, then change bottom with top.
- If you want to change the text or subscription teaser, then just replace the highlighted code.
- Change tntbystc with your feedburner username in above code.
#3. Subscribe box on a pop-up box after few second a visitor reach at the page
Nowadays, this one of the most common way to show a subscription box in a blogger blog. Many third party tools are providing this widget for free. One of the best tool that provide the pop up email subscription tool is GetSiteControl. Let's know how to add it:
- Go to GetSiteControl sign up page
- Sign up by filling the fields (email, passwords and website) and click on red 'Sign up for free' button.
- On next page, click on that green 'Create Widget' button and choose 'Subscribe' from the dropdown.
- Choose and modify your settings while creating the Subscribe Widget and at last, click on 'OK' button.
- On the next page, click on 'Activate Now' button, So that, it will activate the subscribe widget.
- Now, are you able to see a red colored bar? (as shown in below picture).
- Click on that black ?Install? button.
- On the next page, four or five line JavaScript would be given. Copy that and place in on your blog's template before '</body>'
- Now, just look at the top bar. Their, click on 'Site Settings':
- After clicking on 'Site Setting', you will see a Mail Chimp option on the screen. On the given box, put your Mail Chimp's API key, click on Connect button.
- You are done!
#4. Subscribe box when a visitors goes to exit from a page
Yes! If visitor has enjoyed your articles, he/she will surely subscribe to your blog if he get a nice subscribe box in front of him. So, its a good idea to show a subscribe box when your blog's visitor goes to exit from a page. This can be done by following all steps of way #2. The only thing you have to do different is-
- After modifying your settings, go to 'Behavior' tab from the widget creator.
- Choose & tick ?when the user is leaving the website?
- Click on OK button and you're done!
#5. Subscribe box on sidebar as a widget
Yeah! this is also a most common way to show a subscribe box in blogger. Not only common, but the easiest way to add a nice subscribe box on blogger blogs. MBT has published many subscription boxes that can be installed on your blogger blog. Here's a list of some:
Mashable Sharing Widget for Blogger
Create WordPress like Subscription Box- Add a Cool Feed Icon and Subscription Email Form to the Sidebar in Blogger!
#6. Subscribe box below every post
This is also a good way to get some more subscribers. This way increases your chances to get some new subscribers. Your visitors will surely subscribe to your blog if they found an enjoyable post and a subscription box below post, together. Here are some articles that were published by MBT before some time by which you can add a subscription box below every post on your blogger blog:
No Ordinary? Social Sharing & Subscription Widget- Subscription Box: Add an Attractive one below Post
Do You Like This Story?" - Best Blogger Widget!
#7. Subscribe box on a floating hidden frame
Did you ever seen floating Facebook like box near scroll bar?. Yeah! why not. floating Facebook like box is today one of the most famous & lovable widget of bloggers. Today, we are going to tell you a widget which works same as that Facebook like box but the difference is, this time, it is floating subscribe box.
DEMO: See live demo here.
DEMO: Live Demo
Let?s know how to add it:
- Go to Blogger Dashboard > Layout > Add a Gadget > HTML/JavaScript
- Now, leave the title box empty and move on content field.
- Paste below code on content field:
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() jQuery(".mbt").hover(function() jQuery(this).stop().animate(right: "0", "medium");, function() jQuery(this).stop().animate(right: "-250", "medium");, 500);); /*]]>*/ </script> <style type="text/css"> .mbtbackground: url("http://s12.postimg.org/gjpszngzx/Untitled_1_copy.png)" no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%; .mbt spanbottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999; .mbt span acolor: gray;text-decoration:none; .mbt span a:hovertext-decoration:underline; } </style>
<div class="mbt">
<div class="mbt-floating">
<div class="subscribe-mbt">Subscribe Us></div><br /><i class="fa fa-envelope"></i><br /><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<div class="newsletter-sm-bot">
<input class="newsletter-input-sm" name="email" placeholder="Enter Your Email" type="text" />
<button class="newsletter-button-sm" type="submit">Subscribe</button>
</div>
<input name="uri" type="hidden" value="tntbystc" />
</form></div></div>
<style>.mbt-floating
background: #F2F2F2;
height: 285px;
padding: 7px;
border: #444444 2px solid;
.subscribe-mbt
background: #444444!important;
padding: 8px!important;
text-shadow: -1px 0px 2px #000000;
color: #FFFFFF;
box-shadow: 0px 0px 7px -2px #000;
border: 2px dashed;
font-size: 20px;
font-family: algerian;
.mbt-floating .fa
font-size: 115px;
padding-left: 54px;
padding-bottom: 17px;
margin-top: -18px;
form
padding: 10px;
margin-top: -16px;
input.newsletter-input-sm
padding: 17px;
padding-top: 15px;
padding-bottom: 15px;
box-shadow: 0px 3px 4px 0px #000;
padding-left: 10px;
width: 84%;
margin-bottom: 15px;
border: 0;
button.newsletter-button-sm
background: #444444;
color: #FFF;
border: 0;
padding: 15px;
font-size: 14px;
text-shadow: 2px 2px 2px #000;
border-bottom: 2px solid #000;
border-radius: 6px;
width: 100%;
box-shadow: 0px 3px 2px 1px #000;
</style>
Customization:- Replace 'tntbystc' with your Feedburner username.
#8. Subscribe box when a visitor reach at the end of the post
This way of showing a subscribe box on blogger blog when a visitor reach at the end of the page can also help you in collecting some good subscribers. You can add this to your blogger blog by simply doing one step after doing all steps from way #3. Look at way #3's image and you will see an option- 'when the user reach at the bottom of the page? (option three); tick that option and click on OK button and done! When your visitor reach at the bottom of the page, a nice subscribe box will show up on your blogger blog.
Guest Author:
Shivansh Verma Skv is a 13 years old young blogger and a ninja member of "Blogger Help Forum". He loves to write about technology and web development. He has his own blog- Blogger Guiders You can connect with him on Google+ and Facebook . Thanks!
18
comments
PLEASE NOTE:
We have Zero Tolerance to Spam.
Chessy Comments and Comments with
'Links'
will be deleted immediately upon our review.
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
Clash Royale CLAN TAG
(function() {
var items = ['id': '6959127506473022754', 'body': 'This is Really Great Subscription Box but i want to ask is Are they One Time Popup Subscription Box', 'timestamp': '1433694534525', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1433694534525#c6959127506473022754', 'author': 'name': 'Raza Nagori', 'avatarUrl': '//lh5.googleusercontent.com/-CRTtTvvNKXM/AAAAAAAAAAI/AAAAAAAADEk/Ep9-r3WvbPw/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/05230377477970866517', 'displayTime': 'Jun 7, 2015, 9:28:00 PM', 'deleteclass': 'item-control blog-admin pid-1660764238', 'id': '2414081652956705386', 'body': 'Gr8 post. x3cbr /x3ex3cbr /x3eNow i have Problem. I see my susbscribers increase day by day, and the other side subscriber decrease day by day. my subscribers doesnt cross 2400 even i have more than 6000 subscribers in my feedburner account. Please help', 'timestamp': '1433698531368', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1433698531368#c2414081652956705386', 'author': 'name': 'Sumit Kumar Gogawat', 'avatarUrl': '//lh5.googleusercontent.com/-4snKfA_34yU/AAAAAAAAAAI/AAAAAAAABsQ/AFXUkFz4S6U/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/17138058195183452291', 'displayTime': 'Jun 7, 2015, 10:35:00 PM', 'deleteclass': 'item-control blog-admin pid-805245956', 'id': '5371460318617171940', 'body': 'Thank you. Now I have nice opt in forms', 'timestamp': '1433718216404', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1433718216404#c5371460318617171940', 'author': 'name': 'klm', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/17461400095632456667', 'displayTime': 'Jun 8, 2015, 4:03:00 AM', 'deleteclass': 'item-control blog-admin pid-1490184098', 'id': '3605701043062655845', 'parentId': '6959127506473022754', 'body': 'Thanks Dear @Raza for your kind words and it totally depends on you. You can change the settings of pop-up boxes from GetSiteControlx26#39;s widget creator (on behavior tab).', 'timestamp': '1433774689417', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1433774689417#c3605701043062655845', 'author': 'name': 'Shivansh Verma Skv', 'avatarUrl': '//lh6.googleusercontent.com/-1NeQGMyg1xQ/AAAAAAAAAAI/AAAAAAAAABM/hq4qclTclck/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/03061852825912514166', 'displayTime': 'Jun 8, 2015, 7:44:00 PM', 'deleteclass': 'item-control blog-admin pid-1506271771', 'id': '5357356145523931557', 'body': 'never knew this before. awesome man', 'timestamp': '1433826674487', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1433826674487#c5357356145523931557', 'author': 'name': 'Vashishtha Kapoor', 'avatarUrl': '//lh5.googleusercontent.com/-SgZ-icEH8Gc/AAAAAAAAAAI/AAAAAAAACF4/gKnZhR8wfks/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11414350988615878834', 'displayTime': 'Jun 9, 2015, 10:11:00 AM', 'deleteclass': 'item-control blog-admin pid-262407689', 'id': '6895577640019689456', 'body': 'very helpful ..x3cbr /x3ethanks.! ', 'timestamp': '1438488375965', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1438488375965#c6895577640019689456', 'author': 'name': 'OM VISHWAJIT Verma', 'avatarUrl': '//lh3.googleusercontent.com/-zdgC3tjo-CY/AAAAAAAAAAI/AAAAAAAAAGY/0qoKv_UXeN4/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/17684394770906660594', 'displayTime': 'Aug 2, 2015, 9:06:00 AM', 'deleteclass': 'item-control blog-admin pid-2069310217', 'id': '7603719769666874586', 'body': 'Hey Sir,x3cbr /x3eI got a little problem. I tried #1 and #2 method for my blog copied given script.x3cbr /x3eScript which to copy above skin worked and saved. But when i copied the 2nd script above body tag it gave me error, I tried both #1 and #2 but error occured saying something like x26quot;img must be terminated by ...x26quot;. Please help', 'timestamp': '1443887810499', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1443887810499#c7603719769666874586', 'author': 'name': 'Dhanesh Kumar', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/08958246753696024706', 'displayTime': 'Oct 3, 2015, 8:56:00 PM', 'deleteclass': 'item-control blog-admin pid-1686027602', 'id': '2097897797422694180', 'body': 'Thanxxx...this x3ca hrefx3dx22www.techmash.inx22 relx3dx22nofollowx22x3epostx3c/ax3e help me much', 'timestamp': '1448423867192', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1448423867192#c2097897797422694180', 'author': 'name': 'swabhav mishra', 'avatarUrl': '//lh6.googleusercontent.com/-HAxqPTiYC0I/AAAAAAAAAAI/AAAAAAAAAS8/4gzTN4iq-D8/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/04685433390958452545', 'displayTime': 'Nov 25, 2015, 8:57:00 AM', 'deleteclass': 'item-control blog-admin pid-254978571', 'id': '7451709270511746182', 'body': 'Itx26#39;s Working but donx26#39;t work popup system, show only footer section :(', 'timestamp': '1455118937970', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1455118937970#c7451709270511746182', 'author': 'name': 'Md Abul Bashar', 'avatarUrl': '//lh5.googleusercontent.com/-nkuAsGUVCE4/AAAAAAAAAAI/AAAAAAAAAws/RhcNrlNLP5s/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/12719743313432259610', 'displayTime': 'Feb 10, 2016, 8:42:00 PM', 'deleteclass': 'item-control blog-admin pid-516910868', 'id': '8839699253773391620', 'body': 'Error parsing XML, line 3217, column 315: The element type x26quot;imgx26quot; must be terminated by the matching end-tag x3cbr /x3eHow to fix thisx3cbr /x3emean img', 'timestamp': '1455619007980', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1455619007980#c8839699253773391620', 'author': 'name': 'Sumit Kumar', 'avatarUrl': '//lh6.googleusercontent.com/-3UL___cv4uo/AAAAAAAAAAI/AAAAAAAAABI/xlgCIbIOIa0/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/14350447284144136735', 'displayTime': 'Feb 16, 2016, 3:36:00 PM', 'deleteclass': 'item-control blog-admin pid-1294039652', 'id': '6656514884807631875', 'parentId': '7451709270511746182', 'body': 'yes Mr, itx26#39;s donx26#39;t work popup ststem..', 'timestamp': '1456560700288', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1456560700288#c6656514884807631875', 'author': 'name': 'SL Blogger', 'avatarUrl': '//lh5.googleusercontent.com/-AekbsihF15Y/AAAAAAAAAAI/AAAAAAAACoQ/FqSnWtEZScg/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/12493688776811161267', 'displayTime': 'Feb 27, 2016, 1:11:00 PM', 'deleteclass': 'item-control blog-admin pid-1718796095', 'id': '8633313829690209686', 'body': 'wow nice x3ca hrefx3dx22yestricks.comx22 relx3dx22nofollowx22x3eTricksx3c/ax3e i like your site dear :)x3cbr /x3e', 'timestamp': '1461914409786', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1461914409786#c8633313829690209686', 'author': 'name': 'Vikash Kumar', 'avatarUrl': '//lh3.googleusercontent.com/-0H5bz9-L8eg/AAAAAAAAAAI/AAAAAAAAAlU/_gb5wR7P7q4/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/00782950381531132162', 'displayTime': 'Apr 29, 2016, 12:20:00 PM', 'deleteclass': 'item-control blog-admin pid-920531235', 'id': '5352493044303165205', 'body': 'Thankx26#39;s... x3cbr /x3eLove this post', 'timestamp': '1476711009846', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1476711009846#c5352493044303165205', 'author': 'name': 'Kojek Tegal', 'avatarUrl': '//lh4.googleusercontent.com/-iMCHyHWO54g/AAAAAAAAAAI/AAAAAAAABsI/iGJ_DJduqu0/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/10778097110051270059', 'displayTime': 'Oct 17, 2016, 6:30:00 PM', 'deleteclass': 'item-control blog-admin pid-1996079422', 'id': '3117860104812631157', 'body': 'AMazing.. Keep up the good work.. This x3ca hrefx3dx22http://www.techinsense.comx22 relx3dx22nofollowx22x3eTrickx3c/ax3e is really awesome.. Thanks!', 'timestamp': '1481273027449', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1481273027449#c3117860104812631157', 'author': 'name': 'Abhishek Ghosh', 'avatarUrl': '//lh6.googleusercontent.com/-St5Gr9wDHWI/AAAAAAAAAAI/AAAAAAAABKE/FMuRu9TBXHQ/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/08048279700457126409', 'displayTime': 'Dec 9, 2016, 1:43:00 PM', 'deleteclass': 'item-control blog-admin pid-1114236684', 'id': '6899717984292972647', 'parentId': '8839699253773391620', 'body': 'same problem here....x3cbr /x3eI added /img right after that to get rid of the error x3cbr /x3eThere is a bigger problem however since this script is not available anymore at https://googledrive.com/host/0B8acxOz46qBZckxsanR6Rm1KTms which makes the whole thing worthless...', 'timestamp': '1482051581031', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1482051581031#c6899717984292972647', 'author': 'name': 'admin', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/09848821947739558939', 'displayTime': 'Dec 18, 2016, 1:59:00 PM', 'deleteclass': 'item-control blog-admin pid-1216573001', 'id': '3146213190125602639', 'body': 'The entire post (at least for #2) became useless because your JS script is not available anymore at https://googledrive.com/host/0B8acxOz46qBZckxsanR6Rm1KTms', 'timestamp': '1482173485584', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1482173485584#c3146213190125602639', 'author': 'name': 'admin', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/09848821947739558939', 'displayTime': 'Dec 19, 2016, 11:51:00 PM', 'deleteclass': 'item-control blog-admin pid-1216573001', 'id': '4366490287599124600', 'body': 'This is really an awesome tutorial. ', 'timestamp': '1483608696351', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1483608696351#c4366490287599124600', 'author': 'name': 'Muhammad Imran Munawar', 'avatarUrl': '//lh6.googleusercontent.com/-Gmk9JbVYaoA/AAAAAAAAAAI/AAAAAAAAABY/IxIngkhyJHc/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/07685620964401664851', 'displayTime': 'Jan 5, 2017, 2:31:00 PM', 'deleteclass': 'item-control blog-admin pid-1108578703', 'id': '4432782990273978269', 'body': 'Gadget is not floating in my blogger x3cbr /x3ei used second last gadget which you say float but it is not floating', 'timestamp': '1483701860293', 'permalink': 'https://www.mybloggertricks.com/2015/06/create-subscribe-box-in-blogger.html?showCommentx3d1483701860293#c4432782990273978269', 'author': 'name': 'Muhammad Aqib Hussain', 'avatarUrl': '//lh6.googleusercontent.com/-ByHyF_TwPO8/AAAAAAAAAAI/AAAAAAAAAlY/jbyhN1UHw90/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/17755845540027460436', 'displayTime': 'Jan 6, 2017, 4:24:00 PM', 'deleteclass': 'item-control blog-admin pid-188142624'];
var msgs = 'loadMore': 'Load more...', 'loading': 'Loading...', 'loaded': 'No more!', 'addComment': 'Add comment', 'reply': 'Reply', 'delete': 'Delete';
var config = 'blogId': '8193278726666811965', 'postId': '709912005016116656', 'feed': 'https://www.mybloggertricks.com/feeds/709912005016116656/comments/default', 'authorName': 'Qasim Zaib', 'authorUrl': 'https://www.blogger.com/profile/08938578237404814539', 'baseUri': 'https://www.blogger.com', 'maxThreadDepth': 2;
// 0)
cursor = parseInt(items[items.length - 1].timestamp) + 1;
var bodyFromEntry = function(entry)
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved')
return '' + entry.content.$t + '';
return entry.content.$t;
var parse = function(data)
cursor = null;
var comments = ;
if (data && data.feed && data.feed.entry)
for (var i = 0, entry; entry = data.feed.entry[i]; i++)
var comment = ;
// comment ID, parsed out of the original id format
var id = /blog-(d+).post-(d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array)
var auth = entry.author[0];
if (auth)
comment.author =
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
;
if (entry.link)
if (entry.link[2])
comment.link = comment.permalink = entry.link[2].href;
if (entry.link[3])
var pid = /.*comments/default/(d+)?.*/.exec(entry.link[3].href);
if (pid && pid[1])
comment.parentId = pid[1];
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass')
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime')
comment.displayTime = entry.gd$extendedProperty[k].value;
comments.push(comment);
return comments;
;
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor)
url += '&published-min=' + new Date(cursor).toISOString();
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length
Raza NagoriJun 7, 2015, 9:28:00 PM
This is Really Great Subscription Box but i want to ask is Are they One Time Popup Subscription Box
ReplyDelete
Replies
Shivansh Verma SkvJun 8, 2015, 7:44:00 PM
Thanks Dear @Raza for your kind words and it totally depends on you. You can change the settings of pop-up boxes from GetSiteControl's widget creator (on behavior tab).
Delete
Sumit Kumar GogawatJun 7, 2015, 10:35:00 PM
Gr8 post.
Now i have Problem. I see my susbscribers increase day by day, and the other side subscriber decrease day by day. my subscribers doesnt cross 2400 even i have more than 6000 subscribers in my feedburner account. Please help
ReplyDelete
klmJun 8, 2015, 4:03:00 AM
Thank you. Now I have nice opt in forms
ReplyDelete
Vashishtha KapoorJun 9, 2015, 10:11:00 AM
never knew this before. awesome man
ReplyDelete
OM VISHWAJIT VermaAug 2, 2015, 9:06:00 AM
very helpful ..
thanks.!
ReplyDelete
Dhanesh KumarOct 3, 2015, 8:56:00 PM
Hey Sir,
I got a little problem. I tried #1 and #2 method for my blog copied given script.
Script which to copy above skin worked and saved. But when i copied the 2nd script above body tag it gave me error, I tried both #1 and #2 but error occured saying something like "img must be terminated by ...". Please help
ReplyDelete
swabhav mishraNov 25, 2015, 8:57:00 AM
Thanxxx...this post help me much
ReplyDelete
Md Abul BasharFeb 10, 2016, 8:42:00 PM
It's Working but don't work popup system, show only footer section :(
ReplyDelete
Replies
SL BloggerFeb 27, 2016, 1:11:00 PM
yes Mr, it's don't work popup ststem..
Delete
Sumit KumarFeb 16, 2016, 3:36:00 PM
Error parsing XML, line 3217, column 315: The element type "img" must be terminated by the matching end-tag
How to fix this
mean img
ReplyDelete
Replies
adminDec 18, 2016, 1:59:00 PM
same problem here....
I added /img right after that to get rid of the error
There is a bigger problem however since this script is not available anymore at https://googledrive.com/host/0B8acxOz46qBZckxsanR6Rm1KTms which makes the whole thing worthless...
Delete
Vikash KumarApr 29, 2016, 12:20:00 PM
wow nice Tricks i like your site dear :)
ReplyDelete
Kojek TegalOct 17, 2016, 6:30:00 PM
Thank's...
Love this post
ReplyDelete
Abhishek GhoshDec 9, 2016, 1:43:00 PM
AMazing.. Keep up the good work.. This Trick is really awesome.. Thanks!
ReplyDelete
adminDec 19, 2016, 11:51:00 PM
The entire post (at least for #2) became useless because your JS script is not available anymore at https://googledrive.com/host/0B8acxOz46qBZckxsanR6Rm1KTms
ReplyDelete
Muhammad Imran MunawarJan 5, 2017, 2:31:00 PM
This is really an awesome tutorial.
ReplyDelete
Muhammad Aqib HussainJan 6, 2017, 4:24:00 PM
Gadget is not floating in my blogger
i used second last gadget which you say float but it is not floating
ReplyDelete