Social Follow Us Slider widget for blogger and wordpress

This is my first post on blogger widgets and I hope all of you will like it.This widget is made in pure CSS. This widget has manual counters with a smooth slide-in-out effect. The widget comes with the most used social networking sites along with an RSS button. The widget won't need any customization. The only thing you may need to change would be the box shadow color which is pretty easy. The widget will perfectly fit in a sidebar increasing your fans, followers and readers. 

Features

• Here is just a short list of features:

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

For Bloggers:

• 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 widgets by probloggers-tricks.blogspot.in-->  <div class="tbislso"> <ul> <li><a class="tbislbox" href="#"><p>15k+<p/>Facebook </a></li> <li><a class="tbislbox" href="#"><p>10k+<p/>Twitter </a></li> <li><a class="tbislbox" href="#"><p>5k+&nbsp;<p/>Google </a</li> <li><a class="tbislbox" href="#"><p>4k+&nbsp;<p/>Pinterest </a></li> <li><a class="tbislbox" href="#"><p>10k+<p/>RSS </a></li> </ul> </div> <!--Sliding Social widgets by probloggers-tricks.blogspot.in-->

1. Replace # with your respective social networking URLs
2. Replace the highlighted numbers with your fans, followers and reader numbers

Make sure that the numbers DO NOT exceed four characters. If your number is less than four characters, then add   at the end of the number to make it four characters. See Google+ and Pinterest counter for an example.   means a space in HTML.

• 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 Probloggers-tricks.blogspot.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 Probloggers-tricks.blogspot.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.

For Wordpress:

• HTML Code:
  

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.

• CSS Code:
  

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.

That's all :)

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.

Blogger Plugins, Social Widgets, Widgets