How To Make A Button And Share Button Social Whatsapp On Blogger

In the posting before I've discussed about How To Install The Buttons Share Whatsapp With Thumbnails. And for posting this time I will share How to make a button and share button social whatsapp on blogger. Social button which I will discuss this time very suitable template you made him absolutely no social share button. But baseball may also reply templates you guys absolutely no button share. But if you guys want to try him there is nothing wrong of her to replace the buttons you guys have already share with the share button which I'll share at this time.

The advantages of this social share button for me is quite simple and not heavy when there are visitors who stopped at the blog article you guys. Let alone make you guys who are active in the virtual world that always share in social media like Fb, twitter, google + even in Group whatsapp though. For example you can have a look at the button share social I have in the top of the post, if I do not change. How the children according to you guys? OK if you guys want to also install his template you guys please refer to fine a tutorial that I share this time.

How to make a button and share button social whatsapp on blogger

1. You guys please copy code below right at the top of the code ]]></b:skin> Or </style>

/* Social Sharing Widget */
.share-box {
position: relative;
    margin: 10px 0 0;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}
.share-title {
color: #010101;
display: inline-block;
    box-shadow: inset 0 -7px 0 rgba(2, 171, 104, 0.16);
font-size: 15px;
font-weight: 500;
position: relative;
}
.share-art {
float: right;
padding: 0;
padding-top: 0;
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
}
.share-art a {
color: #fff;
padding: 3px 8px;
margin-left: 4px;
border-radius: 2px;
display: inline-block;
margin-right: 0;
background: #010101;
}
.share-art a span {
    display: none;
}
.item .share-art a span {
display: inline-block;
    margin-left: 5px;
}
.share-art a:hover{color:#fff}
.share-art .fac-art{background:#3b5998}
.share-art .fac-art:hover{background:rgba(49,77,145,0.7)}
.share-art .twi-art{background:#00acee}
.share-art .twi-art:hover{background:rgba(7,190,237,0.7)}
.share-art .goo-art{background:#db4a39}
.share-art .goo-art:hover{background:rgba(221,75,56,0.7)}
.share-art .pin-art{background:#CA2127}
.share-art .pin-art:hover{background:rgba(202,33,39,0.7)}
.share-art .lin-art{background:#0077B5}
.share-art .lin-art:hover{background:rgba(0,119,181,0.7)}
.share-art .wat-art{background:#25d266;display:none;}
.share-art .wat-art:hover{background:rgba(37, 210, 102, 0.73)}
@media only screen and (max-width: 768px) {
.share-art .wat-art{display:inline-block;}
.item .share-art a span {
display:none;
}
}

And please add the css code for the media screen mobile below and may be located under his css code above.

@media only screen and (max-width:480px){
.share-box {
    text-align: center;
}
.share-title {
display: none;
}
.share-art {
    float: none;
}}

2. And to code the caller her please you guys copy code below and paste it in the part that you want. As an example when you guys want to install him under the title of the article you can put the code of the above code <data:post.body/> and if you guys want to install him under the articles you guys can put his code under the code <data:post.body/>

<div class='share-box'>
          <h8 class='share-title'>Share This:</h8>
               <div class='share-art'> 

<a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>

<a class='twi-art' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a>

<a class='goo-art' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a>

<a class='pin-art' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a>  

<a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a>

<whatsapp expr:href='data:post.url' expr:text='data:post.title'/>
<a class='wat-art' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/><span class='resp_del5'> Whatsapp</span></a>

</div>
         </div>
      <div style='clear:both'/> 

Need to note on the code <data:post.body/> There is the possibility of the same code in the template. So you guys can try one by one according to his precise position you guys on the part you want. Or you can change code share button that already exist in the template code with you guys now.

When the size of the share his social equal does not fit the template of you, you simply edit the css code its only. Maybe it's just that I can share in this tutorial which is about How to make a button and share button social whatsapp on blogger. Hopefully the article can be rewarding this time create a PAL all bloggers. If there is a wish to ask please leave a comment below.

Share this post