How to Add a Newsletter pop-up on Blogger

Newsletter pop-up

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:

<!--- Subscription Box CSS Styles Starts--->
<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>
<!--- Subscription Box CSS Styles Ends-->
 - 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'><!-- Subscription Box Starts--><div id='mtc-popup'><div class='mtc-style-popup' id='mtc-style-popup'><center onmouseup='document.getElementById(&apos;mtc-popup&apos;).style.display=&apos;none&apos;' 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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=BloggingChimp;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=210,height=520&apos;);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 == &quot;&quot;) { this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' 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><!-- Subscription Box Ends-->  </b:if>
- Replace BloggingChimp your Feedburner ID.
- Save the template
- And you Are Done !

Related :



How to Add a Newsletter pop-up on Blogger How to Add a Newsletter pop-up on Blogger Reviewed by Aqib Anjum on April 09, 2015 Rating: 5

1 comment:

  1. Now that's a easy tutorial for adding a newsletter on Blogger, thanku for sharing.

    ReplyDelete

Powered by Blogger.