May 24, 2016

Add Responsive Subscription Box Above/Footer Blogger Posts

data:blog.title
Hello my all loyal readers. Hope you all are fine. First sorry to my all readers because this is a post after 2 months cause I'm too busy in my diploma exams. Now exam is over but Practical exam is not over. So now these days, I can't regular post here because of my practicals. Wait for me guys, I will back soon with hundreds of blogger widgets. Today I'm here with another widget for your Blogger blog which is important widget for every blogger blog. We always understand the importance and needs of a blogger so we always try to  make some good looking widgets for blogger blogs. In past we published Responsive Subscription Box Above/Footer Blogger Posts V1 and now we are going to publish the next version of this widget Add Responsive Subscription Box Above/Footer Blogger Posts V2. You can see a live demo of this widget from below screenshot.


Stylish responsive email subscription box for blogger blog





Live Demo


Actually, this is a widget which we are using on Template MBG Subscribe US Blogger Template.  I think you have already seen it in our last post. Now we think we can also use this widget on the above or footer of Blogger posts.

Subscription box widget is must having widget on blog for every blogger because it can increase your subscribers on feedburner and we know all very well if we have subscribers of our feed on feedburner then it can increase page views of our blog easily, which can increase PR and alexa rank of our blog. so we suggest you, if you don't have a subscription box widget in below post on your blog then must implement our widget. below are some features of this widget. Read before adding it on your blog.

Features of This Subscription Box

  • Fully Responsive.
  • Fast Loading.
  • 3 Colors Hover Effect on Submit Button.
  • Fully Customized with CSS & HTML Coding.
  • Attractive Look.

How To Add  Subscription Box Above/Footer Blogger Posts


So finally if you have decided to add this widget on your blogger blog then read following step by step guide.

Note : Before doing any customization in your template we highly recommended to Download a backup of your Blogger template.

  • Go to Blogger >> Template >> Edit HTML.
  • Click anywhere inside the code area.
  • Search for below code by pressing CTRL+F

]]></b:skin>


  •  Paste following code just above of this code.
/*  Subscription Box by:   www.MyBloggerGuides.com  */
div#MBG-Sub-Box {
padding: 50px 0px;
border-radius: 2px;
color: #CAF;
text-shadow: 2px 2px 2px #444343;
font-size: 20px;
font-weight: bold;
background-color: #fff;
font-family: sans-serif;
width:100%;
background:#F3F3F3;
}
div#MBG-Sub-Box:before {
content: "  \f0e0   Subscribe Us  ";
background: #FFFF00;
font-family: Lobster, FontAwesome;
padding: 20px 10px 20.5px 10px;
position: relative;
overflow: hidden;
z-index: 10;
top: 57px;
right: px;
transition: .3s;
}
div#MBG-Sub-Box .wrap-me {
margin: 0 auto;
display: block;
padding: 30px 20px;
background-color: #404040;
box-shadow: 2px 4px 2px 2px #444444;
border-top: 65px solid #FF0000;
color: #444444;
box-sizing: border-box;
background: #000 url('http://1.bp.blogspot.com/-FzCdLYOA4ms/U1DnVwbvYGI/AAAAAAAAAnY/M-EpS75hQNA/s1600/header_bg1.png' )no-repeat 0px 0px;
padding: 12px 0px 1px 0px;
clear: both;
text-align: center;
display: block;
margin: 10px 0;
height: auto;
}
.MBG-Enter-Email {
color: #444242;
width: 170px;
height: 50px;
background: #fff url(https://lh4.googleusercontent.com/-dPJx9mWYWPw/UtV5aN-6mRI/AAAAAAAAAJs/ibo7iZsN4nw/h120/MAIL.png) no-repeat 15px 22px;
padding: 5px 0px 5px 38px;
border-radius: 2px;
border: 1px solid #000;
margin-top: 22px;
}
.MBG-Button:hover {
background: #FFFF00;
border: 2px solid #FF0000;
}
.MBG-Button {
background: #FF0000;
  font-family: Lobster, FontAwesome;
cursor: pointer;
color: #CAF;
font-weight: bold;
text-shadow: 2px 2px 2px #444343;
border: 2px solid #FFFF00;
border-radius: 2px;
font-size: 30px;
padding: 3px 19px 3px 19px;
}
.MBG-Headline {
text-shadow: 2px 2px 2px #444343;
text-align: center;
color: #CAFFFD;
font-size: 35px;
  font-family: Lobster, FontAwesome;
line-height: 1.5em;
margin-top: 7px;
margin-bottom: 4px;
}

  •  Now search for <data:post.body/> tag and paste below code just below of this tag.
Note : If you are using read more button on your blog then you can find this tag 2 to 3 times. So paste below code which suite on your blog. Generally second one is right selection.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id="MBG-Sub-Box"><div class="wrap-me"><div class="MBG-Headline">Subscribe Us &amp; Get Latest Updates Direct into Your Mailbox!</div><form action="http://feedburner.google.com/fb/a/mailverify" class="MBGEmailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerGuides', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" value="MyBloggerGuides" type="hidden"> <input name="loc" value="en_US" type="hidden"> <input class="MBG-Enter-Email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" required="" value="Enter your email..." type="text"><br><br><input class="MBG-Button" title="" value="Sign Up" type="submit">
</form><div class="clr"><div class="MBG-Credit">
<a href="http://www.mybloggerguides.com/2016/05/add-responsive-subscription-box-blogger-posts.html" target="_blank"> Get Widget</a>
</div></div></div></div></b:if>

  • Change Yellow highlighted color with yours.
  • Now Search for </head> tag and paste following code just above of </head> tag.

 
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/css?family=Oswald|Lobster:400' rel='stylesheet' type='text/css'/>


  • Now, Hit on Save template.
  • That's it. You are done.

How to  Add Responsive Subscription Box to Sidebar.


  • Go To Blogger >> Layout >> Add A Gadget >> HTML/JavaScript.
  • Paste following code inside it.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/css?family=Oswald|Lobster:400' rel='stylesheet' type='text/css'/>
<style>
/*  Subscription Box by:   www.MyBloggerGuides.com  */
div#MBG-Sub-Box {
padding: 50px 0px;
border-radius: 2px;
color: #CAF;
text-shadow: 2px 2px 2px #444343;
font-size: 20px;
font-weight: bold;
background-color: #fff;
font-family: sans-serif;
width:100%;
background:#F3F3F3;
}
div#MBG-Sub-Box:before {
content: "  \f0e0   Subscribe Us  ";
background: #FFFF00;
font-family: Lobster, FontAwesome;
padding: 20px 10px 20.5px 10px;
position: relative;
overflow: hidden;
z-index: 10;
top: 57px;
right: px;
transition: .3s;
}
div#MBG-Sub-Box .wrap-me {
margin: 0 auto;
display: block;
padding: 30px 20px;
background-color: #404040;
box-shadow: 2px 4px 2px 2px #444444;
border-top: 65px solid #FF0000;
color: #444444;
box-sizing: border-box;
background: #000 url('http://1.bp.blogspot.com/-FzCdLYOA4ms/U1DnVwbvYGI/AAAAAAAAAnY/M-EpS75hQNA/s1600/header_bg1.png' )no-repeat 0px 0px;
padding: 12px 0px 1px 0px;
clear: both;
text-align: center;
display: block;
margin: 10px 0;
height: auto;
}
.MBG-Enter-Email {
color: #444242;
width: 170px;
height: 50px;
background: #fff url(https://lh4.googleusercontent.com/-dPJx9mWYWPw/UtV5aN-6mRI/AAAAAAAAAJs/ibo7iZsN4nw/h120/MAIL.png) no-repeat 15px 22px;
padding: 5px 0px 5px 38px;
border-radius: 2px;
border: 1px solid #000;
margin-top: 22px;
}
.MBG-Button:hover {
background: #FFFF00;
border: 2px solid #FF0000;
}
.MBG-Button {
background: #FF0000;
  font-family: Lobster, FontAwesome;
cursor: pointer;
color: #CAF;
font-weight: bold;
text-shadow: 2px 2px 2px #444343;
border: 2px solid #FFFF00;
border-radius: 2px;
font-size: 30px;
padding: 3px 19px 3px 19px;
}
.MBG-Headline {
text-shadow: 2px 2px 2px #444343;
text-align: center;
color: #CAFFFD;
font-size: 35px;
  font-family: Lobster, FontAwesome;
line-height: 1.5em;
margin-top: 7px;
margin-bottom: 4px;
}
</style>
<div id="MBG-Sub-Box"><div class="wrap-me"><div class="MBG-Headline">Subscribe Us &amp; Get Latest Updates Direct into Your Mailbox!</div><form action="http://feedburner.google.com/fb/a/mailverify" class="MBGEmailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerGuides', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" value="MyBloggerGuides" type="hidden"> <input name="loc" value="en_US" type="hidden"> <input class="MBG-Enter-Email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" required="" value="Enter your email..." type="text"><br><br><input class="MBG-Button" title="" value="Sign Up" type="submit">
</form><div class="clr"><div class="MBG-Credit">
<a href="http://www.mybloggerguides.com/2016/05/add-responsive-subscription-box-blogger-posts.html" target="_blank"> Get Widget</a>
</div></div></div></div>

  • Change Yellow Highlighted colors into your's.
  • Click on Save.
  • That's it. You are done.

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.

Conclusion:

So above guide is about Adding Responsive Subscription Box Above/Footer Blogger Posts V2 and we hope by this guide you can easily implement this sub box to blogger blog. If anyhow problem persist after following all above steps then drop a comment below. Do follow and Subscribe for another attractive Blogger widgets.
Thank you!

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.