ADD ALL IN ONE FANCY SOCIAL SUBSCRIPTION WIDGET FOR BLOGGER

ADD ALL IN ONE FANCY SOCIAL SUBSCRIPTION WIDGET FOR BLOGGEr

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.