New Way2Blogging Style Social Widget for Blogger

Hello guys, In my previous post I posted Old Way2Blogging style social subscribe widget. Today I'll show you How to add New Way2Blogging style social widget to blogger blogs. This is a professional looking social widget with social followers count. 

How to Install it on Blogger

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

• Go to Blogger > Layout
• Click on 'Add a Gadget'
• Choose HTML/Javascript
• Copy Paste the code given below inside it

<br />

        <ul class="social" style="background-color: white; border: 0px; color: #454545; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font: inherit; line-height: 22px; list-style: none; margin: 10px; overflow: hidden; padding: 0px; vertical-align: baseline;">

        <li class="rssicon" style="background-attachment: scroll; background-color: transparent; background-image: url(); background-position: 0% 6px; background-repeat: no-repeat no-repeat; border: 0px; display: block; font-size: 16px; font-weight: bold; font: inherit; line-height: 32px; list-style: none; margin: 8px 0px 4px; overflow: hidden; padding-bottom: 0px !important; padding-left: 14px; padding-right: 0px !important; padding-top: 0px !important; text-transform: capitalize; vertical-align: baseline;"><a href="http://feeds.feedburner.com/The-Area51" style="-webkit-transition: all 0.15s ease-in; border: 0px; color: #3395bf; display: block; font-size: 16px; font: inherit; margin: 0px; padding: 0px; text-decoration: initial; text-shadow: rgb(254, 254, 254) 0px 1px 0px; vertical-align: baseline;"><span class="icon" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUPsa4b-eCIbDQdD-oEPI8auyQhHbThPz0iGFbJ252qetUwy30SUY9UBGyCN6OKRLzF3TThU0qpyYBEhg7CgFStjofERY-jtvJPJjreYRmluFs_cDhAaWrzLk_hs8TmxoJq0MA29Sf2Yw/s1600/w2bsocials.png); background-position: -33px 0px; background-repeat: no-repeat no-repeat; border: 0px; display: inline-block; float: left; font-size: 16px; font: inherit; height: 32px; margin: 0px 10px 0px 0px; padding: 0px; vertical-align: baseline; width: 33px;">&nbsp;</span>RSS Feed&nbsp;<span class="count" style="border: 0px; color: #aaaaaa; font-size: 11px; font-weight: normal; font: inherit; margin: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">240 READERS</span></a></li>

        <li class="twicon" style="background-attachment: scroll; background-color: transparent; background-image: url(); background-position: 0% 6px; background-repeat: no-repeat no-repeat; border: 0px; display: block; font-size: 16px; font-weight: bold; font: inherit; line-height: 32px; list-style: none; margin: 8px 0px 4px; overflow: hidden; padding-bottom: 0px !important; padding-left: 14px; padding-right: 0px !important; padding-top: 0px !important; text-transform: capitalize; vertical-align: baseline;"><a href="http://twitter.com/jimmieluthra" style="-webkit-transition: all 0.15s ease-in; border: 0px; color: #3395bf; display: block; font-size: 16px; font: inherit; margin: 0px; padding: 0px; text-decoration: initial; text-shadow: rgb(254, 254, 254) 0px 1px 0px; vertical-align: baseline;"><span class="icon" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUPsa4b-eCIbDQdD-oEPI8auyQhHbThPz0iGFbJ252qetUwy30SUY9UBGyCN6OKRLzF3TThU0qpyYBEhg7CgFStjofERY-jtvJPJjreYRmluFs_cDhAaWrzLk_hs8TmxoJq0MA29Sf2Yw/s1600/w2bsocials.png); background-position: 0px 0px; background-repeat: no-repeat no-repeat; border: 0px; display: inline-block; float: left; font-size: 16px; font: inherit; height: 32px; margin: 0px 10px 0px 0px; padding: 0px; vertical-align: baseline; width: 33px;">&nbsp;</span>Twitter&nbsp;<span class="count" style="border: 0px; color: #aaaaaa; font-size: 11px; font-weight: normal; font: inherit; margin: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">160+ FOLLOWERS</span></a></li>

        <li class="fbicon" style="background-attachment: scroll; background-color: transparent; background-image: url(); background-position: 0% 6px; background-repeat: no-repeat no-repeat; border: 0px; display: block; font-size: 16px; font-weight: bold; font: inherit; line-height: 32px; list-style: none; margin: 8px 0px 4px; overflow: hidden; padding-bottom: 0px !important; padding-left: 14px; padding-right: 0px !important; padding-top: 0px !important; text-transform: capitalize; vertical-align: baseline;"><a href="http://facebook.com/thearea51blog" style="-webkit-transition: all 0.15s ease-in; border: 0px; color: #3395bf; display: block; font-size: 16px; font: inherit; margin: 0px; padding: 0px; text-decoration: initial; text-shadow: rgb(254, 254, 254) 0px 1px 0px; vertical-align: baseline;"><span class="icon" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUPsa4b-eCIbDQdD-oEPI8auyQhHbThPz0iGFbJ252qetUwy30SUY9UBGyCN6OKRLzF3TThU0qpyYBEhg7CgFStjofERY-jtvJPJjreYRmluFs_cDhAaWrzLk_hs8TmxoJq0MA29Sf2Yw/s1600/w2bsocials.png); background-position: -99px 0px; background-repeat: no-repeat no-repeat; border: 0px; display: inline-block; float: left; font-size: 16px; font: inherit; height: 32px; margin: 0px 10px 0px 0px; padding: 0px; vertical-align: baseline; width: 33px;">&nbsp;</span>Facebook&nbsp;<span class="count" style="border: 0px; color: #aaaaaa; font-size: 11px; font-weight: normal; font: inherit; margin: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">400+ LIKES</span></a></li>

        <li class="gicon" style="background-attachment: scroll; background-color: transparent; background-image: url(); background-position: 0% 6px; background-repeat: no-repeat no-repeat; border: 0px; display: block; font-size: 16px; font-weight: bold; font: inherit; line-height: 32px; list-style: none; margin: 8px 0px 4px; overflow: hidden; padding-bottom: 0px !important; padding-left: 14px; padding-right: 0px !important; padding-top: 0px !important; text-transform: capitalize; vertical-align: baseline;"><a href="https://plus.google.com/u/0/117521503834739609237" style="-webkit-transition: all 0.15s ease-in; border: 0px; color: #3395bf; display: block; font-size: 16px; font: inherit; margin: 0px; padding: 0px; text-decoration: initial; text-shadow: rgb(254, 254, 254) 0px 1px 0px; vertical-align: baseline;"><span class="icon" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUPsa4b-eCIbDQdD-oEPI8auyQhHbThPz0iGFbJ252qetUwy30SUY9UBGyCN6OKRLzF3TThU0qpyYBEhg7CgFStjofERY-jtvJPJjreYRmluFs_cDhAaWrzLk_hs8TmxoJq0MA29Sf2Yw/s1600/w2bsocials.png); background-position: -66px 0px; background-repeat: no-repeat no-repeat; border: 0px; display: inline-block; float: left; font-size: 16px; font: inherit; height: 32px; margin: 0px 10px 0px 0px; padding: 0px; vertical-align: baseline; width: 33px;">&nbsp;</span>Google +&nbsp;<span class="count" style="border: 0px; color: #aaaaaa; font-size: 11px; font-weight: normal; font: inherit; margin: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">60+ FOLLOWERS</span></a></li>

        </ul>

 

• 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 fan page Username

Replace 117521503834739609237 with your Google+ Profile ID

Change 240 Readers to your Feedburner Subscriber count

Change 160+ Followers to your Twitter Follower count

Change 400+ Likes to your Facebook fan page likes count

Change 60+ Followers to your Google+ Followers count

• Save Widget

Now you've successfully added the widget to your blog. Please share it and don't forget to leave comments below.

Widget Source: Internet