Setting up an e mail subscription widget in your web site is excellent seo observe to reap convenient traffic. You ought to do nothing besides for including a subscription widget and relaxation of the work is finished mechanically. Readers themselves subscribe to your blog in the event that they in finding their content intriguing and get your site updates directly to their mail-field which then carry site visitors to web site. The only factor which you'll do is to provide fascinating content to your readers which attracts their awareness in order that they like to subscribe your web publication. In earlier article we learned burn a website RSS feed with feedburner and enable e mail subscription. Now in this tutorial, we will speak about how one can add a elegant e-mail subscription kind in blogger which works with feedburner.
(Note: This tutorial is made for blogger however you need to use this widget in any platform)
Before continuing further read Enable Email Subscription With Feedburner and follow the steps until you prompt e mail subscription provider. After it, as an alternative of adding default feedburner widget code follow the under steps.
Fashionable e-mail Subscription Widget For Blogger:
1. Login to blogger account. Go to blogger dashboard > Template > Edit HTML.
2. Click anywhere inside the template HTML editor and press CTRL+F. Inside the search box type ]]></b:skin> and press enter.
3. Just above this tag, paste the following piece of code.
/***** Subscribe widget CSS Starts *****/
.sidebar #subform
{
border: 5px inset #000;
border-radius: 5px; color: #666666;
font-family: Verdana,Arial,Tahoma,sans-serif;
font-size: 12px;
padding: 20px 10px 30px;
text-align: center;
box-shadow: 0 2px 2px 4px #9C9C9C;
}
.sidebar #subform h5 {
font-size: 26px;
font-weight: normal;
margin-bottom: 15px;
text-align: center;
text-transform: none;
}
input {
color:#333;
font-family:Lora, Georgia, "Times New Roman", Times;
margin-top:10px;
}
input[type=text],select,textarea {
-moz-box-shadow:inset 0 1px 2px 1px #eee;
-webkit-box-shadow:inset 0 1px 2px 1px #eee;
background:#fff;
border:1px solid #bbb;
box-shadow:inset 0 1px 1px 1px #eee;
color:#bbb;
font-family:Verdana, Arial, Tahoma, sans-serif;
font-size:9px;
text-transform:uppercase;
vertical-align:middle;
margin:0 2px 0 0;
padding:12px 15px;
}
textarea {
color:#333;
font-family:Lora, Georgia, "Times New Roman", Times;
font-size:12px;
text-transform:none;
}
#subbox {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyD7P3VezqCPnllpnlXKjqHQrSV-t4pFLDewn_lAyLTWsksyZxxZztpSSZ574fH4LrbDmE4KSURhEcAFdSoAAzXghIIiccGDUeuzfz0d_Wk-ffLu3OskBI_A_kEg5aHCIHf_PXlT2qpBPR/s1600/envelope-25072_640.png) no-repeat scroll 16px 15px #FFF;
border:none;
box-shadow:0 1px 1px 1px #EEE inset;
color:#000;
font-family:Verdana,Arial,Tahoma,sans-serif;
font-size:11px;
text-transform:uppercase;
width:160px;
padding:14px 15px 14px 45px;
}
input[type="submit"] {
background:linear-gradient(top,#4690b30%,#3f7ca0100%);
text-shadow:0 1px 0 #1d4a5f;
-webkit-box-shadow: -24px -25px 8px -19px rgba(255,255,255,0.79);
-moz-box-shadow: -24px -25px 8px -19px rgba(255,255,255,0.79);
box-shadow: -24px -25px 8px -19px rgba(255,255,255,0.79);
cursor:pointer;
font-size:16px;
font-weight:700;
text-decoration:none;
text-transform:uppercase;
display:inline-block;
border-style:solid;
border-width:1px 0;
padding:10px 10px;
}
input:hover[type="submit"] {
background:linear-gradient(top,#3f7ca00%,#4690b3100%);
color:#3e89ad;
text-decoration:none;
border-color:#3e89ad #357ea0 #2c7191;
}
/***** Subscribe widget CSS Ends *****/
4. Click on retailer template.
5. Go to blogger dashboard > design > Add a machine . Choose a gadget position where you need your subscription type to appear.
6. On the next pop-up window, select HTML/Javascript and paste following code inside new window.
/***** Subscribe widget start Ends *****/
<div id='subform' type='HTML'>
<!-- Opt-In Subscribe -->
<h5>Subscribe VIA Email</h5>
<p>Subscribe to our blog VIA Email to get the latest updates directly in your mail box.</p>
<br/>
<p>Your email address is safe with us!</p>
<div id='btntEmailsub'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=your RSS ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='your rss'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='subbox' 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 id='subbutton' title='' type='submit' value='Sign up'/>
</form>
</div>
/***** Subscribe widget CSS Ends *****/
<div id='subform' type='HTML'>
<!-- Opt-In Subscribe -->
<h5>Subscribe VIA Email</h5>
<p>Subscribe to our blog VIA Email to get the latest updates directly in your mail box.</p>
<br/>
<p>Your email address is safe with us!</p>
<div id='btntEmailsub'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=your RSS ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='your rss'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='subbox' 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 id='subbutton' title='' type='submit' value='Sign up'/>
</form>
</div>
/***** Subscribe widget CSS Ends *****/
7. Click on on save. That is all.
Customizations:
Important:
Important customization is to vary the red highlighted text with the feedburner identification of your RSS URL which you created whilst burning weblog's feed with feedburner.
Optional:
Replace the text highlighted in green of your own choice.
Hope you like this widget. Stay tuned for more from us.
No comments:
Post a Comment