Social Subscription Widget for Blogger

Rate this Post:

{[['

']]}

Here is the great Social Subscription widget for blogger. You can see the Preview in the left side of the post. I will guide you how to install it through step by instructions.

There are two simple steps how to install it;
1. Adding the CSS Code
2. Adding Widget code to sidebar

Adding CSS

1. Go to template and edit html and click proceed
2. Click on expand widget
3. Now add this code before ]]></b:skin>

    @import url("http://fonts.googleapis.com/css?family=Oswald&text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");
    .blogproSocial ul {
        font-family: 'Oswald', sans-serif;
        margin: 15px 0;
        overflow: hidden;
    }
    .blogproSocial ul li {
        float: left;
        width: 90px;
        padding: 0 0 0 55px !important;
        margin: 0 0 0 5px !important;
        line-height: 48px !important;
    }
    .blogproSocial ul li a {
        font-size: 20px !important;
        text-decoration:none;
        padding:0 !important;
        margin:0 !important;
        text-decoration:none;
    }
    .blogproSocial ul li a:hover {
        text-decoration:underline;
    }
    .blogproSocial ul li.blogprorss {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ-RUp6yv7cU0Z9nyUM2zlOqObY48ESQOYLp7P2zlHIb8raXWcWU3xWLJZMMnBO2aPxxpr3J32K_Mk-GoMx8EDIyc1aJ8sgBc6yQcVLFaA9O6742g_GFFgCbZUpQu3Knix8eByEPg2njIG/s48/RSS.png") no-repeat scroll left center transparent !important;
    }
    .blogproSocial ul li.blogpromail {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpzSf1GYcn7eCMZPEQYwz7V4mfdANG2tWTOpQ3eEYZ-xb9FyhqXA0XNQtDTGz6H0Gv5ewOhbvuyqEk5wzt87L377Lkj5_MxXs4KFBa9vH81XM2fiOt2f7aIT9UX4sBjWTp6tLNGfJTX2Qk/s48/Mail.png") no-repeat scroll left center transparent !important;
    }
    .blogproSocial ul li.blogprotwitter {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZIItDXl3kCZJZ6B_H5XGY2mV6qmY-WvByDglNm80lacT3RvPbDIMLUIJWEon8VGyH5xSYY8DooL_EhIwa2HhOM5KcEceCjsOxVSMOX5m1pUNJmpC-s6_eDnXUiHWlG_qdjsrdIn9EiFY/s48/Twitter2.png") no-repeat scroll left center transparent !important;
    }
    .blogproSocial ul li.blogprofacebook {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioxr_7PuT2D7m9O7Nd3kQ4T2jh2I1QE4_N0NTlFskcdfE2FVoMwPzIumHblL9cLJGz7w3zsEt_xIe3CO4CivFF70gdOU3k-fcwXt_1R4yBOPZhyphenhyphenIQiJk0D6LSCaHxe8MvbFkMBaV9pWH_g/s48/Facebook.png") no-repeat scroll left center transparent !important;
    }
    #blogproEmailsub {
        display: block;
        clear: both;
        margin: 10px 0;
    }
    form.blogproEmailform {
        margin: 20px 0 0;
        display: block;
        clear: both;
    }
    .emailText {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtA8yWjNe1BNhDsxUVE5rYVyVtWYGhQEOvAl9OQ9NBefwlkrwh_JyYIIH1_0GATNgdMLK5-c9Ph4DaDaxi_YzDrKljRoy9y9ziPuCFZkQ2Po5RM_-ouqQfGlSz4MXTle5RTI8qS0ecCNDR/s28/w2b-mail.png") no-repeat scroll 4px center transparent;
        padding: 7px 15px 7px 35px;
        color: #444;
        font-weight: bold;
        text-decoration: none;
        border: 1px solid #D3D3D3;

        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;

        -webkit-box-shadow: 1px 1px 2px #CCC inset;
        -moz-box-shadow: 1px 1px 2px #CCC inset;
        box-shadow: 1px 1px 2px #CCC inset;
    }
    .emailButton {
        color: #444;
        font-weight: bold;
        text-decoration: none;
        padding: 6px 15px;
        border: 1px solid #D3D3D3;
        cursor: pointer;

        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;

        background: #fbfbfb;
        background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
        background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
        background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
        background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
        background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    }

Adding Widget Code

1. Go to Layout and choose Add Gadget in the sidebar
2. Choose HTML/JavaScript and paste this code;

<div class="blogproOldSocial">
<ul>
            <li class="blogprorss"><a href="http://feeds.feedburner.com/Your address Here">RSS</a></li>
            <li class="blogpromail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=Your address Here" >Email</a></li>
            <li class="blogprotwitter"><a href="http://twitter.com/Your address Here">Twitter</a></li>
            <li class="blogprofacebook"><a href="http://facebook.com/Your address Here">Facebook</a></li>
</ul>
</div>

<div id="blogproEmailsub">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your address Here', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="blogproEmailform">
            <input type="hidden" value="Blogpro" name="uri" />
            <input type="hidden" name="loc" value="en_US" />
            <input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailText" />
            <input type="submit" class="emailButton" value="SignUp" title='' />
</form>
</div>

Important
After adding widget change the URL's with your ones.

Change Your address Here with your FeedBurner, Google+, Twitter and Facebook Addresses.

If you find any problem while adding this widget, Please leave you comment