We all come across website popups and notification that informs something about the product and offers, when it comes to that popup are really effective in conversions for the consumer.
Most of the websites want to implement popups, you can easily do it with WordPress but for the owner who is using blogger, they can also implement these tricks with some line of code. With these widgets, you can increase the page views of your content and redirect the visitors to some other promotional method.
Create Popup For Blogger
- Login into Blogger dashboard.
- Dashboard > Click on Layout > Add a Gadget on the sidebar.
- Click on HTML/JavaScript Gadget.
- Now you have to enter the below code in HTML/JavaScript and Press save.
<script type="text/javascript">
document.body.onclick= function(){
window.open('https://www.searchinventure.com/', 'poppage', 'toolbars=0, scrollbars=1, location=0, statusbars=0, menubars=0, resizable=1, width=950, height=650, left = 300, top = 50');
}</script>
Disclaimer: Change the https://www.searchinventure.com URL with your URL. You can change the width and height of the popup window as your choice. Now when someone clicks on an empty space, the entered URL will open with the new window.
Features of Pop-up Email Subscription Box for Blogger
Below are the features of the pop-up subscription box widget, which you can understand very easily.
- Fully responsive box – Change the width to 600px, compatible with any size.
- Popup according to the screen, Using the google font, but you can change later.
- Cookies functionality is enabled. You can set the expiry date for the cookies. Time delay function is also available if you want to popup the window after 20 sec of blog page loading.
- As you enter the email address and click on the Signup button, it becomes vanishes.
Adding Of Email Subscription To Blogger
We would like you to create and download the backup of the template file from the blogger dashboard. During the addition of the code, people make mistakes. So making backup always helps.
- Login into Blogger dashboard.
- Dashboard > Click on Edit HTML.
- Click on an empty area and Press Ctrl+F.
- Search for <head> and paste the below code just after <head> tag.
<link href=’http://fonts.googleapis.com/css?family=Oswald|Open+Sans:300italic,400italic,600italic,400,300,600,700′ rel=’stylesheet’ type=’text/css’/>
- Now search for </head> tag and paste the below line of code just above the </head> tag.
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’ type=’text/javascript’></script><script type=’text/javascript’>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie…
if (arguments.length > 1 && String(value) !== “[object Object]”) {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === ‘number’) {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), ‘=’,
options.raw ? value : encodeURIComponent(value),
options.expires ? ‘; expires=’ + options.expires.toUTCString() : ”, // use expires attribute, max-age is not supported by IE
options.path ? ‘; path=’ + options.path : ”,
options.domain ? ‘; domain=’ + options.domain : ”,
options.secure ? ‘; secure’ : ”
].join(”));
}
// key and possibly options given, get cookie…
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp(‘(?:^|; )’ + encodeURIComponent(key) + ‘=([^;]*)’).exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
Addition of CSS
- In your blogger template. Adding CSS code, search ]]</b:skin> tag and paste the below code just above it.
#mbg-blogger-subbox {
display: none;
background: rgba(0,0,0,0.5);
width: 100%;
height:100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index:99999999;
}
#mbg-blogger-subbox .popup-box {
padding: 0;
margin: 0 auto;
max-width: 600px;
border-radius: 37px;
border: 2px solid #111;
background: #ec407a url(‘https://3.bp.blogspot.com/-TFr_uGBiVZc/V43QSXOFmqI/AAAAAAAAErY/UqrIACbS2_o7vxaJqjeuSWaXBrY6fZzxgCLcB/s1600/transparent-background-bird-email.png’);
background-repeat: no-repeat;
background-position: 100% 45%;
position:relative;
top:25%;
z-index:0;
}
#mbg-blogger-subbox .popup-box .exit-button-subbox {
float: right;
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
margin-top: 2px;
margin-right: -2px;
}
#mbg-blogger-subbox .popup-box .exit-button-subbox:before {
content: “X”;
padding: 5px 8px;
background: #0d47a1;
color: #fff;
font-weight: normal;
font-size: 12px;
text-shadow: 0px -1px #fff;
font-family: sans-serif;
border: 4px solid #fff;
border-radius: 50px 0px 50px 50px;
}
/*–Main Headline Style – www.mybloggerguides.com–*/
#mbg-blogger-subbox .popup-box .tagline {
padding: 0;
line-height: 2em;
font-size: 26px;
height: 50px;
font-weight: normal;
font-family: “Oswald”,sans-serif;
text-shadow: 0px -1px 0px #ec407a;
color: #ec407a;
text-align: center;
background: #111;
border-radius:30px;
border-right: 7px solid #111;
border-left: 7px solid #111;
border-bottom: 15px solid #111;
}
/*–Paragraph Style – www.mybloggerguides.com–*/
#mbg-blogger-subbox .popup-box p {
font-family: “Oswald”,sans-serif;
font-size: 15px;
color: #fff;
text-shadow: 1px -1px 0px 111;
line-height: 35px;
padding: 10px 110px 0px 20px;
text-align: left;
letter-spacing: 0.5px;
margin: 0;
}
#mbg-blogger-subbox .popup-box .rssform {
padding: 15px 20px;
margin: 15px 0px 0px 0px;
}
/*– Button Style – www.mybloggerguides.com –*/
#mbg-blogger-subbox .popup-box .rssform .button {
cursor: pointer;
margin: 0px 0px 0px 5px;
border: 2px solid #fff;
overflow: hidden;
width: 35%;
height: 37px;
background-color: #0d47a1;
font-size: 14px;
font-weight: normal;
color: #fff;
letter-spacing: 0.5px;
text-transform: uppercase!important;
font-family: “Oswald”;
float: right;
border-radius: 40px;
}
#mbg-blogger-subbox .popup-box .rssform .button:hover {
background: #00e676;
padding: 7px;
border: 2px solid #111;
}
#mbg-blogger-subbox .popup-box .rssform .email-bg {
background: #FFE url(‘http://1.bp.blogspot.com/-h7L136qj408/VSYZtr7vDNI/AAAAAAAAA7E/F3W4M51n1mk/s1600/1envelope.png’) no-repeat 5px 5px !important;
padding-left: 30px;
}
#mbg-blogger-subbox .popup-box .rssform input {
padding: 8px;
font-size: 13px;
font-family: Oswald;
font-weight: normal;
display: inline-block;
width: 60%;
height: 37px;
text-transform: uppercase;
outline: none !important;
border: 2px solid #111;
border-radius: 10px;
box-sizing: border-box !important;
}
#mbg-blogger-subbox .popup-box .rssform input:hover{
border: 2px solid #0d47a1;
border-radius:20px;
color: #ff0000;
}
#mbg-blogger-subbox .popup-box .rssform input:active{
border: 2px solid #00e676;
}
- Now we have added the CSS part in the template and now we will add the HTML part of the email subscription widget.
Addition of HTML Part
<div id=’mbg-blogger-subbox’>
<div class=’popup-box’>
<div class=’exit-button-subbox’/>
<div class=’tagline’>
Hit like! Subscribe Us
</div>
<p>Get our latest Blogger Tricks, Guide for blogging. Just Enter your Good Name, email address, Verify and join our Newsletter! :)</p>
<div class=’rssform’>
<form action=’http://feedburner.google.com/fb/a/mailverify’ method=’post’ onsubmit=’window.open('Your URL;, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true’ target=’popupwindow’>
<input class=’email-bg’ name=’email’ placeholder=’Enter your email address… :)’ type=’text’/>
<input name=’uri’ type=’hidden’ value=’MyBloggerGuides’/>
<input name=’loc’ type=’hidden’ value=’en_US’/>
<input class=’button’ type=’submit’ value=’Sign Up’/>
</form>
</div>
</div>
</div>
<script type=’text/javascript’>
jQuery(document).ready(function($){
if($.cookie('feedburner_popup_box') != 'yes'){
$('#mbg-blogger-subbox').delay(15000).fadeIn('medium');
$('.exit-button-subbox, .button').click(function(){
$('#mbg-blogger-subbox').stop().fadeOut('medium');
});
}
$.cookie('feedburner_popup_box', 'yes', { path: '/', expires: 10 });
});
</script>
Customization
- You can the main heading Hit like! Subscribe Us
- Change the description and paratext.
- Enter the URL of your feed burner.
Conclusion
The above guide will provide details on adding the email box subscription. We would like you to follow the steps of the guide very clearly and without any mistake.
Thanks, very helpfully this article. I liked