Way2Blogging Style Social Subscription Widget for Blogger

Way2Blogging is one of the most popular blogs for blogging tips and gadgets. Today I'm going to share Way2Blogging's social subscription widget for blogger. This widget is developed by Harish from Way2Blogging. This is an awesome widget and very attractive. it doesn't slows your blog loading speed and gives professional look to your blog.

way2blogging style social subscription widget blogger

Advantages

Email Subscription form
Social media buttons; Twitter, Facebook, RSS, Email
Fast Loading
Premium Look

How to Install this widget on Blogger

The Installation process is very simple, Just follow the steps given below carefully.

Go to Blogger > Template
Click on Edit HTML (Backup your template first)
Search for ]]></b:skin> and paste the following code before it.

@import url("http://fonts.googleapis.com/css?family=Oswald&text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");
.w2bOldSocial ul {
    font-family: 'Oswald', sans-serif;
    margin: 15px 0;
    overflow: hidden;
}
.w2bOldSocial ul li {
    float: left;
    width: 90px;
    padding: 0 0 0 55px !important;
    margin: 0 0 0 5px !important;
    line-height: 48px !important;
}
.w2bOldSocial ul li a {
    font-size: 20px !important;
    text-decoration:none;
    padding:0 !important;
    margin:0 !important;
    text-decoration:none;
}
.w2bOldSocial ul li a:hover {
    text-decoration:underline;
}
.w2bOldSocial ul li.w2brss {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj09jx3rmyAIhuzeNma39lYAM4tlBXjMdJEi55STf6YHshfx-bru5c0bO39u-wZsbbV1_zoiz0iQg24TbEOUB9XtWqUJUIJEdcJR2Fym3-EN4qKEJz6tySXl7J-8dIeSrfI8UdLnLL0ILZi/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bmail {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6-iXiimoGi9Gjyb-BVaJRs-Akm63ml-7eMyBq9Q-O0Yj1Ya2h4bJy1Mel9s4s-KsvbsHoxsfA8kaQAzxfuvLnFvplOTKDcn5R4zR02ZXiKQel0EeFsb4aHf7EWrK_2xqVThzuPiyHOjKv/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2btwitter {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijRSr2Qv-qjyfw_u1Kbttyo1tRU3yQzBkNJdbnFGibAXy77atkIU4rfIxQgMVFKR-2Munmg_ik4UEv0rhaRzIvZmkBRGpFZicu6FSn_3AVlzTenVHkA4yeCjwIia2aS_DuTZEAxssQhLSx/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bfacebook {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb8M_-jThqEpI8K6Qdr8xzF0GhjXapKkzzdobTxXP4RfdiNUeZzrzPIoKpGPyEOtU0-NSQAVaBPDrsEzD922FhLmbn0-CV7a3QBXbbFMSL6kaFYE9xydGSi7DImrnH_3XAV5HY01ws5sza/s48/Facebook.png") no-repeat scroll left center transparent !important;
}
#w2bEmailsub {
    display: block;
    clear: both;
    margin: 10px 0;
}
form.w2bEmailform {
    margin: 20px 0 0;
    display: block;
    clear: both;
}
.emailText {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE5A2vhS5hQL6zI_epxZO3odBuwJrVC5XAoWmcVcKZk2jMdDcsg50eMjO_3e49C1BSo1WXbB6I7S3dqG-Wvq3FKkMGvWx5QMcShpY1W766bJxa5lI0dcHO18ksrPgTFDMSWPtYoNfpms5U/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%);
}

Now Save Template and Go back to Dashboard.
Go to Layout > Click on 'Add a Gadget'
Choose HTML/Javascript
Copy Paste the following code inside it

<div class="w2bOldSocial">
    <ul>
        <li class="w2brss"><a href="http://feeds.feedburner.com/The-Area51">RSS</a></li>
        <li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=The-Area51" >Email</a></li>
        <li class="w2btwitter"><a href="http://twitter.com/jimmieluthra">Twitter</a></li>
        <li class="w2bfacebook"><a href="http://facebook.com/thearea51blog">Facebook</a></li>
    </ul>
</div>
<div id="w2bEmailsub">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=The-Area51', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform">
        <input type="hidden" value="The-Area51" 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>

Now make the following changes to the code.

Replace The-Area51 with your Feedburner Username

Replace jimmieluthra with your Twitter Username

Replace thearea51blog with your Facebook Username

Save Widget

Now you've successfully added Way2Blogging Style Social Subscribe Widget to your blog. Please share this post with your friends and don't forget to leave comments.

Source: Way2Blogging.org