Stylish Social Subscription Widget for Blogger

After successful release of our recent widgets like Social Bookmarking Gadget with spinning effectand Subscriber Icons Widget For Blogger. Today we are hear to release another cool widget for Blogger platform. As we all know that social media is the strength of every blog now it is almost compulsory to use social media power to drive traffic to your blog. There are many social media widgets available for blogger platforms. There are sub categories in social media widgets like Bookmarking widgets and subscribers widgets.

Why to use Stylish Social Subscription Widget for Blogger?

Both bookmarking and subscriber widgets are important but from my point of view Subscriber widgets are far more important than bookmarking gadgets. Subscriber widgets helps you to increase your readership but in contrast bookmarking gadget helps you only when someone likes your article and bookmark it on its social media profile.

Many decorated and fancy subscriber widgets are available So instead of creating a decorated widget with effects I decided to create a simple but stylish subscriber widget for our readers that can help to catch most of the visitors.

How to Add Stylish Social Subscription Widget for Blogger

Note: Remember to backup your template.

1. Go to Blogger dashboard >> Template >> Edit HTML.

2. Now search ]]></b:skin> and add the following code above ]]></b:skin>.

@import url("http://fonts.googleapis.com/css?family=Oswald&amp;text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");
.w2bOldSocial ul {
    font-family: 'Oswald', sans-serif;
    margin: 15px 0;
    overflow: hidden;
}
.bloggiksOldSocial ul li {
    float: left;
    width: 90px;
    padding: 0 0 0 55px !important;
    margin: 0 0 0 5px !important;
    line-height: 48px !important;
}
.bloggiksOldSocial ul li a {
    font-size: 20px !important;
    text-decoration:none;
    padding:0 !important;
    margin:0 !important;
    text-decoration:none;
}
.bloggiksOldSocial ul li a:hover {
    text-decoration:underline;
}
.bloggiksOldSocial ul li.bloggiksrss {
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKZ9AFxYCj3WpL4iZWBKheWivcHCawuaSaOu4rAxG3TTVHhlzVHfFoH5XAmTzjp4lgqURYgzwoVseEvlyToGi9GYkNR6ddh_tPKCYfyTJk1HkkPEVqq0vSwdXEBEwjt0LMQFiWbjki6W_o/h120/1ss.png")no-repeat scroll left center transparent !important;
}
.bloggiksOldSocial ul li.bloggiksmail {
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDs9KVK6dsFZ-4At9fWL5GgMHwFknfONY8pEsoJ4n8lQ12vkjBYJC-cjMR0nAncYaGZCZnS9VZ7DWW6khHNKjrxd0ZLIFg7hz7J7w8MIfymIKwaA6kyEXRyxd1AZRd21kDKoSTS3hKsjUK/h120/1email.png")no-repeat scroll left center transparent !important;
}
.bloggiksOldSocial ul li.bloggikstwitter {
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwBgYkdSzYScahV_tvH-VgcJ87pW8C2_bHRmgoNOPDFq-V-vjdSRm-YF8Ps35YtC_OKx0QJ8-uPXLVGeOmHbvUTdRQlZ1VfN-IQ2_1JgaovXpcrXDrv_rey1GupTSzF8mm3Gk42EDHhA3s/h120/1twitter.png") no-repeat scroll left center transparent !important;
}
.bloggiksOldSocial ul li.bloggiksfacebook {
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix8NOFR0m1ikADtX_J187tSNHGd4G9SmcT_9_4j4jKirTPFQmy4T56d-N0Yy1UpDc5sK6npXKikaQfgzP9Ae4RCUiwNp6vRKJ0eM8v1jO5KrSfQ4XcN4VuLiJsT-adVevSY_kdBsRvt8ow/h120/1facebook.png") no-repeat scroll leftcenter transparent !important;
}
#bloggiksEmailsub {
    display: block;
    clear: both;
    margin: 10px 0;
}
form.bloggiksEmailform {
    margin: 20px 0 0;
    display: block;
    clear: both;
}
.emailText {
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxaAwWh7Wj70oeCsKJRkxxFUIzc68XCDpduP3VEEMdYJpERs9vAeiUqlD3VARwDFwo6bcWM2MAhBrqXZMQEndsXIZFWAui9RQjQh299x2eWYTT2TiKjAZ7Qq3k_l6CmK5WHx9_R8q28XRS/h120/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, #fbfbfb0%,#f4f4f4 100%);
    background: -o-linear-gradient(top, #fbfbfb0%,#f4f4f4 100%);
    background: -ms-linear-gradient(top, #fbfbfb0%,#f4f4f4 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FBFBFB',endColorstr='#F4F4F4',GradientType=0 );
    background: linear-gradient(top, #fbfbfb0%,#f4f4f4 100%);

3. Now save your template

4. Now go to Layout >> Add a gadget >> HTML/Javascript.

5. Add the following code in HTML/Javascript box.

<div class="bloggiksOldSocial">
    <ul>
        <li class="bloggiksrss"><ahref="http://feeds.feedburner.com/chsaqlain">RSS</a></li>
        <li class="bloggiksmail"><ahref="http://feedburner.google.com/fb/a/mailverify?uri=chsaqlain" >Email</a></li>
        <li class="bloggikstwitter"><ahref="http://twitter.com/chsaqlain">Twitter</a></li>
        <li class="bloggiksfacebook"><ahref="http://facebook.com/chsaqlain">Facebook</a></li>
    </ul>
</div>
<div id="bloggiksEmailsub">
    <formaction="http://feedburner.google.com/fb/a/mailverify"method="post" target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=chsaqlain', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"class="bloggiksEmailform">
        <input type="hidden" value="bloggiks"name="uri" />
        <input type="hidden" name="loc" value="en_US"/>
        <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..."name="email" class="emailText" />
        <input type="submit" class="emailButton"value="SignUp" title='' />
    </form>
</div>

6. Now change the highlighted code with your information and then click on save. That's all.

Get paid to share your links!