Everybody knows the importance of RSS feeds. So its better to give the readers an option to subscribe to your blog feed by email. Another JQuery Widget with beautiful look, as before I have also share Facebook Popup and Twitter Follower Popup Widget for blogger user. But today I bring in this post another beautiful widget with JQuery light box. In this widget visitors can subscribe you blog’s daily updates via RSS FEED. So here is the complete instructions for how to install the email subscription widget.
Live Preview
How to install email popup subscription box
You can Install This Widget Easily in your Blog By Following These Simple Steps....
Before you edit any template it's better to keep a Backup. So First Backup your Template.
1. Go to your Blogger Dashboard>>Template>>Edit Html
2. Find following code in your template.
</head>
3. and paste the following code before/above </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var setDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"395px", height:"435px", inline:true, href:"#email-popup"});
}});</script>
Note:- *7 Setting this value will effect cookie refreshment. I have set the Subscription box to appear once to the visitor and Subscription box will appear again after 1 week. If you want to display after a 1 day then set 7 to 1. if you set the value 1 then it Must annoying your Blog regular readers. So Leave it By Default and follow the next step.
4. Now Search for </b:skin>. ( Note:- Click the black arrow to expand the code. )
#subscriptionwrap {
width: 600px;
background: #e9e9e9;
padding: 15px;
margin: 14px;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
}
.subscriptionbox h4 {
font-size: 30px;
font-family: 'Verdana', Arial;
font-variant: small-caps;
margin: 0 auto;
text-align: center;
line-height: 30px;
color: #333;
font-weight: 600;
text-shadow: 1px 1px 5px #333;
text-decoration: none !important;
}
.subscriptionbox p {
font-family: geogia;
font-style: italic;
font-size: 26px;
text-align: center;
margin: 0px;
line-height: 30px;
margin-top: 25px;
border-bottom: 1px solid #333;
color: #454545;
padding-bottom: 20px;
}
.emailbutton1 {
background: #f7f8f9;
background: -webkit-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: -moz-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: -o-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: -ms-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f7f8f9",endColorstr="#e9e9e9",GradientType=0 );
border: 1px solid #ddd;
-webkit-border-top-right-radius: 4px;
-moz-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-webkit-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
color: #888 !important;
text-shadow: 0 1px 0 #fff;
line-height: 1.5;
top: 0px;
margin: 10px 0 0 -15px;
cursor: pointer;
padding: 18px 15px 15px 15px !important;
font-size: 14px;
font-weight: bold;
text-decoration: none !important;
}
.emailbutton1:hover {
background: #f1f1f1;
background: -webkit-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: -moz-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: -o-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: -ms-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f1f1f1",endColorstr="#e0e0e0",GradientType=0 );
text-decoration: none !important;
}
.emailinput1 {
width: 490px !important; height: 37px; padding-right: 30px !important;
float: left;
margin: 10px 0 0 0px;
padding: 8px 40px 8px 10px;
border: 1px solid #d2d2d2;
background: #fff;
font-family: georgia;
font-style: italic;
font-size: 16px;
color: #949494;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-decoration: none!important;
}
5. Save your template and you are done second last step! Visit your blog to see it working just perfectly? if everything is working fine then Follow the final step below.
6. Now finally find the following code.
</body>
7. and paste the following code before closing </body> tag.
<div style='display:none'>
<div id='email-popup' style='position:scroll; z-index:99999;'>
<div id='subscriptionwrap'>
<div class='subscriptionbox'>
<h4>Ready To Be Make <strong>Elegant Blog</strong></h4>
<p>Subscribe to My Blogger Tricks to enjoy Free Tricks</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform1' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks", "popupwindow", "scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input name='uri' type='hidden' value='bl0ggertricks'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailinput1' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input class='emailbutton1' title='' type='submit' value='SignUp'/>
</form>
</div>
</div>
</div>
</div>
8. Now you need to make these changes in html code.
- Edit the highlighted yellow text to anything you like. It will appear at the top of the input box.
- Now replace bl0ggertricks with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
- Replace bl0ggertricks with your feed title. It appear at the end of your feed link. In my case it is <input name='uri' type='hidden' value='bl0ggertricks'/>
9. Save your template and you are all set!
Visit your blogs and see it popping up just fine! Remember that the popup will show only once. To see it again you will first need to delete your browser cookie and then refresh the page to see it appearing again. I just hope you would find this tutorial easy and yet exciting. Please let me know if you need any help. I just hope you can make your strong Twitter Followers growth. Wish you success and peace buddies. Stay updated by subscribing our email news feed or like our facebook page.
Image Credit:- FreeDigitalPhotos.net
There are literally hundreds of social media sharing plugins that can display social share button for WordPress, blogger and many more are added each day. Today we have a great social subscription plugins with attractive design which we have created early, its a second version of our previous social subscription plugins with tooltip. In this version we have removed some CSS reset bugs and also make some addition in the plugin layout. The plugin allow visitors to join social networks, such as Facebook, Twitter, Pinterest, Google plus, FACEBOOK, Twitter, PINTERST, RSS FEED, LINKEDIN, TUMBLR and YOUTUBE.
