Pop Up Email Subscription Form For Blogger is a blogger widget using jquery. In this widget the form is created by css3 with a auto check feature and the pop up is created using jQuery. We hope this form helps you to increase your blog readers. Now we can see how to Add The Add Pop Up Email Subscription Form For Your blog.
Before that you need to see a live demo for better understanding what
we are talking about.you can see the live demo by clicking the floating
email icon on the left side of the demo page.
live demo:-Add Pop Up Email Subscription Form For Blogger
Adding jQuery plugin to the template:
As this widget based on jQuery plugin, First you need to have a jQuery Plugin in your Blog template.This Step is Required, If your Blog already have this plugin then Ignore this Step.
If your Blog Don’t have this Plugin, Install the jQuery Plugin.
- Add the below line of code before
</head>tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Adding Widget Code to blogger
These steps are to add the Pop Up Email Subscription widget to your blog.- Go to Layout >> Add A Gadget, then choose HTML/JavaScript
- Paste this 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(http://3.bp.blogspot.com/-1lucxKhy3Zs/T3vIg4k-5wI/AAAAAAAAArM/EiH85Hp-ZW8/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='http://3.bp.blogspot.com/-1lucxKhy3Zs/T3vIg4k-5wI/AAAAAAAAArM/EiH85Hp-ZW8/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="http://2.bp.blogspot.com/-NASh-8VP8qs/T32ePzbJtSI/AAAAAAAAAr8/wjiJnIb7GD4/s1600/subscribe_to_email.png" alt="subscribe" /></a></div>
<div id="subscribe-widget">
<div id="btntfollowForm">
<img alt="Subscribe" border="0" float="center" src="http://1.bp.blogspot.com/-WcR7_thytsA/T3xAvSp4RBI/AAAAAAAAArc/zIO8zUiOOT0/s1600/subscribeviaemail.PNG" />
<div id='description'>
<img alt="email" border="0" src="http://4.bp.blogspot.com/-RKkfCfOLNx8/T3wPtkmqYuI/AAAAAAAAArU/gGpb8_Hep70/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=chandeepsblogtips', '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="chandeepsblogtips" /><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.blogtipsntricks.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> - Replace the code highlighted above with your feedburner username .
The username for your feed can be found at the end of your feed URL.For example our feedburner URL is http://feeds.feedburner.com/chandeepsblogtips , with chandeepsblogtips as the username.
- Now save the widget and view your blog. The widget trigger icon is placed in the left side of your blog.
In the world of blogging, great content
still is never enough. Now you need to worry about creating quality
content that people will pass around on the major social networks and
link back to from their blogs. With so much information and rehashed
content out there what are you supposed to blog about to get peoples
interests?
Make sure you also write crazy and controversial titles that draw people in. At the end of the day, people are much more likely to click on something that grabs their attention, versus another boring headline on something they’ve already heard about.
Instead, you can write the killer post, then spend a few dollars and promote it to everyone through Facebook Ads that has an interest in “warcraft”. This isn’t just limited to video games, you can twist this to work with nearly any topic or blogging niche. This will open up a whole new audience for you, while also tapping into a whole new market.
The same can be said for blogging. If you are going to post crap content, no one is going to care about your or your blog and you will likely be forgotten.
Instead, creating content that is catered to your audience and you make the conversation two ways and ask for their input, now you are creating a valuable experience.
Using these tips and more I’ve been able to become a well known blogger and brand over the past five years. For more exciting and effective methods to improve your blogging game, be sure to check out my new book on Amazon titled “Blogging Tips: Confessions of a Six Figure Blogger“.
In this post we are going to give you three ideas to get more people commenting, sharing with their friends and more.
Write Controversial Blog Posts
One of the easiest ways to get people to click on your links when they see your RSS feed or a listing on the social network is to be writing about something controversial. This can be anything from politics, current news or anything that is going on in the same industry you blog about.Make sure you also write crazy and controversial titles that draw people in. At the end of the day, people are much more likely to click on something that grabs their attention, versus another boring headline on something they’ve already heard about.
Target the Audience You are Writing For
An excellent way to gain attention and high quality readers to your blog is to make sure the right audience is seeing your content. Let’s say you have a generic gaming news blog. Sure, you already have a ton of gamers who are checking out your site every day, but if you are going to write a killer new post on the next WarCraft game coming out, are they all going to be interested?Instead, you can write the killer post, then spend a few dollars and promote it to everyone through Facebook Ads that has an interest in “warcraft”. This isn’t just limited to video games, you can twist this to work with nearly any topic or blogging niche. This will open up a whole new audience for you, while also tapping into a whole new market.
Interact with the Readers
When someone is talking to you and you feel they are truly invested in the conversion, then you feel important. You are more likely to remember who you were talking with, what you were talking on and really find value in the person and the time you spent with them.The same can be said for blogging. If you are going to post crap content, no one is going to care about your or your blog and you will likely be forgotten.
Instead, creating content that is catered to your audience and you make the conversation two ways and ask for their input, now you are creating a valuable experience.
Using these tips and more I’ve been able to become a well known blogger and brand over the past five years. For more exciting and effective methods to improve your blogging game, be sure to check out my new book on Amazon titled “Blogging Tips: Confessions of a Six Figure Blogger“.
Freind Sites
Recent Posts
Labels
Blog Statistic
