• Translate

12/04/2015

How to Make a Widget Subscribe Box Responsive

Tutorial Blogspot |

Advertisement

How to Make a Widget Subscribe Box Responsive on The Blog | Subscribe box or subscription box is a widget that blog visitors can get the latest updates from our blog by registering their email to which form contained in the widget. After subscribing, visitors will be sent an email when there is the latest posts from our blog. Subscribtion box can create a backlink from each email subscribers, this automatically can also improve seo blog.

How to Make a Widget Subscribe Box Responsive

Here's how to create a subscribe box responsive on the blog.
Subscribe CSS Box
  • Log in to your Blogger account.
  • Click the template on the dashboard.
  • Then click Edit HTML .
    Copy and paste one of the following CSS subscribe box right above the code ]]>< / b : skin>.

Subscribe Box Style 1
.subscribe-box{border:1px solid #eee;border-radius:4px;color:#fff;background:#eee;font-size:12px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:none;font-weight:500}form.subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}.subscribe-box-email-field{outline:none;background:#fff url(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) no-repeat 1px -27px;color:#444;margin:0 0 15px;padding:12px 40px;width:100%;border:none}.subscribe-box-email-button{outline:none;background-color:#ff5848;background-image:-webkit-linear-gradient(top,#ff5848,#FC3D2B);color:#fff;cursor:pointer;font-weight:700;padding:10px;text-transform:none;width:100%;border:none;font-size:16px}
Subscribe Box Style 2
.subscribe-box{border-radius:4px;color:#fff; background:#00aa9f ; font-size:12px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:none;font-weight:500}form.subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}.subscribe-box-email-field{outline:none;background:#fff url(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) no-repeat 1px -27px;color:#444;margin:0 0 15px;padding:12px 40px;width:100%;border:none}.subscribe-box-email-button{outline:none;background-color: #333; background-image: -webkit-linear-gradient(top,#333,#323);color:#fff;cursor:pointer;font-weight:700;padding:10px;text-transform:none;width:100%;border:0;font-size:16px}
Subscribe Box Style 3
.subscribe-box{border-radius:4px;color:#fff; background:#eee; font-size:12px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:none;font-weight:500}form.subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}.subscribe-box-email-field{outline:none;background:#fff url(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) no-repeat 1px -27px;color:#444;margin:0 0 15px;padding:12px 40px;width:100%;border:none}.subscribe-box-email-button{outline:none;background-color: #4d90fe; background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);color:#fff;cursor:pointer;font-weight:700;padding:10px;text-transform:none;width:100%;border:none;font-size:16px}

There are many options where the most effective position laying or installing subscribe box that can be reached by visitors to the blog like blog sidebar, below the post or make subscribe popup box.

How to Install a Subscribe Box In Sidebar
  • Log in to your Blogger account .
  • Click on the dashboard layout .
  • Then add the element / add gadget and select HTML / Javascript .
  • Copy and paste the html below.
 <div class='subscribe-box'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=infoalltutorials' class='subscribe-box-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=infoalltutorials&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='infoalltutorials'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-box-email-field' name='email' placeholder='Enter your email address '/><input class='subscribe-box-email-button' title='' type='submit' value='Subscribe Now !'/></form>
</div>
  • Please replace the text that is colored with the address of your Feedburner RSS. 
  • Click save.

How to Install a Subscribe Box Under Postings
  • Log in to your Blogger account buddy.
  • Click the template on the dashboard.
  • Then click Edit HTML.
  • Copy and paste one of the CSS subscribe box above was just below the code <div class ="post-footer-line post-footer-line-1'>.
  • Then click save.
Finally, a tutorial on how to create a subscribe box or how to create responsive subscription box on the blog. Hopefully this tutorial can be useful for all of us and can multiply the number of subscribers to your blog. Do not forget to like or share.

Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box