Why to exercise Social Media Counter Buttons?
There is no means y'all tin alive without logging into your Facebook concern human relationship to banking concern stand upwardly for novel updates, or to banking concern stand upwardly for y'all ex’s human relationship condition or etc. When people can’t come upwardly to your site, y'all tin make them using Social media websites similar Facebook, Twitter, Google+, Reddit, Pinterest in addition to etc.
Not alone that, but present social media too plays a meaning role inwards providing y'all a proficient set inwards search engine. The to a greater extent than viral your postal service would get, the to a greater extent than higher y'all volition encounter inwards the Search engine.
How to add together Social Media Counter buttons inwards blogger:
This tutorial is based on ii steps, inwards the origin pace y'all have to add together the CSS coding of social media buttons inwards your template in addition to inwards the instant pace nosotros volition hold out installing the social media push clit widget inwards your blogger blog. Go to Blogger >> Template >> Edit HTML >> Search for ]]></b:skin> tag in addition to precisely inwards 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 venture #d2d2d2;
float: left;
max-height: 50px !important;
background: #ffffff;
padding-bottom: 6px!important;
padding-top: 2px!important;
border-bottom: 1px venture #d2d2d2;
margin-bottom: 15px;
margin-left: -5px;
}
.horizontalsocial .sharertitle {
float: left;
border-right: 1px venture #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 venture #d2d2d2;
padding: 3px 0 2px;
height: 25px;
}
.horizontalsocial .sharertwitter {
float: left;
width: 115px;
border-right: 1px venture #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 venture #d2d2d2;
height: 25px;
}
.horizontalsocial .sharerbubble {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWHnse8naxDsBTMQbur9-C-J6k8PZNX5B2CcaKW_R2dCyQ0xEt1w90aakHNtx1IPeP3RTmVZjtCgc3eZ4h6FiPB5WK74x3eZYuWvJM26RKeYBEs0is62KzxKbV7EL6XAFVAIC5yEa6ef7C/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 y'all are done amongst adding the CSS code, only search for <data:post.body/> tag inwards your template in addition to precisely below it past times the next code. TIP: If in that location are multiple <data:post.body/> tags in addition to then glue it the next code subsequently 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 y'all inwards learning a effective means of adding social media counter buttons inwards blogger. Do part your opinions virtually adding social counter buttons inwards your website in addition to if y'all are already using them in addition to then which social buttons create y'all prefer? Let us convey a dainty in addition to informative conversation inwards the comments below.
No comments:
Post a Comment