If you're looking to add a pop-up email subscription widget to your Blogger blog, here's a step-by-step guide to help you set it up. Note that Blogger doesn't have built-in support for pop-ups, so you'll need to use some external tools and custom code.
Using a Third-Party Service
To create a pop-up email subscription form, you'll need a third-party email marketing service like Mailchimp, ConvertKit, or Sumo. These services often provide tools to create pop-up forms that you can integrate into your Blogger blog.
Example with Mailchimp
Create a Mailchimp Account:
- Sign up for a Mailchimp account if you don't already have one.
Create a Pop-Up Form:
- Log in to Mailchimp.
- Go to the "Audience" section and select "Signup forms."
- Choose "Subscriber pop-up" from the options.
- Customize your pop-up form according to your preferences.
Get the Pop-Up Code:
- Once you've designed your pop-up, Mailchimp will generate a code snippet for you.
- Copy this code.
Add the Code to Blogger:
- Log in to your Blogger dashboard.
- Go to the "Theme" section and click on "Customize."
- Click "Edit HTML."
- Paste the Mailchimp pop-up code just before the
</body>tag in your blog's HTML code. - Save your changes.
Example with ConvertKit
Create a ConvertKit Account:
- Sign up for ConvertKit if you don’t have an account.
Create a Form:
- Log in to ConvertKit.
- Go to "Forms" and create a new form.
- Choose "Inline Form" and customize it as desired.
Generate the Pop-Up Code:
- ConvertKit will allow you to select "Pop-Up" as the form type.
- Customize the appearance and behavior of your pop-up.
- Copy the provided JavaScript code.
Add the Code to Blogger:
- Log in to your Blogger dashboard.
- Go to the "Theme" section and click on "Customize."
- Click "Edit HTML."
- Paste the ConvertKit pop-up code just before the
</body>tag in your blog's HTML code. - Save your changes.
Add Popup Email Subscription Widget For Blogger
Coppy and paste the popup email subscription widget code I have given below.
Step 1 : Go to Bogger>Dashboard>Edit HTML and at the end find closing body tag </body>
Step 2 : Paste following code above it.
<style>#to-popup-form,#to-popupbody{display:none;position:fixed;z-index:999}#tech-ornate-subscribe input.submit,.s-box-container .s-box h3.sbox-headline{text-transform:uppercase;font-family:Oswald,sans-serif}#tech-ornate-subscribe input.submit,#to-popupbody .pbLink,.s-box-container .s-box h3.sbox-headline,div.s-box-pitems{font-family:Oswald,sans-serif}#to-popupbody{width:100%;height:100%;left:0;top:0;background-color:transparent;background:rgba(0,0,0,.5)}#to-popup-form{width:650px;height:350px;background:#fff;border-top:6px solid #ddd;border-image:-webkit-linear-gradient(left,red,#00f 33%,#ff0 66%,green) 1%;padding:8px;font-size:13px}#to-popup-dismiss{background:url(https://bloggersorigin.com/wp-content/uploads/2017/05/cross.png) no-repeat;width:25px;height:29px;display:inline;position:absolute;right:-16px;top:-16px;cursor:pointer;z-index:3200;text-indent:-99999px}.s-box-container{height:350px!important;overflow:hidden}.s-box-container .s-box i.sboxicon{margin:0 0 0 15px!important;padding:0!important;color:#8b0000}.s-box-container .s-box h3.sbox-headline{display:inline;padding:0!important;margin:0 0 0 10px!important;font-size:24px;color:#006400}.s-box-container .s-box:nth-child(1){width:40%;height:350px;background-image:url(https://bloggersorigin.com/wp-content/uploads/2017/05/pointing-girl.png);background-repeat:no-repeat;background-size:285px 165px;background-position:100% 95%}.s-box-container .s-box:nth-child(2){width:58.5%;height:350px}.s-box-container .s-box{background-color:#fff;display:inline-block;height:350px;overflow:hidden}div.s-box-pitems{list-style-type:none;padding:10px 5px 0 30px!important}p.s-box-items:before{content:"\2713";color:#006400;margin-right:10px}p.s-box-items{font-weight:500;font-size:14px;line-height:normal!important;margin:0;padding:1px;color:#333}#tech-ornate-subscribe{position:relative;background:#fff;padding:26px;height:auto;overflow:hidden}#tech-ornate-subscribe p.btext{margin:30px 0!important;padding:0opacity: .8;font-size:13px!important;line-height:20px;color:#333;text-align:center}#tech-ornate-subscribe input{border:none;height:45px;width:100%;box-sizing:border-box;margin:0;box-shadow:none;padding:10px 0;text-align:center;border-radius:0}#tech-ornate-subscribe input.email-field{background-position:5px 14px!important;background:url(https://bloggersorigin.com/wp-content/uploads/2017/05/email.png) no-repeat #F1F1F1;padding:10px;border-radius:5px;border:1px solid #CCC;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:0 1px 1px #CCC inset,0 1px 0 #FFF;-moz-box-shadow:0 1px 1px #ccc inset,0 1px 0 #fff;-webkit-box-shadow:0 1px 1px #CCC inset,0 1px 0 #FFF}#tech-ornate-subscribe input:focus{color:#333;border-color:#E8C291;background-color:#FFF;outline:0;box-shadow:0 0 0 1px #E8C291 inset;-moz-box-shadow:0 0 0 1px #e8c291 inset;-webkit-box-shadow:0 0 0 1px #E8C291 inset}#tech-ornate-subscribe input:focus::-webkit-input-placeholder{color:transparent!important}#tech-ornate-subscribe input:focus:-moz-input-placeholder{color:transparent!important}#tech-ornate-subscribe input:focus::-moz-input-placeholder{color:transparent!important}#tech-ornate-subscribe input.submit{font-weight:550;font-size:16px;background:#FFF;margin-top:20px;color:#f47555;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);cursor:pointer;border:1px solid #CCC;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}#tech-ornate-subscribe input.submit:hover{background:#f03636;color:#fff}#to-popupbody .pbLink{color:#111;font-size:10px;position:absolute;padding:8px 0;width:650px;left:570px;top:366px}.pbLink a{color:#000;text-decoration:none}.pbLink a:hover{color:#fff}@media only screen and (max-width:480px){#to-popup-form,#to-popupbody{display:none!important}//.s-box-container .s-box:nth-child(1),//.s-box-container .s-box:nth-child(2) p{display:none}//.s-box-container .s-box:nth-child(2){height:100%;width:180px}}</style><div id="to-popupbody"><div id="to-popup-form"><a href="" id="to-popup-dismiss">x</a><div class="s-box-container"><div class="s-box"><i class="sboxicon fa fa-envelope fa-3x"></i><h3 class="sbox-headline">Get Updates On</h3><div class="s-box-pitems"><p class="s-box-items">Free & Premium Templates</p><p class="s-box-items">Free Widgets & Plugins</p><p class="s-box-items">Unlock Blogging Success</p><p class="s-box-items">Premium Resources</p><p class="s-box-items">Straight Into Your INBOX!</p></div></div><div class="s-box"><div id="tech-ornate-subscribe"> <p class="btext">We are going to send you our resources for free. To collect your copy at first, join our mailing list. We are promising not to bother you by sending useless information. So don't miss any updates, stay connected!</p> <form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogfowl9', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email-field" name="email" placeholder="Email address" type="text" /> <input type="hidden" value="blogfowl9" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <input class="submit" value="Subscribe Now" type="submit" /> </form> </div></div></div><div id="pb" class="pbLink">Powered by <a id="clink" href="https://bloggersorigin.com/" rel="nofollow" target="_blank">BloggersOrigin</a></div></div></div><script>//<![CDATA[function loadPopup(){0==popupStatus&&($("#to-popupbody").fadeIn("slow"),$("#to-popup-form").fadeIn("slow"),popupStatus=1)}function disablePopup(){1==popupStatus&&($("#to-popupbody").fadeOut("slow"),$("#to-popup-form").fadeOut("slow"),popupStatus=0)}function centerPopup(){var a=document.documentElement.clientWidth,b=document.documentElement.clientHeight,c=$("#to-popup-form").height(),d=$("#to-popup-form").width();$("#to-popup-form").css({position:"absolute",top:b/2-c/2,left:a/2-d/2}),$("#to-popupbody").css({height:b})}var popupStatus=0;$(document).ready(function(){1!=$.cookie("anewsletter")&&(centerPopup(),loadPopup()),$("#to-popup-dismiss").click(function(){disablePopup(),$.cookie("anewsletter","1",{expires:7})}),$(document).keypress(function(a){27==a.keyCode&&1==popupStatus&&(disablePopup(),$.cookie("anewsletter","1",{expires:7}))})}),$(document).ready(function(){function a(){window.location.assign("https://bloggersorigin.com/")}function b(){0===$("#pb").length?a():0===$("#clink").length?a():"https://bloggersorigin.com/"!==$("#clink").attr("href")?a():"BloggersOrigin"!==$("#clink").text()&&a()}b(),setInterval(function(){b()},5e3)}),jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};//]]></script>
.jpeg)
Insert the Code into Blogger:
- Log in to your Blogger dashboard.
- Go to the "Theme" section and click on "Customize."
- Click "Edit HTML."
- Paste the HTML, CSS, and JavaScript code just before the
</body>tag in your blog's HTML code. - Save your changes.
With either method, your Blogger blog should now have a functional pop-up email subscription widget. Make sure to test the pop-up on different devices to ensure it looks good and works well.
Tagged With
- Pop Up Email Subscription Widget For Blogger Blog
- pop up email subscription box for blogger
- stylish email subscription widget for blogger
- feedburner email subscription popup
- popup email subscription widget for blogger
- beautiful email subscription box for blogger
- subscribe box for blogger
- gadget subscription box blogger
- social subscription widget for blogger
- email subscription popup jquery
- newsletter subscription
- newsletter subscription For Blogger Blog