These days you can share your content in any social media site like facebook, twitter, gplus, linkedin, instagram, pinterest etc. But we never thought about whats app, Do you know whats app is the most used social network and it has more users than facebook. so today we will help you to spread your content to that huge audience and will learn How to add social sharing widget with whatsapp sharing button in blogger, now days google is more focusing on mobile devices instead of pc’s. So putting a social widget which has whatsapp sharing option in it, will help you to boost your traffic very quickly.
Lets move further and see How to add social sharing widget with whatsapp sharing button in blogger. You can check a live preview of the widget just below.
Lets move further and see How to add social sharing widget with whatsapp sharing button in blogger. You can check a live preview of the widget just below.
.share-box-post{margin:20px 0 25px;border-bottom:3px solid #EEE;position:relative}
.share-title-post{color:#010101;display:inline-block;padding-bottom:10px;font-size:13px;font-weight:700;position:relative;top:5px;text-transform:uppercase}
.share-art-post{float:right;padding:0;padding-top:0;font-size:13px;font-weight:400;text-transform:capitalize}
.share-art-post a{color:#fff;padding:3px 8px;margin-left:4px;border-radius:2px;display:inline-block;margin-right:0}
.share-art-post a span { display: none;
}
.share-art-post a:hover{color:#fff}
.share-art-post .fac-art{background:#3b5998}
.share-art-post .fac-art:hover{background:rgba(49,77,145,0.7)}
.share-art-post .twi-art{background:#00acee}
.share-art-post .twi-art:hover{background:rgba(7,190,237,0.7)}
.share-art-post .goo-art{background:#db4a39}
.share-art-post .goo-art:hover{background:rgba(221,75,56,0.7)}
.share-art-post .pin-art{background:#CA2127}
.share-art-post .pin-art:hover{background:rgba(202,33,39,0.7)}
.share-art-post .lin-art{background:#0077B5}
.share-art-post .lin-art:hover{background:rgba(0,119,181,0.7)}
.share-art-post .wat-art{background:#25d266}
.share-art-post .wat-art:hover{background:rgba(37, 210, 102, 0.73)}
Note :- The actual button will only appear in mobile and tablets(768px screen size). We have shown the button just for demo in desktop.
Start Step-1 ( Adding CSS )
Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.
The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.
/* ######## Social Sharing Widget By Sorabloggingtips.com ######################### */
.share-box {
position: relative;
padding: 10px;
}
.share-title {
border-bottom: 2px solid #777;
color: #010101;
display: inline-block;
padding-bottom: 7px;
font-size: 15px;
font-weight: 500;
position: relative;
top: 2px;
}
.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;
}
.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;}
}
Step-2 ( Adding HTML )
In the template, search for the <data:post.body/> tag and just below it paste the following HTML Coding. In case, you are unable to find <data:post.body/>, then you can paste it just below <div class=’post-footer’> or <div class=’post-footer-line post-footer-line-1′></div>.
<b:if cond='data:blog.pageType == "item"'>
<div class='share-box'> <h8 class='share-title'>Share This:</h8> <div class='share-art'> <a class='fac-art' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a> <a class='twi-art' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a> <a class='goo-art' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); 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='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a> <a class='lin-art' expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); 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='"whatsapp://send?text=" + data:post.title + " >> " + 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'/> </b:if> Note :- If you want to display the widget in every page ( Homepage, postpage, indexpage, searchpage, archive page etc.) Then remove the lines which are marked in red from the above code.
Step-3 ( Adding Fontawesome )
The widget works on fontawesome icons, so to make the widget work you have to install fontawesome in your blog, To do so.
In the template, search for the </head> tag and just above it paste the following HTML Coding.
<link href=’https://ift.tt/34vxRXB; rel=’stylesheet’/>
Conclusion
Congrats !! You have made it. now you have learned that How to add social sharing widget with whatsapp shaing button in blogger. Visit your blog and check the awesome widget live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us. Arrivederci !! (Goodbye in Italian).
No comments:
Post a Comment