05 September 2018

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

How to add Social Media Icons in blogger sidebar


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>


EmoticonEmoticon