Smooth Sliding Social Media Widget For Blogger

In this tutorial i am going explain how to add Smooth Sliding social media widget for blogger.By using
Sliding Social widget you can link your social media profile Facebook,Twitter and Rss Google plus and pinterest. Check the demo from below link.

  FOR DEMO

·                  Open your blog layout from the the blogger                      dashboard.

·                  Now click on Add a gadget page element.

·                  Select HTML/JavaScript widget.

·                  Paste following code in  HTML/JavaScript widget and save the the widget.

    transition: all 1000ms ease-in-out;}.btrix-social-slide 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;}.btrix-social-slide ul li a.gplus {    border-left: 65px solid rgba(219, 74, 57, 1);    color: rgba(219, 74, 57, 1);    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide ul li a.gplus p {    margin: 2px 20px 0 -50px;    display: inline-block;    color: #fff;    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide 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 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide 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;}.btrix-social-slide ul li a.pinterest {    border-left: 65px solid rgba(174, 45, 39, 1);    color: rgba(174, 45, 39, 1);    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide ul li a.pinterest p {    margin: 2px 20px 0 -50px;    display: inline-block;    color: #fff;    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}
.btrix-social-slide 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 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}
.btrix-social-slide 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;}
.btrix-social-slide ul li a.rss {    border-left: 65px solid rgba(255, 102, 0, 1);    color: rgba(255, 102, 0, 1);    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}
.btrix-social-slide ul li a.rss p {    margin: 2px 20px 0 -60px;    display: inline-block;    color: #fff;    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}
.btrix-social-slide 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 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}
.btrix-social-slide 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;}</style>
<div class="btrix-social-slide">    <ul>        <li><a class="btrix-social-slidebox facebook" href="https://www.facebook.com/pcandblogertricks321"><p>12K+</p>Facebook </a></li>        <li><a class="btrix-social-slidebox twitter" href="https://twitter.com/akashde55556789"><p>5K+</p>Twitter</a></li>        <li><a class="btrix-social-slidebox gplus" href="https://plus.google.com/107955298793879607964"><p>4K+&nbsp;</p>Google+</a></li>        <li><a class="btrix-social-slidebox pinterest" href="############"><p>2K+&nbsp;</p>Pinterest</a></li>        <li><a class="btrix-social-slidebox rss" href="http://feeds.feedburner.com/blogspot/yaSum"><p>11K+</p>RSS</a></li>    </ul></div>

REPLACE THE RED CODES WITH YOUR OWN ID