How to add social subscription like box in blogger

When you are providing useful information in your blog, then many times some readers will need to get the latest updates from your blog. For that purpose, you need an social Subscription Form in your blog, so that the interested visitors can easily get the latest updates.

To add social subscription like box to your blogger blog (blogspot) is very easy.This box contains twitter follow me,facebook like button for your facebook page,google+ button and email subscription box.Follow  these steps to add it in your blog.

 
Just follow the next steps:

1. Log in to Blogger, then go to Layout > click on "Add a Gadget" link:

2. From the pop-up window, scroll down and click on the "HTML/JavaScript" gadget:

 3. Paste the following code inside the empty box:

<style type="text/css">
/*<!CDATA[*/
#DBT-mashable{width:265px;margin:auto;padding:0;}
.DBT-googleplus {height: 57px;}
.DBT-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.DBT-gplusone {background-color: #8181F7;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.DBT-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.DBT-twitter {background-color: #8181F7;border: 1px solid #c7dbe2;border-top: 0;}
.DBT-twitter a.twitter-follow-button {display: block;}
.DBT-twitter iframe {margin: 9px 11px;}
.DBT-emailbox {background-color: #8181F7;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.DBT-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.DBT-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.DBT-emailbox input.emailu:focus {color: #333;}
.DBT-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.DBT-emailbox input.submitu:hover {text-decoration: none;}
.DBTYellow{border:1px solid #DBA329;text-shadow:1px 1px 0 #DBA329;background: #dddd2e;background: -moz-linear-gradient(top, #dddd2e 0%, #ffb515 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddd2e), color-stop(100%,#ffb515));background: -webkit-linear-gradient(top, #dddd2e 0%,#ffb515 100%);background: -o-linear-gradient(top, #dddd2e 0%,#ffb515 100%);background: -ms-linear-gradient(top, #dddd2e 0%,#ffb515 100%);background: linear-gradient(top, #dddd2e 0%,#ffb515 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddd2e', endColorstr='#ffb515',GradientType=0 );}
.DBTYellow:hover{background: #eaea3c;background: -moz-linear-gradient(top, #eaea3c 0%, #ffb515 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaea3c), color-stop(100%,#ffb515));background: -webkit-linear-gradient(top, #eaea3c 0%,#ffb515 100%);background: -o-linear-gradient(top, #eaea3c 0%,#ffb515 100%);background: -ms-linear-gradient(top, #eaea3c 0%,#ffb515 100%);background: linear-gradient(top, #eaea3c 0%,#ffb515 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaea3c', endColorstr='#ffb515',GradientType=0 );}.DBT-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.DBT-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>
    <div id="DBT-mashable">
    <div class="DBT-googleplus">
        <script type="text/javascript">
        /*<![CDATA[*/
        window.___gcfg = {lang: 'en'};
        (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>
        <div class="g-plus" data-href="https://plus.google.com/111698402138554597511" data-width="265" data-height="69" data-theme="light"></div>
    </div>
    <div class="DBT-facebook">
        <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpinkusay&amp;send=false&amp;layout=standard&amp;width=245&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:245px; height:66px;" allowtransparency="true"></iframe>
    </div>
    <div class="DBT-gplusone">
        <script type="text/javascript">/*<![CDATA[*/
          (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>
        <div class="g-plusone" data-size="medium" data-href="http://pinkusays.blogspot.in/"></div>
        <span>Recommend on Google</span>
    </div>
    <div class="DBT-twitter">
        <a href="https://twitter.com/pinkusay" class="twitter-follow-button" data-show-count="true">Follow @techinvent</a>
        <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
    </div>
    <div class="DBT-emailbox">
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=pinkusays', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
        <table width="100%">
            <tr>
            <td>
                <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
            </td>
            <td width="64px">
                <input class="submitu DBTYellow" type="submit" value="Subscribe"/>
            </td>
            </tr>
        </table>
        <input name="uri" type="hidden" value="pinkusays"/>
        <input name="loc" type="hidden" value="en_US"/>
        </form>
    </div>
    <div class="DBT-moresubs">
        <a href="http://techinvent.blogspot.in/2012/06/how-to-add-mashable-like-social.html/">Get this Gadget</a>
    </div>
    </div> 

Settings :

Replace highlighted text color with your ID

e.g 
 

• Replace pinkusays with your feed title. It appears at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=pinkusays

• https://twitter.com/pinkusays  with your twitter Id

4. Now Save your widget and check your blog. Enjoy!

Don't Miss These Killer Articles on Facebook:

1.How to Add Facebook Plugins Like Box To Blogger?

2.Easy Trick to enlarge locked profile picture ?

3.How to Add Scrolling Recent Posts Widget For Blogger?