Saturday, March 17, 2018

March 17, 2018

How to add Subscribe us Pop up box in Blogger?

How to add Subscribe us Pop up box in Blogger & Find your Feedburner ID.

Hello Friends,
Are you looking for subscribe us box for blogger.

One of the major things that Blogger users missed is Subscribe us Pop Up forms. Because of the limitation of blogger blog platform that have we cannot directly find out a plugin or any widget of Subscribe us pop up box like word press. 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 it ready to had a great amount of loyal visitors by using that Subscribe Us Pop up box.



So how to add Subscribe Us Pop up box in Blogger? Let discus. Here we go….

1.   

1.      At first you should have to install JavaScript library(JQuery) on head of your blogger templet. 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.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>
</b:if>



2.      Now you can add a pop up subscription box in to 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="http://1.bp.blogspot.com/-1oi5Hycb6mI/VoNMarSCB1I/AAAAAAAABLQ/9eC4C0x7wxo/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://host-pot.blogspot.com/">host-pot.blogspot" rel="nofollow">Host-pot</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.


Java Script

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 desire 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 subscription box. If that fail to appear, please clear the browser cookies & reload your blog post.
Ok then you have a beautiful  subscribe us popup box.

Then let see, How to Find your Feedburner ID?

How to Find your Feedburner ID for email subscription?

With that part we discuss about How to Find your Feedburner ID. When you are creating email subscription feature for your blogger it may ask you for your Feedburner ID.There are some differnt 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 following 2 methods.


Method:01
1.The easiest way to find your ID is to visit your feed from within the Feeburner interface. Simply click the feed icon as shown circled in red in the screenshot below.


How to add Subscribe us Pop up box in Blogger & Find your Feedburner ID.




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 left hand select Email Subscriptions and activate it if its 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 screenshot below.
.

How to add Subscribe us Pop up box in Blogger & Find your Feedburner ID.


Ok friends. I think now you have a better understanding about How to Subscribe us Pop up box and How to Find your Feedburner ID?


For more reading THEWONDERSPOT

........................................................................................................................................................................................................................
EMoneySpot  -  Earn with us..........................................................................................>>>
........................................................................................................................................................................................................................

 How to earn money online.......................................................................................>>>

Improve organic SEO rankings while EARN MONEY (0.05/0.10$) per view.......>>>

How to take screenshots in windows 10 : Different Methods?................................>>>

Free Bandwidth Monitoring Tools For windows PC?.............................................>>>

Abnormally high internet bandwidth usage, c-0001.c-msedge.net of window 10....................>>> 

How to Speed up Internet connection on Windows 10..............................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?.................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?..................................................>>>

How to Block Windows 10 "Spying"? ........................................................................................>>>

How to start a Blog?.....................................................................................................................>>>

How to Choose the Best Blogging Platform, advantages & disadvantage.................................>>>

How to make your blog SEO friendly?........................................................................................>>>


All in one SEO pack for Blogger blog.........................................................................................>>>

Thank you for reading.
Good Luck.

Don’t forgot to Subscribe us to get latest news letters and give your feedback in below comment section ;-) ;-)

0 comments:

Post a Comment

Thank you for visit us.
Give your feedback. Don't worry. Your email is safe with us.
Subscribe us to get latest news letters.

amazon

 
Copyright © The WonderSpot All Right Reserved
Powered by Blogger