Add Responsive Subscription Box Above/Footer Blogger Posts

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 the 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 an 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 the past, we published Responsive Subscription Box Above/Footer Blogger Posts V1, and now we are going to release 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

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 believe we can also use this widget on the above or footer of Blogger posts.

Subscription box widget is must having widget on the 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 quickly, 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 to 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, the second one is the 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=”https://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=”https://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 yours.
  • Click on Save.
  • That’s it. You are done.

Conclusion:

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

Paramjot Singh
 

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I’m blogging since 2 years, and here on My Blogger Guides, I’m sharing my little mind knowledge which I learned in these past two years. :)

Click Here to Leave a Comment Below 2 comments
ABHISHEK GHOSH - March 23, 2017

i am unable to use it in my blogger website …. its gives error in line

Reply
    Paramjot Singh - March 26, 2017

    Hello, Abhishek. I have updated the code. Please try it once again. 🙂
    Thanks for telling the issue. Keep visiting.

    Reply

Leave a Reply:

0 Shares
+1
Pin
Tweet
Stumble
Share
Share