Add All-in-One Social Media Subscription Widget in Blogger Blog

Social Media is a big power now a days in every field. Every Webmaster wants to engage more and more people from Social Network sites to their blogs. I already shared many Social Media widgets for blogger but today I am sharing an amazing and beautiful mega social subscribe box widget for blogger. I contains rotating social media buttons, google plus profile badges, and feedburner subscribe box. So today I am writing article about Adding All in One Social Media Subscription Widget in Blogger Blog.

Recommended:  How to Add Email Subscription Box Below Every Post In Blogger

(See Demo Image Here)

How to Add Social Subscribe Box Widget in Blogger?

STEP-1: Login to "Blogger Dashboard".

STEP-2: Go to "Layout" tab.

STEP-3: Click on "Add a Gadget" option.

STEP-4: Then select "HTML/Javascript" widget.

STEP-5: Paste the Following code inside it.

STEP-6: Then click on "Save" button and Enjoy!

<style>
.bbt-All-In-1-email-field {
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBcdP8jtgvGDVmmmexBjpXt5ptx5LNaDUeK6yh3okdVeE5MfhiWLetB8_v1K-RpOpAfpKtTci8cGzywrjvV_vj_RwJFdUS98w2nerOwx0eMT-0IDlIoQExVGFdLK0-td2sQ3p7a_2UpTVz/s1600/sprites.png) no-repeat 0 -28px;
    width: 238px;
    float: left;
    color: #777;
    margin: 7px 0 7px 0;
    padding: 10px 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
     
}
.bbt-All-In-1-email-button {
    background: #3C8CD6;
    width: 300px;
    float: left;
    color: #fff;
    font-family: 'Verdana, Arial;
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    text-transform: small-caps;
 
}
.bbt-All-In-1-email-button:hover {
    background: #303030;
}
</style>
<style>
#wc-wplike
{
background:#ffffff;
border:1px solid #dcdcdc;
padding:5px;
box-shadow:1px 1px 4px  #dcdcdc;
-moz-box-shadow:1px 1px 4px  #dcdcdc;
-web-kit-box-shadow:1px 1px 4px  #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px  #dcdcdc;A
width:285px;
}
#wc-wplike td
{
font:16px georgia;
text-align:center;
color:#444444;
}
#wc-wplike img{
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#wc-wplike img:hover{
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#first-img,#sec-img
{
border-right:1px solid #dcdcdc;
}
</style>
<div id="wc-wplike">
<table border="0" cellspacing="0" cellpadding="1" width="298">
<tbody>
<tr>
<td id='first-img' valign="top" width="74"><a href='http://www.facebook.com/Bollywood.HD.Songs' target='_blank' rel="nofollow">
<img border="0" src="http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png"  /></a></td>
<td id='sec-img' valign="top" width="74"><a href='https://twitter.com/ItsGhani' target='_blank'  rel="nofollow">
<img border="0" src="http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png" /></a></td>
<td valign="top" width="74"><a href='http://feeds.feedburner.com/best-blogger-tricks' target='_blank' rel="nofollow">
<img border="0" src="http://2.bp.blogspot.com/-IXJ5WpaZllc/UiIRkBdgE0I/AAAAAAAACUQ/H41RlpEwkSU/s1600/rss.png" /></a></td>
<tr>
<td valign="top" width="74">11K</td>
<td valign="top" width="74">500+</td>
<td valign="top" width="74">900+</td>
</tr>
<tr>
<td valign="top" width="74">Fans</td>
<td valign="top" width="74">Followers</td>
<td valign="top" width="74">Subscribers</td>
</tr></tr></tbody></table>
</div>
<!-- Google plus Badge Start-->
<div style='background: #FFFFFF; float: left; margin: 10px 0 10px 0px;'>
<div class="g-person" data-width="300" data-height="70" data-href="//plus.google.com/+MuhammadUsmanGhani" data-layout="landscape" data-rel="author"></div>
</div>
<!-- Google plus Badge end-->
<div class="g-page" data-width="300" data-height="70" data-href="https://plus.google.com/103212000841287795878" data-layout="landscape"></div>
<!-- Email Subscription Start-->
<center>
<div class="bbt-All-In-1-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=best-blogger-tricks" class="bbt-All-In-1-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=best-blogger-tricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="best-blogger-tricks" /><input name="loc" type="hidden" value="en_US" /><input class="bbt-All-In-1-email-field" name="email" autocomplete="off" 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"/><input class="bbt-All-In-1-email-button" title="" type="submit" value="Subscribe Now !" /></form></div>
</center>
<!-- Email Subscription End-->

Customizations:

• Replace Bollywood.HD.Songs with your Facebook Page Username.
• Replace ItsGhani with your Twitter Page Username.
• Replace +MuhammadUsmanGhani with your Google Plus Username.
• Replace 103212000841287795878 with your Google Plus Page Username.
• Replace All best-blogger-tricks with your Feedburner Username.

Congratulations: You have successfully added Mega All-in-One Social Media Subscription Widget in your Blog. If you need more help or having any question in your mind. Feel free to comment below!

Allah Hafiz till next post.