Add the buttons of social media sites in a professional and distinctive way to your site or Blogger Blog

 

Add the buttons of social media sites in a professional and distinctive way to your site or Blogger Blog

Followers treasure blogger so you have to take care of them and take care of them, followers are the most important things that must be taken care of so that they meet their requests and solve their problems, and we all like to have many followers and to bring followers we must take care of them in facilitating them ways to follow us so that we work for our blog pages on social media sites and try to promote them to visitors to our blogs, so we find that you should install code buttons to participate in your blog because it has a positive impact in increasing the number of followers of the blog in Social media sites, so we offer you the code icons of social media sites professionally and distinctively, the addition can be placed on the side list as well as the addition contains all social media sites.

Preview

Note: This addition works with all sites with its beautiful script and we explained its installation on The Blogger only, but you can install it on your site and will work without any problems.

Installation of the addition of the buttons of social sites to Blogger blogs

The sharing button code consists of two parts.

How to add social media icons.

The way the add-on is installed is very easy, just go to the layout, then choose the right place, then add the HTML/JavaScript tool and put the next code inside it.

<div class="social-counter">
<ul id="social">
<li class="item-social facebook count=3.5k;" ><a href="#">
<i class="item-icon fa"></i><span class="item-count">3.5k</span><span class="item-text">Like</span>
</a></li>
<li class="item-social twitter count=1.7k;" ><a href="#">
<i class="item-icon fa"></i><span class="item-count">1.7k</span><span class="item-text">Follow</span>
</a></li>
<li class="item-social gplus count=735;" ><a href="#">
<i class="item-icon fa"></i><span class="item-count">735</span><span class="item-text">Like</span>
</a></li>
<li class="item-social youtube count=2.8k;" ><a href="#">
<i class="item-icon fa"></i><span class="item-count">2.8k</span><span class="item-text">Follow</span>
</a></li>
<li class="item-social pinterest count=524;" ><a href="#">
<i class="item-icon fa"></i><span class="item-count">524</span><span class="item-text">Like</span>
</a></li>
<li class="item-social dribbble count=7.3k;" ><a href="#">
<i class="item-icon fa"></i><span class="item-count">7.3k</span><span class="item-text">Like</span>
</a></li>
<li class="item-social instagram count=849;" ><a href="#">
<i class="item-icon fa"></i><span class="item-count">849</span><span class="item-text">Like</span>
</a></li>
<li class="item-social rss count=286;" ><a href="#">
<i class="item-icon fa"></i><span class="item-count">286</span><span class="item-text">Follow</span>
</a></li>
</ul>
</div>

<style type="text/css">
.social-counter{margin:0;padding:0;overflow:hidden}
.social-counter ul{margin:0;padding:0}
.social-counter ul li{list-style: none;width:42%;float:left;text-align:left;margin:0 0 5px;padding:0 0 5px;position:relative; position: relative;
border: 1px solid #f5f5f5;
padding: 7px;}
.social-counter ul li:nth-child(2),.social-counter ul li:nth-child(4),.social-counter ul li:nth-child(6),.social-counter ul li:nth-child(8){float:right}
.social-counter ul li a{margin:0;padding:0}
.item-icon{float:left;position:relative;text-align:center;vertical-align:middle;color:#fff;margin:0;display:inline-block;width:32px;height:32px;line-height:32px;font-size:16px;border-radius:2px}
.hide-count{display: none}
.item-count{display:inline-block;color:#333;font-weight:700;font-size:13px;line-height:32px;float:left;padding-left:10px}
.item-text{float:right;display:inline-block;color:#666666;font-size:11px;line-height:32px;font-weight:400}
.item-social.facebook .item-icon{background-color:#5271b3}
.item-social.twitter .item-icon{background-color:#49aff8}
.item-social.gplus .item-icon{ background-color:#cb2027}
.item-social.rss .item-icon{background-color:#FFC200}
.item-social.youtube .item-icon{background-color:#eb1a21}
.item-social.dribbble .item-icon{background-color:#ea4c89}
.item-social.instagram .item-icon{background-color:#4E729A}
.item-social.pinterest .item-icon{background-color:#cb2027}
.item-social.facebook .item-icon:before{content:"\f09a"}
.item-social.twitter .item-icon:before{content:"\f099"}
.item-social.gplus .item-icon:before{content:"\f0d5"}
.item-social.rss .item-icon:before{content:"\f09e"}
.item-social.youtube .item-icon:before{content:"\f16a"}
.item-social.instagram .item-icon:before{content:"\f16d"}
.item-social.dribbble .item-icon:before{content:"\f17d"}
.item-social.pinterest .item-icon:before{content:"\ f0d2"}
.social-counter ul li:hover .item-icon{background-color:#222222}
.social-counter ul li:hover .item-text{color:#01BD5D}
</style>

Amendments

# Replace it with the blog page link on the social networking site.

Replace what's in yellow with the number of followers of your

pages Note: If you want to delete a category of social media sites delete them from the beginning of <li to </li>
if icons don't appear, place the icon link in your blog

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Here we have finished installing the code icons of social media sites, in case there is a problem with you can be placed in your mind and we will respond to you as soon as possible.

Edit This Article