SEO & Digital Marketing Blog and Online Earning: Social Media

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>



<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>



<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>



<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>



</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>

How to add Facebook Page 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 Facebook page gadget in blogger

First you go to the your blogger dashboard and go to theme editor

Add a gadget of HTML Java script in where you add the Facebook page in yours blog

Then copy the blow code and paste in gadget and link of your face book page in the gadget where you see “Your Facebook link paste here” then save and refresh your website.