Animated Social Share Button For Blogger with CSS - is a share
button that is make your blog more attractive. If you search for share
button on internet, then you found many results like Adthis, Share This, Simple Share button, Addtoany etc share button for blogger. Those are mostly helpful and workable.
Today i am share an awesome animated mouse hover social share button for
blogger. This share button is fully customized with CSS. Using this
share button you should add Facebook, Twitter, Google+, Linkedin and Pinterest share button on blogger blog.
Importance of Social Share Button - No need explain about
importance of social share button. However saying, a social share button
can grow up visitor for your blog. Social share button help to holding
visitor in your blog.
Now lest start the tutorial. Before starting this keep Backup your template.
Go to blogger dashboard > Template > Edit HTML and find </style>
Copy and past below CSS Code before </style>
/* Share Button */
.post-footer{margin-top:30px;}
.share-post, .multiauthor-box {margin-bottom:50px;}
.share-post ul {padding:0;margin:0;text-align:center;}
.share-post li{list-style:none;display:inline-block;margin-right:10px;padding:0;font-weight:700;text-transform:uppercase}
.share-post li:first-child {font-size:16px;color:#22a1c4;}
.share-post li a{display:block;text-align:center;}
.share-post span{display:none;}
.share-post li a i{display:block;color:#fff;width:40px;height:40px;line-height:40px;font-size:18px;border-radius:40px;font-weight:normal;transition:all .3s;}
.share-post{margin-bottom:30px;border-top:1px solid #eff0f0;border-bottom:1px solid #eff0f0;line-height:52px;min-height:52px;margin-left:-30px;margin-right:-30px}
.share-post li a i.fa.fa-facebook{background:#3b5998;border:1px solid transparent;}
.share-post li a i.fa.fa-twitter{background:#19bfe5;border:1px solid transparent;}
.share-post li a i.fa.fa-google-plus{background:#d64136;border:1px solid transparent;}
.share-post li a i.fa.fa-linkedin{background:#006699;border:1px solid transparent;}
.share-post li a i.fa.fa-pinterest{background:#cb2027;border:1px solid transparent;}
.share-post li a i.fa.fa-facebook:hover{background:#fff;color:#3b5998;border:1px solid #4666aa;}
.share-post li a i.fa.fa-twitter:hover{background:#fff;color:#19bfe5;border:1px solid #2acef4;}
.share-post li a i.fa.fa-google-plus:hover{background:#fff;color:#d64136;border:1px solid #e95247;}
.share-post li a i.fa.fa-linkedin:hover{background:#fff;color:#006699;border:1px solid #017ab6;}
.share-post li a i.fa.fa-pinterest:hover{background:#fff;color:#cb2027;border:1px solid #e33239;}Now Put the below code where you want to show your share buttons. Basically you should put the share buttons are after <data:post.body/> sections.
<div class='share-post'>
<ul class='entry-share-list clearfix'>
<li>Share This</li>
<li class='facebook_share'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/> </a>
</li>
<li class='twitter_share'>
<a expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
</li>
<li class='google_share'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
</li>
<li class='linkedin_share'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/></a>
</li>
<li><a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'><i class='fa fa-pinterest'/></a></li>
</ul>
</div>Now save the template and see the result.
Note that, Font-awesome must be added in your template. Otherwise social icons are may not shown. If not added then copy the below script and past before </head> tag.
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,300");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>Now save template again and see the result. If you found any problem then inform in comment section. Thanks....
EmoticonEmoticon