Jul 27, 2016

2 New! Stylish Sidebar Subscription Widget for Blogger

data:blog.title
Stylish Sidebar Subscription Box Widget for Blogger
To get instant page views on new post we must have a lot of subscribers. More Subscribers means More power to you in terms of free and instant highly targeted traffic to your every new blog post. Email Subscribe widget is most important part of every blogger. Some of newbies don't know about power of email subscribe widget. So, first let us tell you about What is Email Subscribe widget?
How To Add Stylish Sidebar Subscription Box Widget for Blogger

Our Recommended Blogger Widgets

  1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
  2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
  3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.

What is Email Subscribe widget?

Email Subscribers widget has a subscription box and it allows users to publicly subscribe by submitting their email addresses, and if you get email subscribers for your blog then you get free traffic for your blog because, when you publish a new article on your blog then a subscriber get a newsletter from feedburner. Thus, you must have a email subscribe widget on your blog and tell your readers to subscribe your blog if they like your article and they want your newsletter to their mailbox.

So, today we are going to share 2 New! Stylish Sidebar Subscription Widget for Blogger. You can add the subscription box of your choice to your Blogger site from below instruction. You can also see live demo of these widgets from below demo button.


Sidebar Subscription Widget Style 1

Stylish Subscription Box Widget Style1 for Blogger


How To Add it on Blogger?

  • Go to Blogger >> Layout >> Add A Gadget >> HTML/JavaScript.
  • Paste Below code inside it and change all highlighted colors with your choice and after that save it.
<style>
//**Subscription Box Style1 By mybloggerguides.com**//
#mbg-sub-box{border:5px solid #444;}
#mbg-sub-box-wrap1 {background:#8ff; width:100%; height:auto; border-bottom:20px solid #8ff;}
.mbg-sub-box-wrap { background:#8ff; max-width:100%; margin-left:5px; margin-right:5px;  }
#mbg-sub-box .main-tagline {
  padding: 0px 0px;
  line-height: 2.2em;
  font-size: 28px;
  margin: 0;
  height: 55px !important;
  overflow: hidden;
  font-weight: normal;
 color:#ff0066;
  text-align: center;
  border: 0;
  background-color: #444;
border:55px solid #ff0066;
border-radius:60px;
   border-bottom: 15px solid #444;
border-top: 15px solid transparent;
}
#mbg-sub-box .sub-box-wrap-text{ height:auto; background:#444; margin-top:10px; margin-left:15px; margin-right:15px; border-bottom-left-radius:70px; border-top-right-radius:70px; text-align: 10px; border:2px solid #8f2;}

#mbg-sub-box .sub-box-wrap-text p{color:#8ff; font-size:20px; font-weight:normal; line-height:1.35em;  margin:13px 20px 20px 20px; }

#mbg-sub-box .rssform {
  padding: 0px 20px;
  margin: 16px 0px 16px 0px;
}
#mbg-sub-box .rssform input {
  padding: 8px;
  font-size: 13px;
  font-family: "Oswald", sans-serif;
  font-weight: normal;
  width: 100%;
  text-transform: uppercase;
  outline: none !important;
 border:2px solid #8f2;
  border-radius: 3px;
  box-sizing: border-box !important;
  -moz-box-sizing:border-box;
}
#mbg-sub-box .rssform .button:hover {
  background: #ff0036; /*----- Change Subscribe button hover color here -----*/
}
#mbg-sub-box .rssform .button {
  background: #ff0066; /*----- Change Subscribe button background color here -----*/
  color: #FFF!important; /*------ Change Font color here ------*/
  border:2px solid #8f2;
  margin-top: 15px;
  outline: none !important;
  transition: all .5s ease-in-out;
  width: 100%;
  padding: 6px !important;
  float: none;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
border-radius:3px;
}
#mbg-sub-box .lock-policy a {
  color:#444;
  text-decoration:none !Important;
}
#mbg-sub-box .lock-policy {
  font-family: "Oswald",sans-serif;
  background: url(https://2.bp.blogspot.com/-tXdn9KgyPt0/V5eRBuMiCPI/AAAAAAAAEwY/nsls2VVLPmYyR5bipSOlbmEBVgV94aw7QCLcB/s1600/MyBloggerGuides-Lock-Policy.png) no-repeat -3px -4px; /*--- image URL of Lock appears in footer ---*/
  color: #444;
  text-align: center;
  font-size: 12px; /*--- Font size of footer line ----*/
  margin-left: 10px;
  padding: 0px;
  line-height: 30px;
  margin-top: -5px;
}
</style>
<div id='mbg-sub-box'>
<div id='mbg-sub-box-wrap1'>
<div class='mbg-sub-box-wrap'>
<div class='main-tagline'>Subscribe Us</div>
<div class='sub-box-wrap-text'><p>And Get Latest Blogger Guides, Widgets, Templates Direct to Your Mailbox!
Just Enter Your Email, Hit Sign Up and Verify for Lifetime Updates.
</p></div>
<div class='rssform'>
            <form action='http://feedburner.google.com/fb/a/mailverify' method='post' target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerGuides', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type='text' name='email' placeholder='Enter your email address...' />
            <input type="hidden" value="MyBloggerGuides" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input value="Sign Up" class="button" type="submit" />
            </form>
            </div>
<div class="lock-policy">
     Safe With Us | <a href="http://mybloggerguides.com/p/privacy-policy.html">Privacy Policy</a> | <a href="http://www.mybloggerguides.com/2016/07/stylish-sidebar-subscription-box-widget-for-blogger.html" target='_blank'>>Get This Widget</a>
   </div>
</div>
</div>
  • Now Open your Blog and see it live on your Blog.

Sidebar Subscription Widget Style2

Add Stylish Sidebar Subscription Box Widget Style2 to Blogger

How To Add it on Blogger?

  • Go to Blogger >> Layout >> Add A Gadget >> HTML/JavaScript.
  • Paste Below code inside it and change all highlighted colors with your choice and after that save it.
<style>
//**Subscription Box Style1 By mybloggerguides.com**// #mbg-subbox {background:#111; width:100%; height:auto; border-bottom:5px solid #ff5959;}
#mbg-subbox .box-wrap { background:#111; max-width:100%; margin-left:5px; margin-right:5px; border-top:5px solid #444;   }
#mbg-subbox .main-tagline {
  padding: 0px 0px;
  line-height: 2.2em;
  font-size: 28px;
  margin: 0;
  height: 55px !important;
  overflow: hidden;
  font-weight: normal;
  color: #FFF;
  text-align: center;
  border: 0;
  background-color: #FF5959;
border:15px solid #111;
border
border-bottom-radius:10px;
   border-bottom: 10px solid transparent;
border-top: 10px solid transparent;

}
#mbg-subbox .box-wrap-text{height:auto; background:#111; margin-top:10px; margin-left:15px; margin-right:15px; border-bottom-left-radius:70px; border-top-right-radius:70px; text-align: 10px; border:2px solid #f3f3f3;}

#mbg-subbox .box-wrap-text p{color:#fff; font-size:20px; font-weight:normal; line-height:1.35em;  margin:13px 20px 20px 20px; }

#mbg-subbox .rssform {
  padding: 0px 20px;
  margin: 16px 0px 16px 0px;
}
#mbg-subbox .rssform input {
  padding: 8px;
  font-size: 13px;
  font-family: "Oswald", sans-serif;
  font-weight: normal;
  width: 100%;
  text-transform: uppercase;
  outline: none !important;
  border: none;
  border-radius: 3px;
  box-sizing: border-box !important;
  -moz-box-sizing:border-box;
}
#mbg-subbox .rssform .button:hover {
  background: #ff2020; /*----- Change Subscribe button hover color here -----*/
}
#mbg-subbox .rssform .button {
  background: #ff5959; /*----- Change Subscribe button background color here -----*/
  color: #FFF!important; /*------ Change Font color here ------*/
  border: 0;
  margin-top: 15px;
  outline: none !important;
  transition: all .5s ease-in-out;
  width: 100%;
  padding: 6px !important;
  float: none;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
border-radius:3px;
}
#mbg-subbox .Box-bottom-text { margin-top:10px; margin-left:15px; margin-right:15px; border-top-left-radius:70px; border-bottom-right-radius:70px; text-align: 10px; border:2px solid #f3f3f3; margin-bottom:15px;}
#mbg-subbox .promise { line-height:1.2em; font-size:16px; color:#fff; text-align:center; margin-top:15px; margin-bottom:15px;}
</style>
<div id='mbg-subbox'>
<div class='box-wrap'>
<div class='main-tagline'>Subscribe Us</div>
<div class='box-wrap-text'><p>And Get Latest Blogger Guides, Widgets, Templates Direct to Your Mailbox!
Just Enter Your Email, Hit Sign Up and Verify for Lifetime Updates.
</p></div>
<div class='rssform'>
            <form action='http://feedburner.google.com/fb/a/mailverify' method='post' target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerGuides', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type='text' name='email' placeholder='Enter your email address...' />
            <input type="hidden" value="MyBloggerGuides" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input value="Sign Up" class="button" type="submit" />
            </form>
            </div>
<div class='Box-bottom-text'>
<div class='promise'>We Promise! We won't Spam You.</div>
</div>
</div>
</div>
  • Now Open your Blog and see it live on your Blog.

Conclusion:

So above guide is about How To Add Subscription Box Widget To Blogger Sidebar with our 2 New  Stylish Skins? We hope by this tutorial you can add it successfully on your blog without facing any problem. If anyhow problem persist after following all steps then drop a comment below. We will help you out of sure. Do Share.
Thank You! Stay Blessed!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.