How to add Social Media Icons in blogger sidebar

How to add Social Media Icons in blogger sidebar

Hello Howdy and welcome guys

Today In this tutorial I will teach you about the blogger and some tricks of the blogger the main topic is add social media icons in to blogger gadget

First you go to the your blogger dashboard and go to theme editor and press edit theme.

Then you press Ctrl + F and Find the Head

And paste the below link

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

Add a gadget of HTML Java script in where you add the social media icons

Then copy the blow code and paste in gadget and where you see “#”  tag where paste your social site link then save and refresh your website.

<div class="social-counter">

      <a class="count facebook" href="#">

        <div class="icon"><i class="fa fa-facebook"></i></div>

        <p><span>34.2k</span> likes</p>

        <p class="action-btn">Like</p>

      </a>

      <!-- TWITTER -->

      <a class="count twitter" href="#">

        <div class="icon"><i class="fa fa-twitter"></i></div>

        <p><span>28.6k</span> followers</p>

        <p class="action-btn">Follow</p>

      </a>

      <!-- YOUTUBE -->

      <a class="count youtube" href="#">

        <div class="icon"><i class="fa fa-youtube"></i></div>

        <p><span>8.6k</span> subscribers</p>

        <p class="action-btn">Subscribe</p>

      </a>

      <!-- GOOGLE PLUS -->

      <a class="count google-plus" href="#">

        <div class="icon"><i class="fa fa-google-plus"></i></div>

        <p><span>17.3k</span> followers</p>

        <p class="action-btn">+1</p>

      </a>

      <!-- INSTAGRAM -->  

    </div>

<style>

.social-counter{

  padding: 0;

  display: block;

}

.count{

  display: block;

  padding: 7px 0;

  text-align: left;

  transition: all 0.5s ease;

}

.count:hover{

  background: rgba(0,0,0,0.033);

  transform: scale(1.065);

}

.count .icon{

  background: #aaa;

  display: inline-block;

  float: left;

  color: white;

  font-size: 22px;

  margin-left: 5px;

  text-align: center;

  width: 45px;

  height: 45px;

  border-radius: 50%;

  text-shadow: 0 0 3px rgba(0,0,0,0.2);

  display: table;

}

.count .icon i{

  display: table-cell;

  vertical-align: middle;

}

.count p{

  display: inline-block;

  font-size: 13px;

  color: #888;

  margin: 11px;

}

.count p span{

  color: black;

  font-size: 18px;

  font-weight: bold;

  padding-right: 2px;

}

.count .action-btn{

  float: right;

  display: inline-block;

  background: #aaa;

  color: white;

  padding: 3px 6px;

  border-radius: 3px;

  font-size: 14px;

  margin: 11px;

}

/*== COLORS ==*/

.facebook .icon{background:#3b5999;}

.facebook .action-btn{background:#3b5999;}

.facebook .icon i{padding-top:2px;}

.twitter .icon{background:#55acee;}

.twitter .action-btn{background:#55acee;}

.twitter .icon i{padding-top:2px;}

.youtube .icon{background:#cd201f;}

.youtube .action-btn{background:#cd201f;}

.youtube .icon i{font-size:24px}

.google-plus .icon{background:#dd4b39;}

.google-plus .action-btn{background:#dd4b39;}

.google-plus .icon i{font-size: 18px; padding-top: 1px;}

.instagram .icon{background:#e4405f;}

.instagram .action-btn{background:#e4405f;}

.rss .icon{background:#f57d00;}

.rss .action-btn{background:#f57d00;}

.social-counter-2 .linkedin, .linkedin .icon,.linkedin .action-btn{background:#0077B5}

.social-counter-2 .vimeo, .vimeo .icon,.vimeo .action-btn{background:#1ab7ea}

.social-counter-2 .vk, .vk .icon,.vk .action-btn{background:#4c75a3}

.social-counter-2 .tumblr, .tumblr .icon,.tumblr .action-btn{background:#34465d}

.social-counter-2 .pinterest, .pinterest .icon,.pinterest .action-btn{background:#bd081c}

.social-counter-2 .stumbleupon, .stumbleupon .icon,.stumbleupon .action-btn{background:#eb4924}

.social-counter-2 .reddit, .reddit .icon,.reddit .action-btn{background:#ff5700}

.social-counter-2 .yelp, .yelp .icon,.yelp .action-btn{background:#af0606}

.social-counter-2 .weibo, .weibo .icon,.weibo .action-btn{background:#df2029}

.social-counter-2 .producthunt, .producthunt .icon,.producthunt .action-btn{background:#da552f}

.social-counter-2 .whatsapp, .whatsapp .icon,.whatsapp .action-btn{background:#25D366}

.social-counter-2 .vine, .vine .icon,.vine .action-btn{background:#00b489}

.social-counter-2 .slack, .slack .icon,.slack .action-btn{background:#3aaf85}

.social-counter-2 .dribbble, .dribbble .icon,.dribbble .action-btn{background:#ea4c89}

.social-counter-2 .flickr, .flickr .icon,.flickr .action-btn{background:#ff0084}

.social-counter-2 .behance, .behance .icon,.behance .action-btn{background:#131418}

.behance .icon i{font-size:18px;}

.social-counter-2 .foursquare, .foursquare .icon,.foursquare .action-btn{background:#f94877}

.social-counter-2 .snapchat, .snapchat .icon,.snapchat .action-btn{background:#FFFC00}

.snapchat .icon i{font-size:24px;text-shadow: -1px 0 black,0 -1px black, 1px 0 black, 0 1px black}

.snapchat .action-btn{text-shadow: 0 0 1px black}

</style>

" class="fa-facebook">146,200Follow us on Facebook 
#" class="fa-twitter">50,748Follow us on Twitter 
#" class="fa-subscribe">33,175Subscribe us on YouTube

<link href='https://www.dropbox.com/s/j8u0px1qszixxwl/TricksTantraSCL.css?dl=1' rel='stylesheet' type='text/css'/>

<script src='https://www.dropbox.com/s/tskmt978ku8qb7g/TricksTantraSCL.js?dl=1' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(function(){

  $('.socialLocker .to-lock').sociallocker({

    buttons: {order:["facebook-like","twitter-tweet","google-plus"]},

    twitter: {url:"http://twitter.com/scorpionruler"},

    facebook: {url:"https://www.facebook.com/trickstantra/"},

    google: {url:"https://plus.google.com/+MohammadSharfuddin"},

    text: {

      header: "Like us To Unlock This Content",

      message: "This content is locked. Like us on Twitter, Facebook or Google plus to unlock it."

    },

    locker: {close: false, timer: 0,},

    theme: "secrets"

  });

});

//]]>

</script>