Are you looking for how to add subscribe us box for your blogger blog?
One of the major things that Blogger users missed is Subscribe us Pop Up forms. Because of the limitations of a blogger platform we cannot directly find out a plugin or any widget of Subscribe us pop up box like word press platform. But using the HTML/JavaScript and CSS we can find a solution for that problem. With that, you can say your blog is successful because of it ready to had a great number of loyal visitors by using that Subscribe Us Pop up box.
One of the major things that Blogger users missed is Subscribe us Pop Up forms. Because of the limitations of a blogger platform we cannot directly find out a plugin or any widget of Subscribe us pop up box like word press platform. But using the HTML/JavaScript and CSS we can find a solution for that problem. With that, you can say your blog is successful because of it ready to had a great number of loyal visitors by using that Subscribe Us Pop up box.
How to add a Subscribe Us Pop up box in Blogger?
1. At first, you should have to install JavaScript library(JQuery) on the head of your blogger template. To do that,
Go to Blogger Dashboard ->> Template ->> Click on Edit HTML and find this code <head> (click in HTML box ->>press CTRL+F copy & paste) Paste the following code in template as given below ->> Click Save.
2. Now you can add a pop-up subscription box into your blogger. So,
Go Blogger Dashboard ->> Click on Layout ->> Add a Gadget ->> HTML/JavaScript then copy and paste the following codes as given below.
<script type="text/javascript" src='http://aireshalili.github.io/internetsmash/popup-email-subscription.js'></script><style type="text/css">.internetsmash-swing{-webkit-animation:swinging 10s ease-in-out 0s infinite; -moz-animation:swinging 10s ease-in-out 0s infinite; -webkit-transform-origin:50% 0; -moz-transform-origin:50% 0; transform-origin:50% 0;} @-webkit-keyframes swinging{ 0% { -webkit-transform: rotate(0); } 5% { -webkit-transform: rotate(10deg); } 10% { -webkit-transform: rotate(-9deg); } 15% { -webkit-transform: rotate(8deg); } 20% { -webkit-transform: rotate(-7deg); } 25% { -webkit-transform: rotate(6deg); } 30% { -webkit-transform: rotate(-5deg); } 35% { -webkit-transform: rotate(0deg); } 40% { -webkit-transform: rotate(0deg); } 45% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(0); } } @-moz-keyframes swinging{ 0% { -moz-transform: rotate(0); } 5% { -moz-transform: rotate(10deg); } 10% { -moz-transform: rotate(-9deg); } 15% { -moz-transform: rotate(8deg); } 20% { -moz-transform: rotate(-7deg); } 25% { -moz-transform: rotate(6deg); } 30% { -moz-transform: rotate(-5deg); } 35% { -moz-transform: rotate(4deg); } 40% { -moz-transform: rotate(-3deg); } 45% { -moz-transform: rotate(2deg); } 50% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } } @keyframes swinging{ 0% { transform: rotate(0); } 5% { transform: rotate(10deg); } 10% { transform: rotate(-9deg); } 15% { transform: rotate(8deg); } 20% { transform: rotate(-7deg); } 25% { transform: rotate(6deg); } 30% { transform: rotate(-5deg); } 35% { transform: rotate(0deg); } 40% { transform: rotate(0deg); } 45% { transform: rotate(0deg); } 50% { transform: rotate(0); } 100% { transform: rotate(0);}}.outer-email-popup-box {display: none;background: rgba(0, 0, 0, 0.8);width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 99999;}.email-popup-box{width: 500px;height: 280px;position: fixed;top: 0;left: 0;right: 0;bottom: 25%;margin: auto; text-align: center; background: #fff;-webkit-animation: swinging 10s ease-in-out 0s infinite; -moz-animation: swinging 10s ease-in-out 0s infinite; animation: swinging 10s ease-in-out 0s infinite;}.email-popup-header{text-align: center;font-size: 2em;color: #FFFFFF; background: #006D90; padding: 4px 15px 7px 10px; margin: 13px 0px 14px 0px;}.email-popup-subheader{text-align: center; font-size: 1.1em; color: #676767;padding: 10px 0px 22px}.email-popup-body{text-align: center; margin-top: 9px;padding: 22px 0px 3px 0px;background: #006D90;}.email-right{background: green;float: right;}.email-left{background: red;float:left;}.email-form{width: 80%; margin: 0 auto;}.in-popup-mail{padding: 10px;margin: 0 auto;width: 270px}.btn-popup-mail{padding: 10px; background: #006D90;border: 2px solid #fff;color: #fff;margin: 0 auto;}.btn-popup-mail:hover{background: #003E52}.background-img{width: 40px; margin: 0 auto; padding-top: 5px}.exit-button-subbox {float: right; cursor: pointer; position: absolute; right: 0px; top: 0px; margin-top: 4px; margin-right: 4px;}.exit-button-subbox:before { content: "X"; padding: 4px 4px; background: #FFFFFF; color: #000000; font-weight: normal; font-size: 15px; font-family: sans-serif;}.footer-popup-mail{color:#fff;font-size:12px;margin-top:-5px}.footer-popup-mail a{color:#fff}</style><div class="outer-email-popup-box"><div class="email-popup-box internetsmash-swing"><div class='exit-button-subbox'></div><div class="background-img"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN7QmYbtFd6ioFb4rRTFG5q5WppimdPuSkZpQd14WyAOctfvz5ctTO5wUuPxZqribvu7l-Fn2FSS157PtAKmuzFegF4VpvfR4tkaucPhIdYUoe7oNeNPIcXVdVvmITu0ncwsD8JkxFGtE/s89-Ic42/mail.png" style="width:50px" /></div><div class="email-popup-header">FREE subscription to get our newsletter</div><div class="email-popup-subheader">Join our blogger community to creating successful blogger blogs and more</div><div class="email-popup-body"><div class="email-form"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/Thewonderspot?uri=Internetsmash', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow"><table width="100%"><tbody><tr><td><input class="emailu in-popup-mail" name="email" placeholder="Enter your email address" type="text" /></td><td><input class="mail-buttons btn-popup-mail" type="submit" value="Subscribe" /></td></tr></tbody></table><input name="uri" type="hidden" value="Thewonderspot" /><input name="loc" type="hidden" value="en_US" /></form></div><div class="footer-popup-mail">Powered by: <a href="https://www.thewonderspot.com/">Thewonderspot" rel="nofollow">Thewonderspot</a></div></div></div></div><script type="text/javascript">jQuery(document).ready(function($){if($.cookie('popup-email-box') != 'yes'){$('.outer-email-popup-box').delay(20000).fadeIn('medium');$('.exit-button-subbox, .button').click(function(){$('.outer-email-popup-box').stop().fadeOut('medium');});}$.cookie('popup-email-box', 'yes', { path: '/', expires: 7 });});</script>
* Customize below features as you prefer.
HTML/CSS
host-pot:Change this with your own feed burner address.
Header and subheader:Change this with your desired phrases.
#006D90: Just change your background color.
JavaScript
20000: the subscription box is set to appear after 20 seconds (1000 = 1 second). If you want to change that time just change it with your desired number.
7: with that by default your visitors can only see the subscription box once every 7 days. If you want to increase or decrease the cookies expiration date just change that value.
Now it’s ready. You can text your pop up a subscription box. If it has any issue, please clear the browser cookies & reload your blog post.
OK, then you have a beautiful subscribe us popup box.
How to Find Feedburner ID for an email subscription?
With that part, we discuss How to Find your Feedburner ID. When you are creating an email subscription feature for your blogger it may ask you for your Feedburner ID. There are some different ways to Find your Feedburner ID.
The ID used to be a numeric sequence but since Google’s acquisition of Feedburner, the ID is now the same name that is appended to your Feed burner URL, http://feeds.feedburner.com/yourid.
You can find your Feedburner ID by the following 2 methods.
Method:01
1. The easiest way to find your ID is to visit your feed from within the Feedburner interface. Simply click the feed icon as shown circled in red in the screenshot below.
That will open the Feed Content page in your web browser.
Now look in the address bar at the top and you will see your Feedburner ID appended to the URL. http://feeds.feedburner.com/yourid.
Or
Method 02:
1. Login to your Feedburner account
2. Click on the publicize tab from the upper menu
3. On the left hand select Email Subscriptions and activate it if it's disabled.
You will find your id in the embed code written after “?uri=YOUR ID”. You will notice that gabfire is our id based on the screenshot below.
I Hope the above methods help you to add Subscribe us Pop up box into Blogger & Find your Feedburner ID. And if you have any problem or know more fixes on this, Please share with us in the comments section below.
%E2%80%93%20Get%20Paid%20%20To%20Search($0.05%20per%20task)%20-%20Payment%20proof.png)
No comments:
Post a Comment