Live Demo
Hello, Friends This time we have updated ours previously created subscription widget. In this widget, we have made a couple of big changes.
Timeout Delay Feature is a JavaScript method. Here we have used this method to delay the displaying of the Feedburner Email Subscription Form Widget for 3 seconds after the blog has fully loaded. if the site does not load properly and the widget loads first the Users will get irritated so this small tweak helps in improving the user experience.
Hello, Friends This time we have updated ours previously created subscription widget. In this widget, we have made a couple of big changes.
What's new in this Version?
The Session Storage Feature: This meant when a user clicks on the close button then the widget will not appear until the user closes the tab and open the website/blog again. This will make the widget more user-friendly.
Changes in the Style: We have made a few changes in the widget button to make it more beautiful. Few changes to make the widget more responsive on medium-sized screens.
FEATURES:
Pop Up Feature And Close Button:
We Made this widget to pop up after the blog loads. The user can click on close button to hide the widget and continue reading the blog. Popup Feature will give maximum exposure to the Email Subscription widget as this will appear on the centre of the screen and it will not close till the users click on the close button present at the top right part of the widget.
Added Pulse Effect and FontAwesome Icons:
We have Added Font-awesome icons in this widget so that it should look attractive and modern. And Pulse Effect to the heart will make the widget lot more interactive for the users. And Used CSS Properties like border-radius to make it curved. See The GIF Image Demo below we apologize for the quality of the image.
Does Not Affect on Blog Loading Speed:
We Have Used window.onload Method. This is a JavaScript Method. We have used this method to load the widget after the page loads so this widget will not affect on blog loading speed. If for any reason the blog does not load completely then this Email Subscription widget will not appear.
Timeout Delay Feature:
- Popup Email Subscription Widget With Close Button
- It will Appear at the centre of the screen for maximum exposure.
- It is attractive and makes your site or blogs more professional.
- This Widget will not effect on loading time of your blog.
We Have Styled This Widget in Such a Way That It Looks More Official and Beautiful. We Checked in Many Templates This Widget Works Very Smoothly.
After A Lot of Hard Work and Tweaking Few Things, We have Created this Widget For our Users So that They Can Add It and Increase Subscribers Count.
Adding This Widget is very easy in less than one minute you can add this widget to your blog.
Adding This Widget is very easy in less than one minute you can add this widget to your blog.
Adding The Widget in the Blog:
STEP 2: In The Left Side Bar You will find Layout Section as highlighted in the image above Click on Layout.
STEP 3: Click On "Add a Gadget" As highlighted in the image above.
STEP 4: After Clicking on "Add a Gadget" Choose "HTML/JavaScript" from the list & as highlighted in the image above.
STEP 5: Now Copy This Below Code And Paste it in The Empty Box of the "HTML/JavaScript" Section.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style> .ABT_float_ads_main_Wrap { width: 100%; max-width: 550px; max-height: 400px; position: fixed; z-index: 98765; background: rgb(59, 89, 152); left: 50%; top: 50%; transform: translate(-50%, -100%); box-sizing: border-box; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); border-radius: 10px; text-align: center; box-shadow: 0px 0px 3px 1px black; display: none; } .ABT_float_ads_close { margin: 0 auto; text-align: center; padding: 30px 20px 30px; position: absolute; top: -45px; right: -30px; z-index: 9999999; } .ABT_float_ads_close #ABT_close_button { font-size: 25px; color: #fff; display: inline-block; background: rgb(250, 155, 57); padding: 5px; } #ABT_close_button { cursor: pointer; } #ABT_credits { font-size: 25px; color: #fff; position: absolute; bottom: 2px; right: 5px; display: inline-block; text-shadow: 0 0 3px rgba(0, 0, 0, 0.2); text-decoration: none!important; } .ABT_formWrap { background: rgb(250, 155, 57); padding: 10px; margin: 0px; width: 100%; min-width: 350px; overflow: hidden; box-sizing: border-box; border-radius: 10px; } .ABT_Heading, .ABT_Heading2 { color: #fff; font-size: 28px; font-weight: bold; text-shadow: 0px 0px 3px black; font-family: 'oswald', sans-serif; text-align: center; display: block; padding: 5px 0px; margin: 10px 0px 0px 0px; } .ABT_Heading2 { color: #fff; font-size: 18px; margin-bottom: 20px; font-style: italic; font-weight: 400; margin-top: 5px; } .ABT_Heading2 .fa-rss { color: rgb(250, 155, 57); } .ABT_Heading .fa-heart { color: rgb(227, 27, 35); } .ABT_float_ads_main_Wrap .fa-long-arrow-down { font-size: 40px; z-index: 98567; position: absolute; display: inline-block; padding: 10px; top: 80px; left: 45%; color: white; text-shadow: 0px 0px 5px black; } .ABT_formWrap .ABT_input_group { width: 100%; box-sizing: border-box; position: relative; margin: 0 auto; margin-top: 20px; border: 1px solid rgb(59, 89, 152); border-radius: 4px; } .ABT_input_group:before { color: #fff; content: "\f003"; font-family: FontAwesome; position: absolute; text-align: center; padding: 10px 12px; width: 50px; height: 100%; box-sizing: border-box; background: rgb(59, 89, 152); border: 1px solid rgb(59, 89, 152); text-shadow: 0px 0px 3px black; } .ABT_formWrap .ABT_Email { box-sizing: border-box; width: 100%; padding: 10px 0px 10px 60px; height: 100%; margin: 0px; border: none; border-radius: 4px; border: 1px solid rgb(59, 89, 152); } .ABT_formWrap .button { width: 100%; display: block; padding: 10px; box-sizing: border-box; position: relative; margin: 10px auto; margin-bottom: 20px; border-radius: 4px; background: rgb(59, 89, 152); font-size: 18px; border: none!important; cursor: pointer; text-shadow: 0px 0px 3px black; color: #fff; } .ABT_Widget_Container:before { content: ""; position: absolute; border-right: 15px solid transparent; border-left: 15px solid transparent; border-top: 15px solid rgb(59, 89, 152); border-bottom: 15px solid transparent; left: 50%; transform: translate(-50%); top: -1px; z-index: 55; } .ABT_Widget_Container{ position: relative } .ABT_formWrap, .ABT_innerForm, .ABT_Widget_Container { width: 100%; } .pulse { -webkit-animation: pulse .8s linear infinite; -moz-animation: pulse .8s linear infinite; -ms-animation: pulse .8s linear infinite; animation: pulse .8s linear infinite } .ABT_float_ads_close:before { content: ""; position: absolute; border-right: 9px solid #955f28; border-left: 5px solid transparent; border-top: 9px solid transparent; border-bottom: 5px solid #955f28; left: 6px; } @keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8) } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); transform: scale(1) } 50% { -moz-transform: scale(0.8); transform: scale(0.8) } 100% { -moz-transform: scale(1); transform: scale(1) } } @-webkit-keyframes " pulse" { 0% { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(0.8); transform: scale(0.8) } 100% { -webkit-transform: scale(1); transform: scale(1) } } @-ms-keyframes " pulse" { 0% { -ms-transform: scale(1); transform: scale(1) } 50% { -ms-transform: scale(0.8); transform: scale(0.8) } 100% { -ms-transform: scale(1); transform: scale(1) } } @media (max-width: 650px){ #ABT_float_ads_main_Wrap{ display: none!important; } }</style>
<div class='ABT_float_ads_main_Wrap' id='ABT_float_ads_main_Wrap'> <span class="ABT_Heading"><i class="pulse fa fa-heart fa-lg" aria-hidden="true"></i> Loved Our Blog Posts? </span> <span class="ABT_Heading2"><i class="fa fa-rss" aria-hidden="true"></i> Subscribe To Get Updates Directly To Your Inbox</span> <div class='ABT_float_ads_close'> <span id='ABT_close_button' style='float: right'> <i id='ABT_Close_Button' class="fa fa-times" aria-hidden="true" title='close the Advertisment'></i> </span> </div>
<div class='ABT_Widget_Container'>
<div class="ABT_formWrap">
<form class="ABT_innerForm" action='http://feedburner.google.com/fb/a/mailverify?uri=AllBloggerTricks' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=AllBloggerTricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <div class='ABT_input_group'> <input class='ABT_Email' alt="Enter your email address:" placeholder="Enter your email address:" type="email" name="email" /> </div> <input type="hidden" value="AllBloggerTricks" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="button" type="submit" value="Subscribe" /> </form>
</div>
</div> <span id='ABT_credits' style='float: right; font-size: 12px; text-shadow: 0px 0px 3px black;'><a style='text-decoration: none!important; color: #fff;' href="http://www.allbloggertricks.com/2017/09/how-to-add-popup-email-subscription-form.html">Get This Widget</a></span>
<div style='clear:right'></div> </div>
<script type="text/javascript"> window.onload = function() { if(sessionStorage.getItem('closed')){ document.getElementById("ABT_float_ads_main_Wrap").style.display = 'none'; }else{ var ABT_closeButton = document.getElementById('ABT_close_button'); var ABT_float_ads_main_Wrap = document.getElementById("ABT_float_ads_main_Wrap"); myVar = setTimeout(function() { ABT_float_ads_main_Wrap.style.display = 'block' }, 3000); ABT_closeButton.onclick = function() { if(!sessionStorage.getItem('closed')){ sessionStorage.setItem('closed', 'true'); } document.getElementById("ABT_float_ads_main_Wrap").style.display = 'none'; } } }</script>
That's it Thanks For Following The Tutorial Now Its time For Customization to make it as it made for your site.
Customization:
- The Orange Highlighted Text is responsible for Font-awesome Style-sheet if you already included this style-sheet in your blog template then please don't add this Script in your blog.
- The Light-Blue Highlighted Text is Responsible For Your Feedburner Address Just change every instance of Yellow Highlight text and replace with your Feedburner Address.
STEP 6: All Done Save the Gadget and Check it on your site.
Conclusion:
Finally, we have added the plugin. If you found any problems installing this plugin then feel free to comment I will help you in resolving your problem.
If you want this plugin to have some additional features then comment below or contact us regarding your request.
We have also added a media query to hide this widget when the width of the device is less than 650px.
If you want this plugin to have some additional features then comment below or contact us regarding your request.
We have also added a media query to hide this widget when the width of the device is less than 650px.
That's It Thanks For Following our Tutorial '' Fastest Popup Feedburner Subscription Plugin v2.0 for Blogs - 2019 '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.
No comments:
Post a Comment