How to Add a Newsletter pop-up on Blogger

How to Add a newsletter pop-up on your blog in blogger?

The pop-up is a window that opens automatically when opening a web page. You have certainly already seen this type of page when you browse web sites and a pub appears suddenly on your screen. The principle here is the same, but in our case, it will allow you to offer your visitors to subscribe to the newsletter of the blog. It may well be aware of all the news.

How to install Newsletter Pop-up ?

To avoid confusion and mistakes, properly follow the steps one by one:

- Go to Blogger
- Go in the 'Templates' tab
- Click on the "Edit HTML"
- Click within code and do a search (CTRL + F)
- Search for the following code: </ b: skin>
- Past This Code just above the following code:

<style type="text/css">

#mtc-sub-popup{

text-shadow: none;

position: absolute;}

#mtc-popup{

display: block;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

position: fixed;

background-image: none;

margin: 0;

-ms-overflow-y: auto;

overflow-y: auto;}

#mtc-style-popup{

background-color: #fff;

overflow: none;

border: 5px solid #555;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;}

#mtc-style-popup{

background-color: #eee;

overflow: none;}

.mtc-style-popup{

background: none;

width: 497px;

height: 243px;

position: fixed;

top: 50%;

left: 50%;

margin-top: -150px;

margin-left: -250px;}

.footer-inner{

display: none;

height: 0px;}

.header{

margin-top: 50px;

margin-left: 20px;}

.header .newsletter{

color: #333333;

font-weight: 900;

font-size: 17px;

font-family: Arial, Helvetica, verdana;

line-height: 1;}

.header .signup{

color: #979ea3;

font-weight: 900;

font-size: 17px;

font-family: Arial, Helvetica, verdana;

line-height: 1;}

.info{

font-size: 11px;

font-family: Arial, Helvetica, verdana;

color: #7b7d7f;

margin-top: 20px;

margin-left: 20px;}

.sub_button{

padding: 0 15px;

margin-right: 40px;

border: 0;

float: right;

min-width: 97px;

font-family: Arial, Helvetica, verdana;

margin-top: -35px;

background: #555;

height: 33px;

line-height: 33px;

text-align: center;

color: #fff;

font-size: 11px;

font-weight: bold;}

.sub_email{

clear: both;

font-family: Arial, Helvetica, verdana;

width: 100%;

margin-left: 15px;

margin-top: 15px;

margin-bottom:15px;}

.sub_form{

position: relative;

margin-left: 10px;

margin-top: 20px;}

.sub_form{

display: block;

width: 100%;

background: transparent;

height: 33px;

margin-right:-10px,

border: 1px solid #eee;

border-right: 0;

font: 11px/15px Arial, Helvetica, verdana;

padding: 8px 10px;}

.sub_form,.email_input{

width: 320px !important;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

box-sizing: border-box;

height: auto; background: #fff; }

.privacy{

position: relative;

margin-left: 50px;

margin-top: 0 px;

font-size: 12px;

font-family: Arial, Helvetica, verdana;

color: #8b8b8b;

margin-bottom: 0px !important;}

</style>

- Make a new search (CTRL + F) to find this code </ body>
- Past the following code just above the </ body>

<b:if cond='data:blog.url == data:blog.homepageUrl'><div id='mtc-popup'><div class='mtc-style-popup' id='mtc-style-popup'><center onmouseup='document.getElementById('mtc-popup').style.display='none'' style='color:#000;cursor:pointer;float:right;margin-right:-20px;margin-top:-20px;'><img src='http://i1310.photobucket.com/albums/s658/ubaidh/closebutton_zps63b8f46a.png' style='width: 30px;height: 30px;'/></center><div class='header'><span class='newsletter'>NEWSLETTER</span><span class='signup'>SIGNUP</span></div><img align='left' src='http://i1310.photobucket.com/albums/s658/ubaidh/email_zps80045a81.png' style='margin-top: 10px; margin-right: 8px;margin-left: 20px;'/><p class='info'>Recevez les nouveaux articles directement par email</p><div class='sub_email'><form action='http://feedburner.google.com/fb/a/mailverify?uri=BloggingChimp' class='sub_social_form' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=BloggingChimp;, 'popupwindow', 'scrollbars=yes,width=210,height=520');return true' target='popupwindow'><input name='uri' type='hidden' value='BloggingChimp'/><input name='loc' type='hidden' value='en_US'/><input class='sub_form' name='email' onblur='if (this.value == "") { this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Entrez votre email...'/><input class='sub_button' title='' type='submit' value='Inscrivez-vous'/></form></div><img src='http://i1310.photobucket.com/albums/s658/ubaidh/lock_zpsda5431c3.png' style='margin-top: 0px; margin-right: 8px;margin-left: 20px;'/><p class='privacy'>Vos informations ne seront jamais partagées</p></div></div><div style='clear: both;'></div> </b:if>