UrduBloggingHub | Informatvie Blog About SEO & Blogging: Add All In One Fancy Social Subscription Widget For Blogger

Subscription box is a very popular and mostly widely used widget on all the blogs and websites. Every website on the internet whether it is a wordpress blog , blogger blog or a static html website contains its own social subscription box. This post is about the all in one social subscription box widget for blogger blogs. This subscription box contains almost all major social network integrations in it.This fancy social subscription box appears as;

Why you need social subscription box in your blog ?

Social subscription box contains all the important social network subscription option like Facebook like box, Twitter follow button, Google plus badge etc. Your blog visitors can directly follow you on your social networks by using this widget without even leaving your blog. In this way this widget helps in increasing your subscribers or followers. This increase in the number of the followers also helps in increasing your blog`s referral traffic from social networking websites. It also provide lots of exposure and popularity to your blog. so it is always a good practice to add a good subscription box to your blog.

Features of fancy social subscription box:

1. Compact design which consumes only a little bit space in your blog`s sidebar.
2. Attractive and clean CSS design.
3. All major social network subscription options like facebook, twitter, RSS feeds, email subscription, Google plus badge, Google + recommend and social icons.
4. Lightweight JavaScript and HTML code which do not effect blog`s loading speed.
5. Highly compatible design with almost all major browsers.

Add fancy socialsub scription box to blogger:

1. Copy the code.
2. Login to your blogger dashboard.
3. Select Layout option.
4. In your blogger Layout select Add a gadget option
5. Select HTML/JavaScript widget
6. In the HTML JavaScript widget paste the above code and save the widget

Code for fancy social subscription box:

<style type="text/css">
#wcsub-box
{
box-shadow:1px 1px 4px  #dcdcdc;
-moz-box-box-shadow:1px 1px 4px  #dcdcdc;
-web-kit-box-shadow:1px 1px 4px  #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px  #dcdcdc;
margin-bottom:70px;
height:264px;
}
#wc-socico
{
height:33px;
border-bottom:1px solid #dcdcdc;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
padding:2px;
background:#ffffff;
}
#wc-socicoimg
{
height:28px;
width:28px;
}
#wc-socico table
{
border:none;
}
#wc-rscount
{
margin-top:2px;
margin-right:-25px;
}
#wcsub-box .wcsub-fblike { border-bottom: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; padding: 5px; background:#fff;}
 
    #wcsub-box .twitter-follow { background: #ffffff; border-left: 1px solid #dcdcdc;border-right: 1px solid #dcdcdc; padding:5px 11px;}
    #wcsub-box .wcsub-email {border: 1px solid #dcdcdc; background: #f8f8f8; padding:11px;}
        #wcsub-box .wcsub-email h4{color: #444;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
        #wcsub-box .wcsub-email .txt,#wcsub-box .wcsub-email .txt:focus{background:#fff; float:left; color:#777777; border:1px solid #dcdcdc; border-radius: 3px; padding: 7px 10px 8px; width: 140px;}
        #wcsub-box .wcsub-email .wcsub-button,#wcsub-box .wcsub-email .wcsub-button:focus{background:#222222; border:1px solid #222222; color:#fff; border-radius: 3px; float: right; font-size: 12px; font-weight: bold; padding:7px 3px; }
            #wcsub-box .wcsub-email
input, textarea {
font-family: Georgia, "Times New Roman", Times; font-size: 1em;}
</style>
<div id="wcsub-box">
<div class="wcsub-email">
<h4>Get FREE updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=UrduBloggingHub" target="_blank" style="color:#3b5998;">Email</a> | <a href="http://feeds.feedburner.com/UrduBloggingHub" target="_blank" style="color:orange;">RSS</a></h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=UrduBloggingHub', '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 == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address')
{this.value = '';}" value="Enter your email address" class="txt" />
<input type="hidden" name="uri" value="UrduBloggingHub" />
<input type="hidden" value="en_US" name="loc" />
<input type="submit" value="Subscribe" class="wcsub-button" />
<div style="clear:both;"></div>
</form>
    </div>

<div id="wc-socico">
<table border="0" cellspacing="0" cellpadding="0" width="298">
<tbody>
<tr>
<td valign="top" ><a href='http://feeds.feedburner.com/UrduBloggingHub

' target='_blank' rel=nofollow' ><img id="wc-socicoimg" src="http://3.bp.blogspot.com/-KjMedajdI2w/UTtUCEg5_zI/AAAAAAAABcQ/K3qUhvOTNrA/s1600/feed.png" alt="Subcribe to our RSS feeds" /></a></td>

<td valign="top" ><a href='http://www.facebook.com/UrduBloggingHub

' target='_blank' rel='nofollow'><img id="wc-socicoimg" src="http://2.bp.blogspot.com/-7_3aMhrvLq4/UTtUB9H5ZyI/AAAAAAAABcM/JjZGcP7r3_I/s1600/fbb.png" alt="Join Us on Facebook" /></a></td>

<td valign="top" ><a href='https://plus.google.com/UrduBloggingHub

' target='_blank' rel='nofollow'><img src="http://4.bp.blogspot.com/-vnYX9pKHZCU/UTtUCWa3-HI/AAAAAAAABcU/Xi7l4YF136U/s1600/gpp.png" alt="Add to Circles" id="wc-socicoimg" /></a></td>

<td valign="top" ><a href='https://twitter.com/UrduBloggingHub

' target='_blank' rel='nofollow'><img id="wc-socicoimg" src="http://2.bp.blogspot.com/-VXfOkCT43uI/UTtUEItlzyI/AAAAAAAABck/cvROEjW1Vx8/s1600/tww.png" alt="Follow us on Twitter" /></a></td>

<td valign="top" ><p id="wc-rscount"><a href="http://feeds.feedburner.com/UrduBloggingHub

" rel="nofollow"><img  src="http://feeds.feedburner.com/~fc/

UrduBloggingHub

?bg=222222&fg=ffffff&anim=0" height="26" width="88" style="border:0" alt="" /></a></p></td>

</tr></tbody></table>
</div>

    <div class="wcsub-fblike">
   <iframe src="//www.facebook.com/plugins/like.php? href=https://www.facebook.com/UrduBloggingHub

?fref=ts &send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe><a href=" https://www.facebook.com/

UrduBloggingHub

" target="_blank" rel="nofollow" style="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="twitter-follow">
  <a href="https://twitter.com/UrduBloggingHub

" class="twitter-follow-button">Follow @UrduBloggingHub

</a>

</div>
<div class="wcgplus">
    <div class="g-plus" data-href="https://plus.google.com/UrduBloggingHub

" data-width="290" data-height="131" data-theme="light"></div>

</div>
    </div>

Customization:

• In the above code change all the red colored social network addresses with your own addresses links.

Need Help?

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)