Wednesday 13 October 2021
SUBSCRIPTION BOX VIA EMAIL IN BLOGSPOT
---------------------------------------------------------------------------------------------------------------------
Stylish Email Subscription Widget For Blogger
Read More:
How to create Pop up Email Subscription Box for blogger
1. Go to Blogger.com
2. Click on Layout and click on add new gadget.
3. Select HTML/Javascript.
---------------------------------------------------------------------------------------------------------------------
<style>
/***** Email Subscription Widget For Blogger By Https://shoutersplanet.blogspot.com *****/
//@media(max-width:400px) {.sbox{width:109%!important;}}
//@media(max-width:1024px) and (min-width:400px) {.sbox{width:106.5%!important;}}
.sbox {background:#009abe;text-align:center;width:100%;}
.sbox span {color:#fff;font-family:roboto;font-size:27px;}
.sbox .small {font-size:18px;}
input.boxinput::placeholder {color:#fff;}
.sbox .hatespam {font-size:15px;}
.sbox .boxinput::placeholder {color:#fff;}
.sbox .boxinput {background:rgba(0,0,0,0.4);color:#fff;border:none;padding-top:13px;padding-bottom:13px;font-family:roboto;margin-bottom:10px;outline:none;transition:.3s;width:86%;border-radius:4px;}
.sbox .boxsubmit {box-shadow:0px 0px 31px 0px rgba(0,0,0,0.2);width:86%;text-align:center;padding-top:13px;padding-bottom:13px;background:#fff;outline:none;border:none;color:#009abe;font-family:roboto;cursor:pointer;border-radius:4px;}
.sbox .boxsubmit:active {background:rgba(0,0,0,0.6);color:#fff;}
.sbox {border-radius:8px!important;padding:0!important;border:none!important;}
.sbox .widget-content {margin:0!important;}
#sidebar-wrap .widget {overflow-x:hidden;}
.sbox {background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)!important;width:100%;}
.sbox .boxsubmit {box-shadow:none!important;border-radius:2px!important;color:#764ba2!important;}
.sbox .boxinput {border-radius:2px!important;}
</style>
<div class='sbox wow rubberBand'>
<center>
<br /><span class='icon'><img height='auto' src='https://1.bp.blogspot.com/-9-fJaPMneBk/WlMlqltvtOI/AAAAAAAACEM/qEy8USIBQJwky4GJixaeBxlk2WDor-JPgCLcBGAs/s1600/email.png' width='150px'/></span><br/>
</center>
<span>Newsletter</span><br /><br />
<span class='small'>Join our newsletter to get secret tips directly in your inbox!</span><br /><br />
<center>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=shoutersplanet', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true' target='popupwindow'><input class='boxinput' name='EMAIL' placeholder='Your Email Address' type='email' required/>
<input class='boxsubmit' type='submit' value='Submit'/><input name='uri' type='hidden' value='shoutersplanet'/>
<input name='loc' type='hidden' value='en_US'/></form><br />
<span class='hatespam'>*We Hate Spam!</span><br /><br />
</center></div>
---------------------------------------------------------------------------------------------------------------------
OR USE THIS CODE
http://www.bloggerwidgetgenerators.com/2014/09/stylish-email-subscription-box-widget-for-blogger.html
---------------------------------------------------------------------------------------------------------------------
<b:if cond='data:blog.pageType == "item"'>
<style>
.mtc-newsletter-box {width:500px; height:222px; background:#f5f5f5; border:10px solid #ABABAB;padding:5px;}
.mtc-newsletter-box h1{font-size:20px; font-weight:bold; color:#444; text-align:center;}
.mtc-newsletter-box p{font-size:16px; font-family:georgia; text-align:center;line-height:25px;}
.mtc-newsletter-box input{background: white url(http://2.bp.blogspot.com/-dcien5QLnB8/UOb4N7eNU1I/AAAAAAAAAhw/NxzO8UXjgG4/s1600/subscribe-email.png) no-repeat right;font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px; border: 1px solid #111 !important;font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important; box-shadow:2px #ABABAB;}
.mtc-newsletter-box .submit{background:#ABABAB;}
.mtc-newsletter-box .submit:hover{background-color: #444;border: 1px solid #444;color: white;text-decoration: none;}
</style>
<div class='mtc-newsletter-box'>
<h1>Join Our Email Newsletter Now!</h1>
<p>Join over 1,000 people who get free and fresh content delivered automatically each time we publish.</p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Feed Burner ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><div align="center">
<input name='email' onblur='if (this.value == "") {this.value = "Enter Your Email Address...";}' onfocus='if (this.value == "Enter Your Email Address...") {this.value = ""}' size='30' type='text' value='Enter Your Email Address...'/><input name='uri' type='hidden' value='Feed Burner ID'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submit' type='submit' value='Subscribe Now!'/></div>
</form><a href="http://www.bloggerwidgetgenerators.com/" target="blank"><img border="0" src="http://1.bp.blogspot.com/-NUjR7Zj1XlE/UY-qUHrM8YI/AAAAAAAAAFw/PjFLd0oCmyE/s1600/blank.png" /></a></div></div>
</b:if>
---------------------------------------------------------------------------------------------------------------------
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment