Social Media Icons Box For Blogger (Blogspot)

Add social media icons box for Blogger (Blogspot)

Hello Bloggers! Today I'm going to part to y'all a stylish together with responsive social media icon gadget on this blog. On which y'all tin link your social website pages to your blog. This gadget is quite responsive together with is likewise neat inwards appearance. You should role this.

Put this code inwards css box.

Go to: Themes > Customise > Advanced > Copy below code together with glue within the CSS box.

<style id='page-skin-1' type='text/css'>
.sidebar .widget h2:before, .box-title h2.title:before:nth-child(1), .posts-title h2.title:before:nth-child(1){background-color: #66297e;}
.social-count-plus ul {
border: none !important;
list-style: none !important;
margin: 0;
padding: 0;
}
.social-count-plus li {
background: none !important;
border: none !important;
clear: none !important;
float: left;
list-style: none !important;
margin: 0;
padding: 0 0 20px;
text-align: center;
width: 60px;
}
.social-count-plus .flat li {
margin-right: 7px;
width: 31.22%;
background: #9a9a9a!important;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 7px;
}
.social-count-plus .flat li.count-twitter {
background: #2181c3!important;
}
.social-count-plus .flat .count-twitter a {
background-position: 0px 0 !important;
}
.social-count-plus .flat a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEfigZF2flxVohjv10JQxyMOi_sIlvyibBDs45RijtU44BBpqoG5tGQmP_EAkYundZJwucfLxA-Qi8O90_216cjxymlmS9UjidTXCdQvwmeDzXElFlogQk89HjDHV6X3wiTytP32rSq_A/s1600/sprite-flat.png) !important;
height: 32px !important;
width: 32px !important;
}
.social-count-plus a {
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-webkit-transition: all .4s ease;
transition: all .4s ease;
display: block;
margin: 0 auto;
opacity: 1;
padding: 0 !important;
}
.social-count-plus bridge {
display: block;
margin: 0;
padding: 0;
}
.social-count-plus .count {
display: block;
font-size: 14px;
font-weight: bold;
line-height: 16px;
margin: 5px 0 0;
padding: 0;
}
.social-count-plus .label {
font-size: 9px;
font-weight: normal;

<style id='page-skin-1' type='text/css'>
line-height: 16px;
text-transform: capitalize;
}
.social-count-plus .flat li.count-facebook {
background: #345897!important;
}
.social-count-plus .flat .count-facebook a {
background-position: -32px 0 !important;
}
.social-count-plus .flat a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEfigZF2flxVohjv10JQxyMOi_sIlvyibBDs45RijtU44BBpqoG5tGQmP_EAkYundZJwucfLxA-Qi8O90_216cjxymlmS9UjidTXCdQvwmeDzXElFlogQk89HjDHV6X3wiTytP32rSq_A/s1600/sprite-flat.png) !important;
height: 32px !important;
width: 32px !important;
}
.social-count-plus .flat li.count-googleplus {
background: #ec4b3d!important;
}
.social-count-plus .flat .count-googleplus a {
background-position: -96px 0 !important;
}
.social-count-plus .flat a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEfigZF2flxVohjv10JQxyMOi_sIlvyibBDs45RijtU44BBpqoG5tGQmP_EAkYundZJwucfLxA-Qi8O90_216cjxymlmS9UjidTXCdQvwmeDzXElFlogQk89HjDHV6X3wiTytP32rSq_A/s1600/sprite-flat.png) !important;
height: 32px !important;
width: 32px !important;
}
.social-count-plus:after {
content: "";
display: table;
clear: both;
}
.social-count-plus a:hover {
opacity: 0.7;
}

How to setup social media icons buttons box for Blogger?

<div class='widget-content'>
<div class="social-count-plus"><ul class="flat"><li class="count-twitter"><a class="icon" href="https://twitter.com/"></a><span class="items"><span class="count" style="color: #ffffff !important;">twitter followers number</span><span class="label" style="color: #ffffff !important;">followers</span></span></li><li class="count-facebook"><a class="icon" href="https://www.facebook.com/"></a><span class="items"><span class="count" style="color: #ffffff !important;">facebook followers number</span><span class="label" style="color: #ffffff !important;">likes</span></span></li><li class="count-googleplus"><a class="icon" href="https://plus.google.com/"></a><span class="items"><span class="count" style="color: #ffffff !important;">google+ followers number</span><span class="label" style="color: #ffffff !important;">followers</span></span></li></ul></div> </div>

Follow these steps:

Log on www.blogger.com
Click on Layout
Click on "Add a Gadget" on Sidebar.
Select HTML/JAVASCRIPT box
Copy the inwards a higher house codes.
Edit all the social links together with followers set out within codes.
Paste the finally code within the box.
Click on save.

Important instructions:

1. Replace all the yellowish marked letters amongst your set out of followers on your social sites.
2. Replace all the ruby marked numbers amongst your page links or URLs.
3. The glue this code anywhere y'all desire to demo this widget.

Video Tutorial

If whatever work occur. Please comment below inwards comment box. That work volition move fixed.