Friday, July 12, 2013

Shout Me Loud Style Subscription Box Widget For Blogger

Author: Gagan Masoun
Shout Me Loud Email Subscription WidgetWe have been provided many amazing widgets and plugins for bloggers. Today I am going share another attractive WordPress like subscription widget for blog. If you need more subscribers then don't worry just add this widget in blog and see the difference in short time. With simple steps you can add it to your blogger blog. So in this short article we will show you how to add this Shout Me Loud Style subscription widget to your blogger blog.

Shout Me Loud Style Subscription Box Widget

Add Shout Me Loud Style Subscription Box Widget

  • Go to Blogger Dashboard.
  • Go to layout >> Add HTML/Javascript Gadget.
  • Now paste the below given code.
<div align='CENTER'class="bd_widget">
<div align="left" id="bd-text"><h3>STAY CONNECTED
<div id="bd-subscribe-box">
<div class="email-box">
<h4>Subscribe FREE updates on your <a href="" target="_blank">Email</a> | <a href="" target="_blank">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="BlogsDaddy" />
<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=450&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=408184442589211" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe>
<a href="" target="_blank" rel="nofollow" style="color: #3B5998; font-family: arial; font-size: 15px; 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="color: #d00; font-family: arial; font-size: 17px; font-weight: bold; line-height: 24px;">Circle us on Google+</a><div class="clear"></div>  
<div class="twitter-follow">
<a href="" class="twitter-follow-button">Follow @BlogsDaddy</a>
<script src="//" type="text/javascript"></script>
<style type="text/css">
/* BD Style sheet for subscription box */
#bd-subscribe-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#fff;}
    #bd-subscribe-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding:5px;}
    #bd-subscribe-box .twitter-follow { background: #eef9f9; border: 1px solid #dff6f6; border-top: 1px solid #fff; padding:5px 11px;}
    #bd-subscribe-box .email-box {background:#e3edf4; padding:11px;}
        #bd-subscribe-box .email-box h4{color: #555;font-family: Arial;font-size: 11px; margin: 0 0 10px;}
        #bd-subscribe-box .email-box .txt,#bd-subscribe-box .email-box .txt:focus{background:#fff; float:left; color:#92c3c3; border:1px solid #E36B0A; border-radius: 3px; padding: 7px 10px 8px; width: 150px;}
        #bd-subscribe-box .email-box .btn,#bd-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: 8px 8px; text-shadow: 1px 1px 0 #D08D00;}
            #bd-subscribe-box .email-box .btn:hover{background:#FF9b00;}
input, textarea {
font-family: Georgia, "Times New Roman", Times; font-size: 1em;}
#bd-text {
border: 1px solid #CCC;
box-shadow: 0 0 5px
line-height: 10px;
margin: 10px 10px 15px 0;
padding: 10px;
#bd-text h3 {
border-bottom: 1px dotted
font-size: 18px;
padding: 0;
margin: 0 0 10px;
border-bottom: 1px dotted
font-wieght: bold;
text-transform: uppercase;
letter-spacing: 0;
  • Now Click On Save Button.

Make These Customization

Now make sure that you changed the red colored user ids with your own.

Recommended:  Facebook Activity Feed Plugin For Blogger

Need Our Help?

If you are interested to attract more people to your blog then you should add these type of widgets to your blog. If you have found any error then contact us via comments below. Please share this widget with your friends also subscribe us for more tutorials and widget. Be Happy and Stay Blessed :)


  1. Hey, I am finding a how to crate subscription box like shout me loud... and find this blog it's really help full to me thanks... i have one more question how did you write Make this Customization & need our help.. i want to create that types of box in my post title.. so, can you please tell me how to create that type of border like shout me loud using write now in their each & every post i want to use this in Blogger

    1. Thanks Pulkit bro to try this widget. Hope you will get positive results from this gadget. Definitely add this or other feedburner email subscription widget in your blog to increase your email subscribers.

      For H1, H2 tags I will share codes soon in my upcoming posts. So, Keep in touch..!!

  2. hello can u provide facebook follow me widget on shoutme loud website. i mean when we go the site a popup comes saying follow harsh on facebook . CSn u provide that