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 as well as responsive social media icon gadget on this blog. On which y'all tin shipping away link your social website pages to your blog. This gadget is quite responsive as well as is every bit good dandy inwards appearance. You should purpose this.

Put this code inwards css box.

Go to: Themes > Customise > Advanced > Copy below code as well as 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/AVvXsEi093fVYyGWvuVr2aPz2L5LH7odc267ZQjqlIA-vo3yCvuU3c9fAh-Wf5n3OncMxxWBaHbzsR1ocGiF1qrWDjbZc8wnzwNWSNlBwZxc9ITOKu6jyAoFr7bJNHtELeU1VyT0xmOO3oTHp5w/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/AVvXsEi093fVYyGWvuVr2aPz2L5LH7odc267ZQjqlIA-vo3yCvuU3c9fAh-Wf5n3OncMxxWBaHbzsR1ocGiF1qrWDjbZc8wnzwNWSNlBwZxc9ITOKu6jyAoFr7bJNHtELeU1VyT0xmOO3oTHp5w/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/AVvXsEi093fVYyGWvuVr2aPz2L5LH7odc267ZQjqlIA-vo3yCvuU3c9fAh-Wf5n3OncMxxWBaHbzsR1ocGiF1qrWDjbZc8wnzwNWSNlBwZxc9ITOKu6jyAoFr7bJNHtELeU1VyT0xmOO3oTHp5w/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 higher upward codes.
Edit all the social links as well as followers lay out within codes.
Paste the in conclusion code within the box.
Click on save.

Important instructions:

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