Why to usage Social Media Counter Buttons?
There is no means yous tin alive without logging into your Facebook trace of piece of occupation organisation human relationship to banking concern jibe novel updates, or to banking concern jibe yous ex’s human relationship condition or etc. When people can’t come upwards to your site, yous tin ambit them using Social media websites similar Facebook, Twitter, Google+, Reddit, Pinterest in addition to etc.
Not alone that, but present social media every bit good plays a pregnant role inwards providing yous a adept lay inwards search engine. The to a greater extent than viral your postal service would get, the to a greater extent than higher yous volition come across inwards the Search engine.
How to add together Social Media Counter buttons inwards blogger:
This tutorial is based on 2 steps, inwards the get-go pace yous have to add together the CSS coding of social media buttons inwards your template in addition to inwards the instant pace nosotros volition hold upwards installing the social media push widget inwards your blogger blog. Go to Blogger >> Template >> Edit HTML >> Search for ]]></b:skin> tag in addition to precisely to a higher house it glue the next code:#mblSocialFloat {
clear: both;
padding: 6px 0;
display: block;
background: #FFFFFF;
}
#mblSocialFloat td {
padding: 4px;
margin: 0;
border: none;
}
#mblSocialFloat td iframe {
max-width: 82px;
width: 82px !important;
}
.horizontalsocial {
width: 100%;
border-top: 1px corporation #d2d2d2;
float: left;
max-height: 50px !important;
background: #ffffff;
padding-bottom: 6px!important;
padding-top: 2px!important;
border-bottom: 1px corporation #d2d2d2;
margin-bottom: 15px;
margin-left: -5px;
}
.horizontalsocial .sharertitle {
float: left;
border-right: 1px corporation #d2d2d2;
padding: 3px 10px 2px 0px;
margin: 0 0px 0 0;
color: #b1a9a5;
text-transform: uppercase;
line-height: 25px;
vertical-align: middle;
font-size: 14px;
}
.horizontalsocial .fb-like {
width: 100px;
float: left;
border-right: 1px corporation #d2d2d2;
padding: 3px 0 2px;
height: 25px;
}
.horizontalsocial .sharertwitter {
float: left;
width: 115px;
border-right: 1px corporation #d2d2d2;
margin: 0 15px 0 0;
padding: 3px 0 2px;
height: 25px;
}
.horizontalsocial .sharergplus {
float: left;
width: 90px;
margin: 0 15px 0 15px;
padding: 3px 0 2px;
border-right: 1px corporation #d2d2d2;
height: 25px;
}
.horizontalsocial .sharerbubble {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijBOl4DYqNxrv7g5u1d0BS4UNc8EGe9uL7RVNIbGgVBx1Ur8rRL8hhhjR5YaFZBExWv-Eo0JQhLolMH6099UyRZQqJKOcMdkn_C5SvWq5xbXfI7eW3Y4NkvXr2yat1OpH5fO-CgFWm8Uri/s1600/Commentz.png) no-repeat;
height: 25px;
min-width: 25px;
float: left;
margin: 7px 0 0;
line-height: 18px;
vertical-align: top;
}
.horizontalsocial .sharerbubble a {
color: #2d2520;
padding: 0px 0 0px 30px;
font-size: 18px !important;
font-family: 'Lora', Arial, Helvetica, san-serif !important;
}
.horizontalsocial.fixed {
position: fixed;
top: -2px;
z-index: 99999;
}
.social-buttons a {
color: #666;
text-decoration: none;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
Once yous are done alongside adding the CSS code, precisely search for <data:post.body/> tag inwards your template in addition to precisely below it yesteryear the next code. TIP: If in that location are multiple <data:post.body/> tags hence glue it the next code later on each tag.
<b:if cond='data:blog.pageType == "item"'>
<div class='horizontalsocial social-buttons' id='horizontalsocial'>
<div class='mblSocialFloat' id='mblSocialFloat'>
<table class='mblSocialFloat' width='100%'>
<tr>
<td><div class='sharertitle'>Socialize It →</div> </td>
<td>
<div class='sharertwitter'><a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
</td>
<td>
<div class='fb-like'><iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/></div>
</td>
<td>
<div class='sharergplus'><div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/></div>
</td>
<td>
<div class='sharerbubble'><span class='thecomments'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>0</b:if><b:if cond='data:post.numComments == 1'>1</b:if><b:if cond='data:post.numComments >= 2'><data:post.numComments/></b:if></a></b:if></span></div>
</td>
</tr>
</table>
</div></div>
</b:if>
<!-- MyBloggerLab.com Floating Social Bar -->
We promise this tutorial may convey helped yous inwards learning a effective means of adding social media counter buttons inwards blogger. Do percentage your opinions almost adding social counter buttons inwards your website in addition to if yous are already using them hence which social buttons produce yous prefer? Let us convey a overnice in addition to informative conversation inwards the comments below.
Comments