18 May 2017

Social media icons box for Blogger (Blogspot)

How to add social media icons to blogger post, social media buttons for blogger, social media share buttons for blogger, how to add social media buttons to bloggersocial media icons for blogger html code, how to add social media buttons to blogger sidebar, social media widget for blogger, how to add social media buttons to blogger header.

Add social media icons box for Blogger (Blogspot)

Hello Bloggers! Today I'm going to share to you a stylish and responsive social media icon gadget on this blog. On which you can link your social website pages to your blog. This gadget is quite responsive and is also great in appearance. You should use this.

Put this code in css box.

Go to: Themes > Customise > Advanced > Copy below code and paste inside the CSS box.
 <!-- Social Media Icons Buttons for Blogger (Blogspot) (http://www.howtolearnblog.com) created by Vishal Jaiswal (www.vishaljaiswal.in) -->
<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://4.bp.blogspot.com/-X7NN6bB_BE0/WIpygw0-5vI/AAAAAAAAJmw/PJhnRCS3dz8oaKuiq-yFPGsNJ2N1tPfdACLcB/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 span {
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://4.bp.blogspot.com/-X7NN6bB_BE0/WIpygw0-5vI/AAAAAAAAJmw/PJhnRCS3dz8oaKuiq-yFPGsNJ2N1tPfdACLcB/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://4.bp.blogspot.com/-X7NN6bB_BE0/WIpygw0-5vI/AAAAAAAAJmw/PJhnRCS3dz8oaKuiq-yFPGsNJ2N1tPfdACLcB/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 above codes.
  • Edit all the social links and followers number inside codes.
  • Paste the final code inside the box.
  • Click on save.

Important instructions:

1. Replace all the yellow marked letters with your number of followers on your social sites.
2. Replace all the red marked numbers with your page links or URLs.
3. The paste this code anywhere you want to show this widget.

Video Tutorial 


If any problem occur. Please comment below in comment box. That problem will be fixed.