At present time share buttons for your blog and their position really matters. They play important role in viraling your contents on social media and increasing your reach. Which will ultimately generate more page views.This share bar remain fixed at the top of your blog even if reader scroll down. When user clicks on share button it displays networks for sharing your posts. It also uses a special conditional tag which makes it appear it only on post pages.
Why share bar for your blog?
- Compact in design.
- Better User interface.
- One click share.
- No external scripts and css are required.
- Easy customization.
How to install social media share bar in blogger ?
Step1: Go to Blogger > Theme > Edit html and search for <body expr:class='"loading" + data:blog.mobileClass'> or <body using Ctrl + F.
Step2: Paste below codes below the html body tag.
<b:if cond='data:blog.pageType == "item"'>
<div class='navmob'>
<div class='dropdown'>
<button class='dropbtn' onclick='myFunction()'>Share</button>
<div class='dropdown-content' id='myDropdown'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' target='_blank' title='Share On facebook'>Facebook</a>
<a expr:href='"https://twitter.com/share?url=" + data:blog.url' target='_blank' title='Share On twitter'>Twitter</a>
<a expr:href='"https://plus.google.com/share?url=" + data:blog.url' target='_blank' title='Share On Google+'>Google Plus</a>
<a expr:href='"whatsapp://send?text=" + data:blog.url' target='_blank' title='Share On whatsapp'>WhatsApp</a>
</div>
</div>
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}}}}
</script>
</b:if>
Step3: Now, search for ]]></b:skin> and paste below CSS above it.
.dropbtn {
background:#000;color:#fff;
border:1px solid #fff;border-radius:5px;
padding: 5px;margin-left:20px;
cursor: pointer;
font-weight:bold;z-index:9999;
}
.dropbtn:hover {
background:#fff;color:#000;
outline:none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
overflow: auto;
z-index: 9999;
}
.dropdown-content a {
color: #fff;
padding: 10px;z-index: 9999;
font-size:18px;
background-color: #000;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #353535}
.show {display:block;}
.navmob {z-index: 9999;
background-color: rgba(0, 0, 0, 0.7);
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
position:fixed;top:0;left:0;right:0;
}
Step4: Save theme.
