Having a blog with fresh contents and less subscribers is much worse than anything. Subscribers are the backbone of a blog, they are the peoples who read your blog regularly. So as I always say, increasing your email subscribers is something essential.
I have previously shared some email subscription widgets that can be placed in the sidebar of your blog. Different from that, today I have a simple email subscription widget for you and I will show you how to place that widget below every posts of your blogger blog. The widget is just a simple one with a simple hover effect and has no social profile buttons placed in it. The widget is easy to add and can be done with a couple of clicks...
Adding a Simple Email Subscription Widget Below Every Posts in Blogger:
Step 1: Go to your blogger dashboard >> Template >> Edit HTML.
Step 2: Check the "Expand Widget Templates" check box on the left top.
Step 3: Using Ctrl+F search for ]]></b:skin> and paste the below code above it:
#subscription-box {border-left: 10px solid #ff690e; padding: 10px 10px; color: rgb(34, 34, 34); background-color: #f4f4c4; line-height: 1.2; margin-bottom: 10px;}
#subscription-box .title {font-size:1.2em; font-weight:bold;}
#subscription-box:hover{background:#E8F5FC;border-left:10px solid #00b9ed}
.sbutton {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
background: -moz-linear-gradient(
top,
#00baed 0%,
#00baed);
background: -webkit-gradient(
linear, left top, left bottom,
from(#00baed),
to(#00baed));
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
border: 1px solid #00baed;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}
Step 4: Now, using Ctrl+F search for <data:post.body/> and paste the below code below it:
<b:if cond='data:blog.pageType == "item"'>
<div id='subscription-box'>
<p style='margin-bottom:8px;'><span class='title'>Did you enjoy this post?</span><br> If you wish to be informed whenever a new post is published, then subscribe by entering your email! </br></p>
<p/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=Tweaks123", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>
<input class='emailfield textfield' name='email' onblur='if(this.value==''){this.value='your email here!';}' onfocus='if(this.value=='your email here!'){this.value=''};' placeholder='Email address...' style='width:200px; margin-right:5px;' type='text' value='your email here!'/>
<input class='sbutton' type='submit' value='Send Me Updates!'/>
<input name='uri' type='hidden' value='Tweaks123'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>
</b:if>
Step 5: Click the orange 'Save' button!
Customization:
- Replace Tweaks123 with your own feedburner ID.
- Replace #f4f4c4 with some other color code to change the background color of the widget.
- Replace #E8F5FC with some other color code to change the background color of the widget on mouse hover.
- Replace #ff690e with some other color code to change the border color of the widget.
- Replace #00b9ed with some other color code to change the border color of the widget on mouse hover.
Now, reload your blog and you can see the widget glowing below each and every posts of your blog. If you have faced any troubles while placing the widget, then let me know it through the comment box below!
No comments:
Post a Comment