Add Stylish Social follow buttons to Blogger.

How to Add Stylish floating follow buttons to blogger?

Demo

Facebook

Follow @TalhaWebz

Twitter

Google+

Linked IN

TalhaWebz

pinterest

feed burner

 Follow the Steps: 
1. Go to the blogger.com.
2. Follow the steps:

Layout >> Add Gadget >> HTML/JavaScript

3. Paste the given code.

<style>@import url(http://fonts.googleapis.com/css?family=Open+Sans);@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";#buttons {    width: 300px;    overflow: hidden;    margin: 0px auto 0;}.button {    float: left;    margin-right: 0px; margin-bottom:0px;   width: 100px;    background: ;    border: .5px dashed #F1F1F1;    border-radius: 0px;    -o-border-radius: 0px;    -ms-border-radius: 1px;    -moz-border-radius: 0px;    -webkit-border-radius: 1px;    box-shadow: inset 0 0px 0px #fdfdfd;    padding: 15px 5px 5px;    box-sizing: border-box;}.button i {    background: ;    color: #c5c5c5;    text-align: center;    line-height: 40px;    font-size: 24px;    width: 40px;    height: 44px;    display: block;    margin: 0 auto 10px;    border-radius: 1%;    -o-border-radius: 1%;    -ms-border-radius: 1%;    -moz-border-radius: 1%;    -webkit-border-radius: 1%;}.social-container {    text-align: center;    text-transform: uppercase;    font-size: 12px;    color: #656565;    line-height: 54px;    font-family:arial; font-weight:bold;     background:white;    width: 100%;    height: 45px;    box-shadow: inset 0 0px 0px #c7c7c7;    border-radius: 0px;    -o-border-radius: 0px;    -ms-border-radius: 0px;    -moz-border-radius: 0px;    -webkit-border-radius: 1px;    position: relative;    overflow: hidden;}.slide, .button i {    -webkit-transition: all 0.2s ease-in-out;    -moz-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;}.slide {    box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.15);    border-radius: 0 0 22px 22px;    -o-border-radius: 0 0 22px 22px;    -ms-border-radius: 0 0 22px 22px;    -moz-border-radius: 0 0 22px 22px;    -webkit-border-radius: 0 0 22px 22px; /* top fix */    transition: all 0.2s ease-in-out;    position: absolute;    height: 45px;    width: 100%;    top: -35px;}.slide::after {    content: "";    display: block;    position: absolute;    width: 100%;    height: 10px;    box-shadow: inset 0 0px 0px #fdfdfd, 0 0px 0px #cdcdcd;    border-radius: 1px;    -o-border-radius: 0px;    -ms-border-radius: 0px;    -moz-border-radius: 0px;    -webkit-border-radius: 0px;    background:#cdcdcd;    border: 1px solid #fdfdfd;    box-sizing: border-box;    bottom: 0;}.button:hover .slide {    top: 0;    border-radius: 1px;}.linkedin .IN-widget, .button iframe, .google #___plusone_0 {    top: -2px;    position: relative;}.twitter iframe {    width: 79px !important;}.google #___plusone_0 {    width: 60px !important;}.button.facebook:hover i, .facebook .slide {    background: white;    color:  #305c99;}.button.twitter:hover i, .twitter .slide {    background: white;    color: #00cdff;}.button.google:hover i, .google .slide {    background: white;    color:#d24228;}.button.linkedin:hover i, .linkedin .slide {    background: white;    color: #007bb6;}.button.pinterest:hover i, .pinterest .slide {    background: white;    color:#c92228 ;}.button.rss:hover i, .rss .slide {    background:white ;    color:#FF6600 ;}.button.linkedin {    margin-right: 0;}.credit {    padding-left: 10px;    font-size: 14px;    color: #172b36;    position: absolute;    bottom: 0;    text-align: center;    font-family: Open Sans;}.credit a {    border-bottom: 0px solid #dc4106;    text-decoration: none;    padding: 0 0 2px;    color: #172b36;}</style><div id="buttons"><div class="facebook button"> <i class="icon-facebook"></i> <div class="social-container fb">  <div class="slide">      <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/talhawebz&send=false&layout=button_count&width=90&show_faces=false&font&colorscheme=light&action=like&height=21&appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true">   </iframe>  </div>   Facebook </div></div><div class="twitter button"> <i class="icon-twitter"></i> <div class="social-container tw">  <div class="slide"><a class="twitter-follow-button"  href="https://twitter.com/talhawebz"  data-show-count="true"  data-size="small">Follow @TalhaWebz</a><script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script> </div>   Twitter </div></div><div class="google button"> <i class="icon-google-plus"></i> <div class="social-container tw">  <div class="slide">   <!-- Place this tag where you want the +1 button to render. -->  <!-- Place this tag in your head or just before your close body tag. --><script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Place this tag where you want the widget to render. --><div class="g-follow" data-annotation="none" data-height="15" data-href="//plus.google.com/u/0/108254245671492111475" data-rel="publisher"></div>  </div>   Google+ </div></div><div class="linkedin button"> <i class="icon-linkedin"></i> <div class="social-container tw">  <div class="slide">   <a href="http://linkedin.com/in//talhawebz" target="_blank"><img alt=" Linked In" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIvgG8tuHvNpyhTT22HrnqPGqWZL9p4iMe6uHbKTyo7ULP7JVKmwERLRO4ILZACirsE076LzvBZdszljG-dPRvP8PsOXsKdhQ0qbtt6Klls2tpLnnwqpOjA-WCsvNi9MPtxYrwtmx5z5w/s1600/LinkedIn-follow.png" /></a> </div>   Linked IN </div></div><div class="pinterest button"> <i class="icon-pinterest"></i> <div class="social-container tw">  <div class="slide"><a data-pin-do="buttonFollow" href="http://www.pinterest.com/talhawebz/">TalhaWebz</a><!-- Please call pinit.js only once per page --><script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script></div> pinterest </div></div><div class="rss button"> <i class="icon-rss"></i> <div class="social-container tw">  <div class="slide"> <a href="http://feeds.feedburner.com/talhawebz" target="_blank"><img src="http://feeds.feedburner.com/~fc/talhawebz?bg=99CCFF&amp;fg=444444&amp;anim=1" height="20" width="64" style="border:0" alt="" /></a><!-- Please call pinit.js only once per page --></div>feed burner</div></div>
    </div>

4. Replace the Colored with following:

• "Blue" with "Facebook"
• "Light blue" with "Twitter"
• "Sky blue" with "Linkedin"
• "Red" with "Google+"
• "Maroon" with "Pinterest"
• "Orange" with "Feedburner Username"

5. Enjoy it and Post the Comment if you face any problem...........

Related Post