Tuesday, 26 May 2015

Sliding Social Follow Us Widget with Counters for Blogger/WordPress

tips4tricx
We have shared a couple of follow us widget previously which most of you loved a lot. But now as time goes we get bored of watching the same thing again and again. So today once again we are coming up with a slick follow us widget 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. Similar to our Sexy Expand on Hover widget, this widget also tempts the reader to click on the button due to the smooth sliding effect possible with CSS3 transitions. So, let’s make your blog look fresh.

Features of Sliding Social Follow Us Widget:

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
The HTML:
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
<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>
Changes to be made:
  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 &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:
  1. Go To Blogger -> Template -> Edit HTML -> Proceed
  1. Search for ]]></b:skin> and just above it paste the following code and Save template
.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;
}
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?
Pretty easy…
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.
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.
Conclusion:
I want to say sorry to you guys for not creating widgets on regular basis but it is just because I am not getting some unique ideas frequently. I would love if you guys give some ideas or what you want learn, etc. I hope you guys like this widget and if you are facing any trouble with this widget, feel free to ask in the comments.
Take Care!!!
Previous Post
Next Post

post written by:

0 Google+:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks