Add WordPress Email Subscription With Moz Effect To Blog!

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:

email subscription with moz effect

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.

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

[     <div class="post-after-container"><div id="email_icon"></div><h4>Subscribe to the Newsletter</h4>
    <div style="padding-bottom:10px;padding-left:60px;">
    Stay up to date with all of 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="" method="post" target="popupwindow" onsubmit="'', '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=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)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" />
    #email_icon {
      background: url('') 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;
    .post-after-container h4 {
        font-size: 16px;
        margin:0 0 18px;
    #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;
        #email-news-subscribe .email-box{
            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{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:1px solid #cc7c00;
            text-shadow:#d08d00 1px 1px 0;
            padding:7px 14px;
            border-image: initial;}
        #email-news-subscribe .email-box input.subscribe:hover{
            background: #ff9b00;
            background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
            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%);
            border:1px solid #cc7c00;
            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;
            overflow: hidden;
            border: 1px solid #B6D0DA;


Thats all! Now hit Save Template.


 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



AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
BloggingeHow | Making Blogging Simpler: Add WordPress Email Subscription With Moz Effect To Blog!
Add WordPress Email Subscription With Moz Effect To Blog!
BloggingeHow | Making Blogging Simpler
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy

Tools of the Trade