Download Subscription Box Like ShoutMeLoud


Hello Friends, In this post, I am going to tell you about how to get a subscription box like ShoutMeLoud which is used by them for a long time. It is a great subscription box I have ever seen. So I tried to create one similar to that of ShoutMeLoud and luckily I succeeded. So in this post, I am giving you the code of this box so you can boost your blog‘s Subscriptions, Get more likes, +1s and followers. This code will work on any platform supporting JavaScript and HTML. You can also Add Subscription Box To Facebook Page.

“This post may contain affiliate links & we will be compensated if you make a purchase after clicking on our links” [Read More Here]

Download Subscription Box Like ShoutMeLoud

 Download Subscription Box Like ShoutMeLoud

<script type="text/javascript">
    (function() {
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = '';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
<style type="text/css">
    /* RB Style sheet for subscription box */
    #rb-subscribe-box .fb-like-box {
        border: 1px solid #EBEBEB;
        padding: 5px;
    #rb-subscribe-box .gplusone {
        background: #f7fcfc;
        border: 1px solid #EBEBEB;
        border-top: 1px solid #fff;
        color: #000;
        font-size: 10px;
        line-height: 1px;
    #rb-subscribe-box .twitter-follow {
        background: #eef9f9;
        border: 1px solid #dff6f6;
        border-top: 1px solid #fff;
        padding:5px 11px;
    #rb-subscribe-box .email-box {
    #rb-subscribe-box .email-box h4 {
        color: #555;
        font-family: Arial;
        font-size: 12px;
        margin: 0 0 10px;
    #rb-subscribe-box .email-box .txt, #rb-subscribe-box .email-box .txt:focus {
        border:1px solid #E36B0A;
        border-radius: 3px;
        padding: 7px 10px 8px;
        width: 140px;
    #rb-subscribe-box .email-box .btn, #rb-subscribe-box .email-box .btn:focus {
        border:1px solid #AD5513;
        border-radius: 3px;
        float: right;
        font-size: 12px;
        font-weight: bold;
        padding: 7px 8px;
        text-shadow: 1px 1px #D08D00;
    #rb-subscribe-box .email-box .btn:hover {
    input, textarea {
        font-family: Georgia, "Times New Roman", Times;
        font-size: 1em;
    #rb-text {
        box-shadow: 0 0 5px #EEE;
        line-height: 1px;
        margin: 10px 10px 15px;
        padding: 10px;
    #rb-text h3 {
        border-bottom: 1px dotted white;
        font-size: 18px;
        padding: 0;
        margin: 0 0 10px;
        border-bottom: 1px dotted #AAA;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0;
<div class="rb_widget">
    <div id="rb-text">
         <h3>Follow Us</h3>

        <div id="rb-subscribe-box">
            <div class="email-box">
                 <h4><b>Receive FREE updates on your</b> <a href="" target="_blank" style="text-decoration:none; font-weight: bold;">Email</a> | <a href="" target="_blank" style="text-decoration:none; font-weight: bold;">RSS</a></h4>

                <form onsubmit="'', 'popupwindow',
'scrollbars=yes,width=700px,height=700px');return true" target="popupwindow" method="post" action="">
                    <input name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email address&#39;;}" onfocus="if (this.value == &#39;Enter your email address&#39;)
{this.value = &#39;&#39;;}" value="Enter your email address" class="txt" />
                    <input type="hidden" name="uri" value="Techrrival" />
                    <input type="hidden" value="en_US" name="loc" />
                    <input type="submit" value="Subscribe" class="btn" />
                <div style="clear:both;"></div>
            <div class="fb-like-box">
                <iframe src="//;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowtransparency="true"></iframe><a href="" target="_blank" rel="nofollow" style="text-decoration:none; color:#3B5998; font-family:arial ; font-size: 18px; font-weight: bold; line-height: 20px;">Like us on Facebook </a>
                <div class="clear"></div>
            <div class="gplusone">
                <div style="float:left;width:90px;">
                    <g:plusone href=""></g:plusone>
<a href="" target="_blank" rel="nofollow" style="text-decoration:none; color: #d00; font-family: arial; font-size: 18px; font-weight: bold; line-height: 24px;">Join us on Google+</a>
                <div class="clear"></div>
            <div class="twitter-follow">
<a href="" class="twitter-follow-button">Follow @Techrrival </a>

                <script src="//" type="text/javascript"></script>

Copy the above code and place it wherever you wanted it to appear. Just replace the URL of the Subscription, Facebook, Google+ and Twitter from Tech Arrival to yours and now you are done. Just simply paste the code where you wanted it to appear.

Thank you for reading this post and keep connected to Tech Arrival to continue enjoying wonderful posts. Share your views on this post in the comment section below. If you are still having any query throw it in the comment section.

Gearbest Bestsellers

If you find this post helpful, don’t hesitate to share this post on your social network. It will only take a moment and also it is quite easy and helpful for others.


    • I have not tried it practically but according to me users with JavaScript disabled browser cannot see the like, +1 and follow button.

    • Can you please share a screenshot or send us the URL of the page where email subscription box is showing. Connect with me directly on skype @ boricha.mehul5

  1. Hi there – came across your website just now and I wanted to thank you for a very informative article. Sites like yours have been so helpful to me as a newbie webmaster. Thanks for making my work a little easier. You’re the best!


Please enter your comment!
Please enter your name here
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.