Home »

Add Pop Up Email Subscription Form For Blogger

Thursday, November 14, 2013

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.   
<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/AVvXsEikFODt6l60FlzDr9Lx_w_pkoOm75GA1vYHMkmXVAXMqln1QnP4yi0W5M4yga6dJnGGc-7oyhz14Y__DCRjwkZvbvPMObxzYUiVMU-m-Y-Mml70rwxXCioODawffaMsyqjP7MRllZ0zGmU/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/AVvXsEikFODt6l60FlzDr9Lx_w_pkoOm75GA1vYHMkmXVAXMqln1QnP4yi0W5M4yga6dJnGGc-7oyhz14Y__DCRjwkZvbvPMObxzYUiVMU-m-Y-Mml70rwxXCioODawffaMsyqjP7MRllZ0zGmU/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/AVvXsEiGkE8hMAuxcoSUPIf4N8l6J5OUejSxXdJcSj9Hnx_wqoSLNAIAhub3SRoHW7nq97ZsmexOgGGzBlMsizmyb0pUuCBbbAKSlYCG8mmMnxl4O69jzzEHe_NeJmxm1gqDBplhSBtIj9PK5ww/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/AVvXsEjWP7Rt_vAtqfy5aMDQCJUuj6CAmF4jHD1MwY7DwH44K97ei-Z17XkV-rc9eW9r4Gu01WobGPmpRrRkksryVtxMxJ_Imd6oz-DH1onI_MmZMQNwM_IiK7LzyFVIfVmR8mQuDPVXS_3TKl0/s1600/subscribeviaemail.PNG" />
<div id='description'>
<img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGf6GPMp7t8zx5wCv-GmEQV_9l-Sp7WKg7ZoxbBGsi6_325IzmZc-5DrEFD-TnOpONolfbEOC9fmzLnsJzZbZSkBOnpjmofZwU2EvRWK4KeDwfSngDBNcfoW_8e1MBxWn5ovOTB92Sxdk/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.




Share On Google+Add This To DeliciousTweet/ReTweet ThisShare on FacebookStumbleUpon ThisDigg This

name is full abdelali tibicht, my country is morocco, care techniques and the development of blogging, my goal through this blog, is to help bloggers develop their blogs through my modest experience gained during my career blogging can.

Follow Me On Twitter Or Facebook

Subscribe to Get Free Blogging Tips And Quality Tutorials Straight in Your Inbox.


Did you like Thread ؟
Tags: