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. 
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 6 comments