BloggingeHow introduces yet another WordPress style email subscription widget called BeH-Moz. The widget is king of elegance, i must say. A clean looking email subscription option with moz effect ads a neat look. I previously shared:
Gathering our readers email address is so important now days. It has become a flag ship move for most of the pro bloggers and indeed it works solid. Imagine you work hard for 5 years to gain attention from search engines to send in traffic to your blog. You managed thousands of visitors per day until Google decided to change their algorithms. As a results your blog gets hit and your traffic drops to ground.
What then? Would you jump of the mountain or hit your head with the wall? You cant do any thing. So to avoid any such disastrous situation, pro bloggers encourage webmasters to gather their readers/visitors email addresses so that they could keep track of them and to insure that they are still in tact with the blog even if it gets hurt via search engines.
You may like to read:
So lets add this cool widget to our blogger blogs.
Now find the following code:
Once you have found the above code (that refers to the area right after the post body), well need to add the following code just below it.
[/lock]
Thats all! Now hit Save Template.
Hope you liked the widget. Share your love for the widget below in the comment section.
- Add Elegant Email Subscription/Signup Widget To Your Blog
- Mashable Sharing Widget With Google+ Add To Circles / Search Bar
Gathering our readers email address is so important now days. It has become a flag ship move for most of the pro bloggers and indeed it works solid. Imagine you work hard for 5 years to gain attention from search engines to send in traffic to your blog. You managed thousands of visitors per day until Google decided to change their algorithms. As a results your blog gets hit and your traffic drops to ground.
What then? Would you jump of the mountain or hit your head with the wall? You cant do any thing. So to avoid any such disastrous situation, pro bloggers encourage webmasters to gather their readers/visitors email addresses so that they could keep track of them and to insure that they are still in tact with the blog even if it gets hurt via search engines.
You may like to read:
- 7 Reasons Why Your Email Subscribers Are Not Increasing
- 5 Different Types of 'Call To Action' To Increase Blog Traffic
So lets add this cool widget to our blogger blogs.
Step #1 Finding The Right Place To Add
Go to Blogger Design >> Edit HTML and tick the check box.Now find the following code:
[<div class='post-footer-line post-footer-line-1'>]
Step #2 Add The Subscription Widget Code
Once you have found the above code (that refers to the area right after the post body), well need to add the following code just below it.
Share To Unlock Code
[lock][ <div class="post-after-container"><div id="email_icon"></div><h4>Subscribe to the BloggingeHow.com Newsletter</h4>
<div style="padding-bottom:10px;padding-left:60px;">
Stay up to date with all of BloggingeHow.com tips, tutorials and interesting stuffs by subscribing via email. Your email will be kept private and never shared with anyone.</div>
<div style="padding-left:60px;">
<div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggingehow', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 250px; font-size: 15px;" id="email" name="email" value="Enter Your Email Here..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
<input type="hidden" value="bloggingehow" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="subscribe" name="commit" type="submit" value="Subscribe" />
</div></div></div></div></form>
<style>
#email_icon {
background: url('http://www.mkyong.com/wp-content/themes/mkyongnew/images/email.png') no-repeat;
height: 86px;
width: 79px;
display: block;
position: absolute;
float: left;
margin-left: -35px;
margin-top: 35px;
}
.post-after-container {
background-color: #FFFFFF;
border: 1px solid #E4E4E7;
margin: 0 20px 20px 0;
padding:20px;
}
.post-after-container h4 {
font-size: 16px;
margin:0 0 18px;
padding:0;
}
#email-news-subscribe .email-box{
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2;
border-image: initial;
height:34px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
background: #ff9b00;
background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0}
#other-social-bar {
background-color: #D8E6EB;
box-shadow: 0 1px 1px #FFFFFF inset;
padding: 0px;
font-family: "Arial","Helvetica",sans-serif;
font-weight:bold;
overflow: hidden;
border: 1px solid #B6D0DA;
height:57px;
}
</style>]
[/lock]
Thats all! Now hit Save Template.
Customization
Now simply edit the parts highlighted, the orange one indicates paragraph, heading. The red one is your FeedBurner ID that you have to change.What Do You Think?
Hope you liked the widget. Share your love for the widget below in the comment section.
