Below Post Responsive Subscription Box For Blogger

Are you searching for Below Post Responsive Subscription Box Widget for Your Blogger Blog, then you are on right platform because today we are going to share a responsive subscription box widget for Blogger Blog. You have to read below tutorial for adding this cool looking Responsive below post subscription box widget toy your blogger blog.

Below Post Responsive Subscription Box Widget For Blogger
Responsive Subscription Box Widget
Now Days every person in this world is using in their gadget like mobile, laptop. PC, and the biggest source is for getting free traffic to a blog is social networking sites. If we getting huge traffic to our blog then it is a good signal for our blog, Because it can improve our Alexa Rank and Google Rank also. For getting traffic from social sites we must have to huge followers. So today we are here with responsive subscription box widget for your blog. When a reader subscribed you then he / she get free tutorials direct to their mail box when you publish a new blog post.

How To Add Responsive Subscription Box Widget To Blogger

So if you are interested in adding this responsive subscription box widget to your each post footer then read complete guide below.
  • Go to Blogger Dashboard.
  • Now Go To Template. >> Edit HTML.
  • Now search for ]]></b:skin> tag and paste below code just above of this tag.

/*********************************************
Below Post Sub Box CSS By MyBloggerGuides.com
**********************************************/
#mbg-blogger-sbox-below-post { padding: 0; margin: 0; width: 100%; height: auto; border-radius: 1px; border: 0; display: inline-block; background: #FF5D5D; } #mbg-blogger-sbox-below-post p { font-family: “Oswald”, sans-serif; font-size: 19px; color: #FFFFFF; line-height: 30px; text-align: center; font-weight: normal; padding: 15px 0px 0px; margin: 0px 0px 25px 0px; text-transform: capitalize; } #mbg-blogger-sbox-below-post .fa { color: #FFF; font-family: FontAwesome; font-size: 25px; margin-right: 10px; } #mbg-blogger-sbox-below-post .rssform { padding: 0px 0px; margin: 30px auto 30px; display: block; width: 300px; } #mbg-blogger-sbox-below-post .rssform input { text-align: center; padding: 8px; color: #000; font-size: 13px; border-radius: 1px; font-family: Oswald; font-weight: normal; width: 100%; height: 45px!important; line-height: 1.5em; overflow: hidden!important; text-transform: capitalize; outline: none!important; display: block; background-color: #FFF4F4; border: 1px solid rgb(255, 80, 80); box-sizing: border-box!important; } #mbg-blogger-sbox-below-post .rssform .button { background: #000000; color: #FFFFFF; border: 1px solid #FF2727; margin-top: 15px; border-radius: 1px; outline: none!important; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; padding: 4px!important; float: none; font-family: “Oswald”,sans-serif; font-size: 17px; font-weight: normal; cursor: pointer; } #mbg-blogger-sbox-below-post .rssform .button:hover { background: #3A3939; }

  • Now Search For <div class=’post-footer-line post-footer-line-3′> tag and paste below code just after of this tag. 

<b:if cond=’data:blog.pageType == &quot;item&quot;’> <div id=’mbg-blogger-sbox-below-post’ oncontextmenu=’return false’>
<p><i class=’fa fa-envelope’/> Stay connected, You&#39;ll not be disappointed!</p>
<div class=’rssform’>
<form action=’http://feedburner.google.com/fb/a/mailverify’ method=’post’ onsubmit=’window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerGuides&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true’ target=’popupwindow’>
<input name=’email’ placeholder=’Enter your email address…’ type=’text’/>
<input name=’uri’ type=’hidden’ value=’MyBloggerGuides‘/>
<input name=’loc’ type=’hidden’ value=’en_US’/>
<input class=’button’ type=’submit’ value=’Join!’/>
</form>
</div>
</div></b:if>

  • Now change MyBloggerGuides and This Color Text into your’s.
  • Save Template.
  • That’s it. You have added responsive subscription box widget to each post’s footer of your blogger blog.

Conclusion:

So above guide is about How To Add Below Post Responsive Subscription Box To Blogger Blog. hope this guide help you to install this responsive subscription box widget into your blogger blog. If it did not appear on your blog properly after following all steps correctly then please let us know.We’ll personally help you out of sure. Also give us Feedback for design and responsiveness of this subscription box widget by dropping a comment below. Don’t forget to share on Blogging communities and with your Blogger Friends. 
PJ S.
 

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 for 2 years, and here on My Blogger Guides, I'm sharing my what I learned in these past two years. :)

Click Here to Leave a Comment Below 6 comments
Sumair Hisbani - November 21, 2016

Not working for me. I am using bmag template and this line is not available. It only has and Tried on second line but it didn't worked. Kindly help me.

Reply
Paramjot Singh - November 21, 2016

Hello @Sumair Hisbani , Nice to see you here buddy.

Find tag and paste HTML part of below post subscribe box just above/below of it.

Note: Maybe, You'll find tag more than one time so paste HTML code above/below of second or third appearance.

Hope it will work for you and in case not work then please mail me your template.

Reply
Sumair Hisbani - November 22, 2016

Thank you so much Anmol bhai, for your help. It's working fine now. Great widget, thanks for sharing.

– Sumair

Reply
Paramjot Singh - November 22, 2016

Happy to help you. Stay in touch brother. <3

Reply
ABHISHEK GHOSH - March 24, 2017

I have added this subscription box widget but it shows in front page also…. basically i used Jump break & page break in all posts in blogger. i want it only shows below posts……

Reply
    PJ S. - March 26, 2017

    Hello Abhishek, Make sure that you’re not doing any mistake because I just checked the code and tested it on my blog and find it working.

    Follow all the steps that I’ve mentioned above.
    Thank You. 🙂

    Reply

Leave a Reply: