Sliding Social Widget With Couters on Blogger

Posted by Editorial Team on 1/20/2013 File Under , , ,
Share it Please
0

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 yet another 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:

  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

How to Add Sliding Social Widget with counters on blogger?


  • Go To Blogger Dashboard > Design > Edit HTML > Expand Widget Templates (For New Interface Templates > Edit HTML) 
  • Find  Ctrl   +   F  for the code below
]]></b:skin>
  •  Just above that paste the following code.
/* Sliding Social Buttons Widget  */
.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  */ 
For changing the box-shadow color replace rgba(0, 0, 0, 0.1) with your desired color. 
  • Now go to Blogger Dashboard > Layout
  • Click on Add a Gadget (below header)
  • Select HTML/JavaScript
  • Copy below code and paste inside it.
<!--Sliding Social Buttons Widget --><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 -->
  • Replace # with your respective social networking URLs
  • Replace the highlighted numbers with your fans, followers and reader numbers. 


I hope you like this beautiful social widget for blogger, If you still have any problem please share it by using a comment, Thanks.

    Share it Please

    0 comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)

    Copyright @ 2013 Black Sakura : heaven of blogging. Designed by Digitalhubinc