If you were looking for pop up email subscription form widget with jquery effect in blogger then you are here in right place. I will teach you the very easy tutorial that how to add pop up email subscription widget in blogger with jquery effect. This will really help you to gain your email news feed subscriber and as well as the visitors of your blog will gain dramatically. If you get some good luck and got thousands of email subscriber from US UK Canada or Australia then for sure visitors will come from these countries and you will earn more money online. This Attractive Paklinkz style Email Subscription is really easy to add in your blogger. No need to learn coding or any other things just below follow the easy and simple methods and add this widget in your blogger.
How To Add Pop Up Email Subscription Widget in Blogger with Jquery
- Open Your Blogger Dashboard
- Go To Template > Edit HTML section and Add The Below Code Before </head> Tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>How to add widget in Blogger
- Go To Blogger Dashboard
- Go To Layout and Add New Widget Choose HTML/JAVA SCRIPT And Paste The Below Code Inside It.
<style type="text/css">
#subscribe-button { float: left; position: fixed; bottom: 5%; left: 0; z-index: 999; }
#subscribe-widget { display:none; }
/* Overlay */
#btnt-overlay { background-color:#000; }
/* Container */
#btnt-container { min-height:350px; min-width:500px; color:#222; background-color:#fff; border:4px solid #ddd; }
#btnt-container .btnt-data { padding:8px; }
#btnt-container a.btntCloseImg { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHXflQO7Q7nw_aPs-pYfZPRtqzLbTjmMn5Rlm586o5oRXwuZf5yO1SIJeTAihpiI6Ni01JAJezVrTHHZL1ajTfFCurgtOP-vEL91dICWaQrNySbOZ1PEMB1cztajUZbKiEM1fhYeUVGkwN/s1600/close.PNG) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; }
#description { color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; }
#description img { float: left; height: 80px; padding: 0 25px 0 10px; width: 80px; }
#btntfollowForm { padding: 15px; }
#btntfollowForm p { margin: 0 0 10px; }
#btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 4px; margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
#btntfollowForm input:not([type="checkbox"]):active,
#btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }
#btntfollowForm .button input{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: 'Arial Narrow',Arial,sans-serif; font-size: 24px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 30%; float: right; }
#btntfollowForm .button input:hover{ background: #4ab3c6; text-decoration: none; }
#btntfollowForm .button input:active,
#btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
.btntFollowFooter { text-align: center; font: 10px Tahoma, Helvetica, Arial, Sans-Serif; padding: 7px 0; margin-top: 80px; text-shadow: 0px 2px 3px #555; position: absolute; width: 500px; }
.btntFollowFooter a { color: #222; text-decoration: none; }
.btntFollowFooter a:hover { color: #fff; }
<!--[if lt IE 7]>
#btnt-container a.btntCloseImg { background:none; right:-14px; width:22px; height:26px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHXflQO7Q7nw_aPs-pYfZPRtqzLbTjmMn5Rlm586o5oRXwuZf5yO1SIJeTAihpiI6Ni01JAJezVrTHHZL1ajTfFCurgtOP-vEL91dICWaQrNySbOZ1PEMB1cztajUZbKiEM1fhYeUVGkwN/s1600/close.PNG',sizingMethod='scale'); }
#btntfollowForm input{ padding: 10px 5px 10px 32px; width: 93%; }
#btntfollowForm input[type=checkbox]{ width: 10px; padding: 0; }
<![endif]-->
</style>
<div id="subscribe-button">
<a class="subscribe" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin4lqDC8bcU_lrDcC_XNgAqZqea0_OYN4ul6TCGtpi2zq0Pp601ne4TRasFYQ5H1rLQVK9i0RtjVc28I3H_jWwwxDflOaP5eqtRh7vvE5T1CoIJAtvXjIFRD8XiiYDil9LdOaB7zvYmoH1/s1600/trigger-mail-icon.png" alt="subscribe" /></a></div>
<div id="subscribe-widget">
<div id="btntfollowForm">
<img alt="Subscribe" border="0" float="center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFQ_5m_8oZrUOyF09gomqY7YKZiiR8mwz5-1esLda3DXlUCG6uRY1i-tvnEj2Qxl_6OmbbwkeS6u0O9RQnYumPntsjVc7gors_FyKSPj9y1L5UcjBxli6eILqQfTuGTidmkI5XHGHYVz5w/s1600/Subscribe+Via+Email.PNG" />
<div id='description'>
<img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiAGLUfspxR4_p8LhAVakdGo1bZEDQMDKnwLTN5Nqwl0eEGgGafxe0sUmEoPP9isJirwLm7EONBLiybR_YRMaT0LdMlLCb6inSL5MFYXeiUxiMgewIP0BGqFZ21A86ynjWYLSpWfe82oFS/s1600/Mail.PNG" />Subscribe to our mailing list to get the updates to your email inbox...</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Paklinkz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" placeholder="Enter Your Email..." required="required" type="text" /><input name="uri" type="hidden" value="Paklinkz" /><input name="loc" type="hidden" value="en_US" />
<div class="button">
<input type="submit" value="Subscribe" /></div>
</form>
</div>
<div class="btntFollowFooter">
Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | powered by <a href="http://www.Paklinkz.blogspot.com/" rel="dofollow" target="_blank">blogtipsntricks</a></div>
</div>
<script src="https://blogtipsntricks.googlecode.com/files/jquery.btnt.popup.js" type="text/javascript">
</script>
<script type="text/javascript">
jQuery(function ($) {
// Load dialog on page load
//$('#subscribe-widget').modal();
// Load dialog on click
$('#subscribe-button .subscribe').click(function (e) {
$('#subscribe-widget').modal();
return false;
});
});
</script>
- Now Click on Save Button To Add This Widget in Your Blogger.
- Change The User Name Of Feedburner Paklinkz with your own name.
>>>>> Download Now
ReplyDelete>>>>> Download Full
>>>>> Download LINK
>>>>> Download Now
>>>>> Download Full
>>>>> Download LINK