Download Subscription Box Like ShoutMeLoud

6

Hello Friends, In this post, I am going to tell you about how to get 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.

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 = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
    })();
</script>
<style type="text/css">
    /* RB Style sheet for subscription box */
    #rb-subscribe-box .fb-like-box {
        border: 1px solid #EBEBEB;
        padding: 5px;
        background:#fff;
    }
    #rb-subscribe-box .gplusone {
        background: #f7fcfc;
        border: 1px solid #EBEBEB;
        border-top: 1px solid #fff;
        color: #000;
        font-size: 10px;
        line-height: 1px;
        padding:5px;
    }
    #rb-subscribe-box .twitter-follow {
        background: #eef9f9;
        border: 1px solid #dff6f6;
        border-top: 1px solid #fff;
        padding:5px 11px;
    }
    #rb-subscribe-box .email-box {
        background:#e3edf4;
        padding:11px;
    }
    #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 {
        background:#fff;
        float:left;
        color:#92c3c3;
        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 {
        background:#E36B0A;
        border:1px solid #AD5513;
        color:#fff;
        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 {
        background:#FF9b00;
    }
    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;
        width:290px;
        background:#4873A8;
    }
    #rb-text h3 {
        color:white;
        border-bottom: 1px dotted white;
        line-height:1.385em;
        font-size: 18px;
        padding: 0;
        margin: 0 0 10px;
        border-bottom: 1px dotted #AAA;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0;
    }
</style>
<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="http://feedburner.google.com/fb/a/mailverify?uri=techrrival" target="_blank" style="text-decoration:none; font-weight: bold;">Email</a> | <a href="http://feeds.feedburner.com/techrrival" target="_blank" style="text-decoration:none; font-weight: bold;">RSS</a></h4>

                <form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Techrrival', 'popupwindow',
'scrollbars=yes,width=700px,height=700px');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
                    <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" />
                </form>
                <div style="clear:both;"></div>
            </div>
            <div class="fb-like-box">
                <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com/techarrival&amp;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="http://www.facebook.com/techarrival" 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>
            <div class="gplusone">
                <div style="float:left;width:90px;">
                    <g:plusone href="https://www.techrrival.com"></g:plusone>
                </div>
<a href="https://plus.google.com/+Techrrival" 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>
            <div class="twitter-follow">
<a href="https://twitter.com/Techrrival" class="twitter-follow-button">Follow @Techrrival </a>

                <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
            </div>
            <br/>
            <div></div>
        </div>

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.

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