Designed by Veethemes.com

SLIDING SOCIAL FOLLOW US WIDGET WITH COUNTERS FOR BLOGGER/WORDPRESS

Sunday, January 27, 2013 by Mohan Singh No Comment
 Download Script   Live Demo

Features of Widget :
  1. Covers the popular social networking buttons along with RSS button
  2. Manual Counters
  3. Smooth Sliding effect on hover
  4. Neat and Clean
  5. Made in Pure CSS
The HTML Code :

We will be adding this widget in sidebar.
  1. Go to Blogger -> Layout
  2. Click Add a Gadget in your sidebar
  3. Select HTML/JavaScript from the list and paste the following code in that gadget
<!--Sliding Social Buttons Widget By Digitalhubinc.com-->
<div class="tbislso">
    <ul>
        <li><a class="tbisbox facebook" href="#"><p>15K+</p>Facebook </a></li>
        <li><a class="tbisbox twitter" href="#"><p>10K+</p>Twitter</a></li>
        <li><a class="tbisbox gplus" href="#"><p>5K+&nbsp;</p>Google+</a></li>
        <li><a class="tbisbox pinterest" href="#"><p>4K+&nbsp;</p>Pinterest</a></li>
        <li><a class="tbisbox rss" href="#"><p>10K+</p>RSS</a></li>
    </ul>
</div>
<!--Sliding Social Buttons Widget By Digitalhubinc.com-->            

How to Change in this HTML Code :
  1. Replace # with your respective social networking URLs
  2. Replace the highlighted numbers with your fans, followers and reader numbers
  3. Make sure that the numbers DO NOT exceed four characters. If your number is less than four characters, then add &nbsp; at the end of the number to make it four characters. See Google+ and Pinterest counter for an example. &nbsp; means a space in HTML.
Make sure that the numbers DO NOT exceed four characters. If your number is less than four characters, then add &nbsp; at the end of the number to make it four characters. See Google+ and Pinterest counter for an example. &nbsp; means a space in HTML.


The CSS Code :
  1. Go To Blogger -> Template -> Edit HTML -> Proceed
  2. Search for ]]></b:skin> and just above it paste the following code and Save template
/* Sliding Social Buttons Widget By Digitalhubinc.com */
.tbisbox {
    font: 25px/24px normal 'Denk One', sans-serif;
    display: inline-block;
    position: relative;
    width: 95%;
    max-width: 280px;
    margin: 0 auto 15px auto;
    padding: 16px;
    background-color: rgba(238, 238, 238, 0.1);
    box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.tbislso {
    width: 95%;
    max-width: 280px;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
}

.tbislso a {
    text-decoration: none !important;
}

.tbislso ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbislso ul li {
    display: inline;
    margin: 0;
    padding: 0;
    text-indent: 0
}

.tbislso ul li a.facebook {
    border-left: 65px solid rgba(59, 89, 152, 1);
    color: rgba(59, 89, 152, 1);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.tbislso ul li a.facebook p {
    margin: 2px 20px 0 -70px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.tbislso ul li a.facebook:hover {
    background: rgba(59, 89, 152, 1);
    border-left: 0px solid rgba(59, 89, 152, 0.1);
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.tbislso ul li a.facebook:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}

.tbislso ul li a.twitter {
    border-left: 65px solid rgba(64, 153, 255, 1);
    color: rgba(64, 153, 255, 1);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.tbislso ul li a.twitter p {
    margin: 2px 20px 0 -70px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.tbislso ul li a.twitter:hover {
    background: rgba(64, 153, 255, 1);
    border-left: 0px solid rgba(64, 153, 255, 1);
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.tbislso ul li a.twitter:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}

.tbislso ul li a.gplus {
    border-left: 65px solid rgba(219, 74, 57, 1);
    color: rgba(219, 74, 57, 1);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.tbislso ul li a.gplus p {
    margin: 2px 20px 0 -70px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.tbislso ul li a.gplus:hover {
    background: rgba(219, 74, 57, 1);
    border-left: 0px solid rgba(219, 74, 57, 1);
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.tbislso ul li a.gplus:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}

.tbislso ul li a.pinterest {
    border-left: 65px solid rgba(174, 45, 39, 1);
    color: rgba(174, 45, 39, 1);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.tbislso ul li a.pinterest p {
    margin: 2px 20px 0 -70px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.tbislso ul li a.pinterest:hover {
    background: rgba(174, 45, 39, 1);
    border-left: 0px solid rgba(174, 45, 39, 1);
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.tbislso ul li a.pinterest:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}

.tbislso ul li a.rss {
    border-left: 65px solid rgba(255, 102, 0, 1);
    color: rgba(255, 102, 0, 1);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.tbislso ul li a.rss p {
    margin: 2px 20px 0 -70px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.tbislso ul li a.rss:hover {
    background: rgba(255, 102, 0, 1);
    border-left: 0px solid rgba(255, 102, 0, 1);
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.tbislso ul li a.rss:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
/* Sliding Social Buttons Widget By Digitalhubinc.com */

For changing the box-shadow color replace rgba(0, 0, 0, 0.1) with your desired color.
No other changes are required. If you need to do some more changes, then let us know.

We have used a Google font named Denk One in this widget. So, if you don't know how to use Google fonts or want to use some other Google font, then just follow our tutorial on using Google Fonts.

How to Install in WordPress? :

The HTML:
  1. Go to Dashboard
  2. Appearance -> Widgets
  3. Drag a Text widget in your sidebar or wherever you want the widget to appear
  4. Put the title and paste the HTML code provided above in the big text box and click Save.

The CSS:
  1. Go to Dashboard
  2. Appearance -> Editor
  3. Your style.css (Stylesheet) will already be open. If not, then you can find it in the bottom right sidebar
  4. Scroll right at the end of the sheet and paste the CSS code provided above and click Update File.
End.

Credits :

The buttons were actually made by Ronalds Vilciņš but they were just a static box button which didn't give us much pleasure in terms of attractiveness. The transitions, the counters and the hiding of counters when hovered and all happening things has been done by us to make it look more attractive and pleasing on the eyes and to give an extra bit of temptation for the readers to click on the button.



Mohan Singh

SUBSCRIBE

Subscribe now to get notified about exclusive offers from Us every Weeks!