Add Pop Up Email Subscription Form For Blogger
Today, my friends, I'll give you a beautiful addition and rich on the definition,which similar to Add Facebook Like Box Widget With Hover Button Effect For Blogger. I will not dwell upon you, Follow explain the installation added
How To Add Pop Up Email Subscription Form
Written explanation
1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in 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/AVvXsEjGB5GmrUVlgM4NUHv5U9udMl3L1BU3RgRK-buv8ZkbgUtXkybNtTh5BZ-Vcb2oHHbHPXlVCTqx5IegKaPYy6OW71bHh-_Urp91mx3U0duO5y5Ax6WqmKX8LxOqMTbf4C0v4-T19iJTn6A/s1600/x.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/AVvXsEjGB5GmrUVlgM4NUHv5U9udMl3L1BU3RgRK-buv8ZkbgUtXkybNtTh5BZ-Vcb2oHHbHPXlVCTqx5IegKaPYy6OW71bHh-_Urp91mx3U0duO5y5Ax6WqmKX8LxOqMTbf4C0v4-T19iJTn6A/s1600/x.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/AVvXsEjvKKBBpFNVe2bNU2HsO5kaOHOOKUKXRnmTdYPylNT5eKCpbjet4Sh-dZn2NtbhE4B_unlAF8928hPMPabdvA38tYjvIVn2XAydYgyWQ5-K3RpeGmyfoV5AI3zzREcAwINnX6DlxbBU1PM/s1600/subscribe_to_email.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/AVvXsEiQEi01p6JKGkhjCY0qpyuA0vdcB6dLdzWSPBGhEtPa7c-i8MCXYPIjxSUU5Z5EETGxBnjDfeh6SCygTTLTM4_fp4SDvJHUPQ2jsDWrrWslJruIpNBLTAAbk7O4srJNKexg_PiTyigP-KU/s1600/subscribeviaemail.PNG" />
<div id='description'>
<img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC7n0GbpV5wzd1LhVo9rNeKh74UrpaZ8mzaKV1UQh8VFOsILJa82myK7-3L2B2gFfLBktYBoQ1RDl-OVuB5q8MFtqwYBfzxqHgRksxeYiX8jBDNtp-p_QDdy4hwHB3EKVOhEp24Slv8z8/s1600/email-icon.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=USERNAME', '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="USERNAME" /><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://newth3.blogspot.com/" rel="dofollow" target="_blank">NEWTH3</a></div>
</div>
<script src="http://pc-tools-tips.googlecode.com/svn/wiki/ppp.wiki" 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>
#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/AVvXsEjGB5GmrUVlgM4NUHv5U9udMl3L1BU3RgRK-buv8ZkbgUtXkybNtTh5BZ-Vcb2oHHbHPXlVCTqx5IegKaPYy6OW71bHh-_Urp91mx3U0duO5y5Ax6WqmKX8LxOqMTbf4C0v4-T19iJTn6A/s1600/x.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/AVvXsEjGB5GmrUVlgM4NUHv5U9udMl3L1BU3RgRK-buv8ZkbgUtXkybNtTh5BZ-Vcb2oHHbHPXlVCTqx5IegKaPYy6OW71bHh-_Urp91mx3U0duO5y5Ax6WqmKX8LxOqMTbf4C0v4-T19iJTn6A/s1600/x.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/AVvXsEjvKKBBpFNVe2bNU2HsO5kaOHOOKUKXRnmTdYPylNT5eKCpbjet4Sh-dZn2NtbhE4B_unlAF8928hPMPabdvA38tYjvIVn2XAydYgyWQ5-K3RpeGmyfoV5AI3zzREcAwINnX6DlxbBU1PM/s1600/subscribe_to_email.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/AVvXsEiQEi01p6JKGkhjCY0qpyuA0vdcB6dLdzWSPBGhEtPa7c-i8MCXYPIjxSUU5Z5EETGxBnjDfeh6SCygTTLTM4_fp4SDvJHUPQ2jsDWrrWslJruIpNBLTAAbk7O4srJNKexg_PiTyigP-KU/s1600/subscribeviaemail.PNG" />
<div id='description'>
<img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC7n0GbpV5wzd1LhVo9rNeKh74UrpaZ8mzaKV1UQh8VFOsILJa82myK7-3L2B2gFfLBktYBoQ1RDl-OVuB5q8MFtqwYBfzxqHgRksxeYiX8jBDNtp-p_QDdy4hwHB3EKVOhEp24Slv8z8/s1600/email-icon.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=USERNAME', '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="USERNAME" /><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://newth3.blogspot.com/" rel="dofollow" target="_blank">NEWTH3</a></div>
</div>
<script src="http://pc-tools-tips.googlecode.com/svn/wiki/ppp.wiki" 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>
4) Customize your setting.Find any word click F3 or Ctrl+F.
♥ Replace it USERNAME with your Feedburner User Name.
5) Save your Widget.
Comments