An All In One Email Subscription Box With Social Sharing Buttons For Blogger
1. First of all go to
blogger dashboard and click on the arrow pointing downward on the right upper corner of the page and select Template.
2. Click on Edit HTML. An HTML document of your blog will be opened. Search for <head> and paste the following code above <head>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
Click on Save Template.
Note:
If you have already placed this code in your HTML document before, then there is no need to put it again.
3. Now go to Layout and click on Add a Gadget. Select HTML/JavaScript from the list and add the following code in it:
<style type="text/css">
#subscribe-button { float: right; position: fixed; bottom: 5%; right: 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/AVvXsEhZys7vNDIHdu3fSZLJ3DuI9CDOVTvky6HaJT2hYpbQfV4W7zSIqIchXpIs-FjVfZAPaCD2K9sgW9zauzx9MFi3FirKOfCly2c5-dAg_kyKYsrsBCbaMDSUg6HpGZEdDemAZwhSaVvv4gUT/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/AVvXsEhZys7vNDIHdu3fSZLJ3DuI9CDOVTvky6HaJT2hYpbQfV4W7zSIqIchXpIs-FjVfZAPaCD2K9sgW9zauzx9MFi3FirKOfCly2c5-dAg_kyKYsrsBCbaMDSUg6HpGZEdDemAZwhSaVvv4gUT/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/AVvXsEgjo-5bn3itaY_Nfrq9C2plNLF7HSkYm_IYTKCNf9daxWpq90bbgROBxmKLhAuDDmKyFjhyphenhyphenzyvRE_gYDzGF_aaS-NTLIEAnpdGpFRFAYa67YnJ54RIeBkVH0spR-SDwqjhERYZex2y5QSHG/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/AVvXsEi0hbOJuAAg3jIDfF2EPH_mhXQgDtNWj0S9W9kcrrslgD7WDZIl6GaBQ_Yndrxw0xkktnBT_DubhuMGdfTfgIvaLfEbOW4mT-ZXgbRHOuleDHd8rpqLp5jOM0dNwxP-VVW1tvess2CivwZd/s1600/Subscribe+Via+Email.PNG" />
<div id='description'>
<img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzMS9a1QkWAuOyScDIqfK4gH5Q2IlMb4E06vxhN7ftJQGEjMDwrQD3bdA5BFK_FLH4vuxr050osfEb3MbtwcLXKaWdTw9g1Ht5VSRtlgykKphyphenhyphenoR6t36ym8T3AbxShIry9S5n3nK9ZpgCv/s1600/Mail.PNG" />Subscribe To Get FREE Blogging Tips and Tutorials!...</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/jiPcI', '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="blogspot/jiPcI" /><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>
4. Replace blogspot/jiPcI with your feed username. (To learn all about blog feed, read my post How to Setup Feedburner Feed and Email Subscription for your blog
5. Replace Subscribe To Get FREE Blogging Tutorials with your own words.
6. Click on Save and you have done!
How To Add Email Subscription Box Above Every Post
You also want to read How to Add Email Subscription Box Above Every Post
Click on Save Template.
Note:
If you have already placed this code in your HTML document before, then there is no need to put it again.
3. Now go to Layout and click on Add a Gadget. Select HTML/JavaScript from the list and add the following code in it:
<style type="text/css">
#subscribe-button { float: right; position: fixed; bottom: 5%; right: 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/AVvXsEhZys7vNDIHdu3fSZLJ3DuI9CDOVTvky6HaJT2hYpbQfV4W7zSIqIchXpIs-FjVfZAPaCD2K9sgW9zauzx9MFi3FirKOfCly2c5-dAg_kyKYsrsBCbaMDSUg6HpGZEdDemAZwhSaVvv4gUT/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/AVvXsEhZys7vNDIHdu3fSZLJ3DuI9CDOVTvky6HaJT2hYpbQfV4W7zSIqIchXpIs-FjVfZAPaCD2K9sgW9zauzx9MFi3FirKOfCly2c5-dAg_kyKYsrsBCbaMDSUg6HpGZEdDemAZwhSaVvv4gUT/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/AVvXsEgjo-5bn3itaY_Nfrq9C2plNLF7HSkYm_IYTKCNf9daxWpq90bbgROBxmKLhAuDDmKyFjhyphenhyphenzyvRE_gYDzGF_aaS-NTLIEAnpdGpFRFAYa67YnJ54RIeBkVH0spR-SDwqjhERYZex2y5QSHG/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/AVvXsEi0hbOJuAAg3jIDfF2EPH_mhXQgDtNWj0S9W9kcrrslgD7WDZIl6GaBQ_Yndrxw0xkktnBT_DubhuMGdfTfgIvaLfEbOW4mT-ZXgbRHOuleDHd8rpqLp5jOM0dNwxP-VVW1tvess2CivwZd/s1600/Subscribe+Via+Email.PNG" />
<div id='description'>
<img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzMS9a1QkWAuOyScDIqfK4gH5Q2IlMb4E06vxhN7ftJQGEjMDwrQD3bdA5BFK_FLH4vuxr050osfEb3MbtwcLXKaWdTw9g1Ht5VSRtlgykKphyphenhyphenoR6t36ym8T3AbxShIry9S5n3nK9ZpgCv/s1600/Mail.PNG" />Subscribe To Get FREE Blogging Tips and Tutorials!...</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/jiPcI', '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="blogspot/jiPcI" /><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>
4. Replace blogspot/jiPcI with your feed username. (To learn all about blog feed, read my post How to Setup Feedburner Feed and Email Subscription for your blog
5. Replace Subscribe To Get FREE Blogging Tutorials with your own words.
6. Click on Save and you have done!
How To Add Email Subscription Box Above Every Post
You also want to read How to Add Email Subscription Box Above Every Post
How
To Add Email Subscription Box Above Every Post
- See more at:
http://genuineonlineearnings.blogspot.com/2015/02/how-to-add-email-subscription-box-above-every-post.html#sthash.irk7HvbE.dpuf
Thanks for sharing these coding. Very helpful to learn from that and implement with the site.
ReplyDeleteBest Logo Design Company | Best e-Commerce Service Provider
Great Article & Thanks for sharing.
ReplyDeleteOflox Is The Best Digital Marketing Company In Dehradun, Website Development company in Dehradun or Website Development Company In Saharanpur