Today we are going to make a high quality RSS subscription box with no images. Alerting your visitors to subscribe at the bottom of your posts often help in increasing the number of your blog subscribers. The more readers you get the faster your blog grow. Providing visitors with easy and clean options to subscribe and bookmark should always be your first priority. I managed to design a simple box using CSS3 gradient and text shadow effect to create a container with RSS form inside it. The widget will stick to the bottom of your post and will let your visitors to submit their email addresses and subscribe to your FEED updates. Surely the best way to draw attention!..
How to add Subscription Box Below Your Blog Post:
1. The First thing you need to do is to login into your Blogger account and go to >> Template >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code. #subscriptionwrap {
float: left;
width: 600px;
background: #e9e9e9;
padding: 15px;
border: 1px solid #ddd;
-webkit-border-radius:4px; -moz-border-radius:4px; border-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);
}
.subscriptionbox h4 {
font-size: 38px;
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-radius:4px; -moz-border-radius:4px; border-radius:4px; margin:0 auto; margin-left: -10px; -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.1; top: -1px; cursor:pointer; padding:22px 15px 19px 15px !important; font-size:14px; font-weight:bold; text-decoration:none !important;}
.emailbutton1:hover, .formbutton: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{ height:40px; 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;}
.emailinput1{ padding-right:30px !important; width:450px !important;} Note:- if you want to change the width of subscription box. Just change the following value in above code “width: 600px; to any other value like 640px, 700px, 760px….!!!!!
2. In the template, search for the <data:post.body/> tag and just below it paste the following HTML Coding. In case, you are unable to find <data:post.body/>, then you can paste it just below
<div class='post-footer-line post-footer-line-1'>.
<div class='post-footer-line post-footer-line-1'>.
<div id='subscriptionwrap'>
<div class='subscriptionbox'>
<h4>Stay <strong>Connected<strong> Stay <strong>Updated</strong></h4>
<p>Subscribe to Tips&Tricks to enjoy Free Updates</p><center>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open("https//YourFeedURL", "popupwindow", "scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input name='uri' type='hidden' value='Your Blog Name'/>
<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>
</center>
</div>
</div>
3. 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 http://feedburner.google.com/fb/a/mailverify 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 Tips&101Tricks with your feed title. It appear at the end of your feed link. In my case it is <input name='uri' type='hidden' value='Tips&101Tricks'/>
4. Save your template and You are all set!!!
Post A Comment:
0 comments:
Post a Comment