Smooth Sliding Social Media Widget For Blogger

In this tutorial im gonna explicate how to add together Smooth Sliding social media widget for blogger.By using
Sliding Social widget yous tin link your social media profile Facebook,Twitter together with Rss Google addition together with pinterest. Check the exhibit from below link.

In this tutorial im gonna explicate how to add together Smooth Sliding social media widget for blogge Smooth Sliding Social Media Widget For Blogger

You may similar these articles.
     Awesome 8 tips to Increase Google Plus Followers
     Flipboard Style Social Media Widget
     Below Post Social Sharing Widget

Add Smooth Sliding Social Widget to Blogger

1. Log inwards to blogger work organisation human relationship together with Click drib down.

In this tutorial im gonna explicate how to add together Smooth Sliding social media widget for blogge Smooth Sliding Social Media Widget For Blogger

2. Now choose “Layout” Like Below.

3. Click Add Gadget together with select ‘HTML/Javascript

4. Paste below code.

<style> .btrix-social-slidebox {     font: 16px normal 'Denk One', sans-serif;     display: inline-block;     position: relative;     width: 95%;     max-width: 200px;      padding: 12px; } .btrix-social-slide {     width: 95%;     max-width: 280px;     padding-top: 8px;     padding-left: 8px;     padding-right: 8px; } .btrix-social-slide a {     text-decoration: none !important;     } .btrix-social-slide ul {margin-top:-5px;     margin: 0;     padding: 0;     list-style: none; } .btrix-social-slide ul li {margin-bottom:15px;     display: inline;     margin: 0;     padding: 0;     text-indent: 0;  margin-left:10px; } .btrix-social-slide ul li a.facebook {     border-left: 65px enterprise rgba(59, 89, 152, 1);     color: rgba(59, 89, 152, 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.facebook 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.facebook:hover {     background: rgba(59, 89, 152, 1);     border-left: 0px enterprise rgba(59, 89, 152, 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.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; } .btrix-social-slide ul li a.twitter {     border-left: 65px enterprise rgba(64, 153, 255, 1);     color: rgba(64, 153, 255, 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.twitter 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.twitter:hover {     background: rgba(64, 153, 255, 1);     border-left: 0px enterprise rgba(64, 153, 255, 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.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 enterprise 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 enterprise 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 enterprise 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 enterprise 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 enterprise 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 enterprise 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/bloggertrix"><p>12K+</p>Facebook </a></li>         <li><a class="btrix-social-slidebox twitter" href="https://twitter.com/bloggertrix"><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="http://pinterest/bloggertrix"><p>2K+&nbsp;</p>Pinterest</a></li>         <li><a class="btrix-social-slidebox rss" href="http://feeds.feedburner.com/bloggertrix"><p>11K+</p>RSS</a></li>     </ul> </div>   

You accept to modify the counters manually, but modify cherry color reveal according to profile.

Replace bloggertrix alongside your Facebook username
Replace bloggertrix alongside your Twitter Username
Replace 107955298793879607964 alongside your Google addition ID
Replace Username alongside your Youtube Username
Replace bloggertrix alongside your Feedburner ID

5. Now relieve your HTML/Javascript’. You are done.
Hope this Smooth Sliding Social Media Widget helps to brand your weblog attractive.
Sumber http://www.bloggertrix.com/