 |
| SEO Friendly Share Button for Blogger Blog |
This share button is SEO optimized, meaning it responsive and it makes it easier for visitors to your blog to share your articles on various social media platforms.
Features Of This Share Button
- SEO Friendly
- Neat Code
- Responsive
- Easy Installation
Why Should I Add A Share Button To My Blogger Blog?
You might think share buttons only help readers share your article. you might also forget that share buttons can also be useful to you, yes!. OK imagine trying to share your own posts on social media without a share button installed it will be stressful to manually input your URL on your social media account.
Without saying much, lets look at how to Add the SEO Friendly Share Button to your blog.
How to Add SEO Friendly Share Button To Blogger
just follow these easy steps and the share buttons will be installed in no time.
First Step is to navigate to themes from your blogger dashboad. You can checkout All You Need To Know About The New Blogger Version.
While On the Edit HTML Page find and pste the below css ABOVE/BEFORE the </head> tag
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
.share_responsive{position:relative;height:40px;margin:20px 0!important;padding:0}
.share-btn,.share-btn li,.share_responsive h4{margin:0;padding:0}
.share_responsive h4{height:40px;width:10%;position:absolute;top:0;left:0;z-index:2}
.share-btn{height:40px;padding:0;margin:0!important;width:100%;}
.share-btn:after{clear:both}
.share-btn:after,.share-btn:before{content:' ';display:table}
.share-btn li{box-sizing:border-box;width:10%;height:100%;line-height:40px;padding:0!important;margin:0!important;list-style-type:none!important;transition:all .3s ease-in-out;float:left;border:0!important}
.share-btn li.btn-line a,.share-btn li.btn-line a:hover{background-color:#00C300}
.share-btn li.btn-facebook a{background-color:#306199}
.share-btn li.btn-facebook a:hover{background-color:#244872}
.share-btn li.btn-tumblr a{background-color:#32506d}
.share-btn li.btn-tumblr a:hover{background-color:#22364a}
.share-btn li.btn-linkedin a{background-color:#007bb6}
.share-btn li.btn-linkedin a:hover{background-color:#005983}
.share-btn li.btn-twitter a{background-color:#26c4f1}
.share-btn li.btn-twitter a:hover{background-color:#0eaad6}
.share-btn li.btn-pinterest a{background-color:#b81621}
.share-btn li.btn-pinterest a:hover{background-color:#8a1119}
.share-btn li.btn-whatsapp a{background-color:#43d854}
.share-btn li.btn-whatsapp a:hover{background-color:#28c039}
.share-btn li a,.share_responsive .show-share .show-more{background-color:#ccc;box-sizing:border-box;display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;height:40px;padding:0;position:relative;text-align:center;text-decoration:none;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;}
.share_responsive .show-share .show-more{line-height:40px;width:100%;float:left;margin:0;top:0;left:0;cursor:pointer;background-color:#2196f3;position:absolute;top:0;left:0;z-index:2}
.share_responsive .show-share .share-text{font-size:16px;width:0%;height:40px;line-height:40px;overflow:hidden;background:#efefef;position:absolute;top:0;right:0;left:10%;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition: width 2s;transition: width 2s;z-index:1}
.share_responsive .show-share:hover{width:100%;}
.share_responsive .show-share:hover .show-more{width:10%;}
.share_responsive .show-share:hover .share-text{width:90%;padding:0 10px;}
.share-btn li a .btn-icon{display:block;cursor:pointer}
.share-btn li a .btn-icon svg,.share_responsive .show-share svg{height:24px;width:24px;vertical-align:middle}
.share-btn li.btn-googleplus a .btn-icon svg{height:30px;width:30px}
.share-btn li.btn-line a .btn-icon svg{height:44px;width:44px}
.share-btn li.share-btn li.btn-line a{padding:0}
.share-btn li.btn-icon,.share-btn li.btn-line a .btn-icon{padding-top:0}
.share-btn li a .btn-icon svg circle,.share-btn li a .btn-icon svg path,.share_responsive .show-share svg path{fill:#fff}
.share-btn li a .btn-text{color:#fff}
.share-btn li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,.25)}
@media screen and (max-width:414px){
.share-btn li a .btn-icon svg,.share_responsive .show-share svg{height:18px;width:18px;vertical-align:middle}
.share-btn li.btn-line a .btn-icon svg{height:38px;width:38px}
}
@media screen and (max-width:375px){
.share-btn li a .btn-icon svg,.share_responsive .show-share svg{height:14px;width:14px;vertical-align:middle}
.share-btn li.btn-googleplus a .btn-icon svg{height:20px;width:20px}
.share-btn li.btn-line a .btn-icon svg{height:30px;width:30px}
.share_responsive,.share_responsive h4,.share-btn,.share-btn li a,.share_responsive .show-share .show-more,.share_responsive .show-share .show-more,.share_responsive .show-share .share-text{height:30px;}
.share-btn li,.share_responsive .show-share .show-more,.share_responsive .show-share .share-text{line-height:30px;}
.share_responsive .show-share .share-text{font-size:12px;}
}
/*]]>*/
</style>
</b:if>Alternatively, you can search for <b:includable and paste ABOVE/BEFORE it (it must be after the <data:post.body/> tag)
<b:includable id='share-btn-responsive' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<div class="share_responsive">
<h4 class='show-share'>
<div class="show-more">
<svg viewBox="0 0 24 24">
<path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" fill="#000000"></path>
</svg>
</div>
<div class="share-text">Share this post, please!</div>
</h4>
<ul class='share-btn'>
<li class='btn-blank'></li>
<li class='btn-facebook'>
<a expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url' target='_blank' title='Share on Facebook'>
<span class='btn-icon'>
<svg viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'><path d='M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z'/></svg>
</span>
</a>
</li>
<li class='btn-twitter'>
<a expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.url' target='_blank' title='Share on Twitter'>
<span class='btn-icon'>
<svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62a15.093 15.093 0 0 1-8.86-2.32c2.702.18 5.375-.648 7.507-2.32a5.417 5.417 0 0 1-4.49-3.64c.802.13 1.62.077 2.4-.154a5.416 5.416 0 0 1-4.412-5.11 5.43 5.43 0 0 0 2.168.387A5.416 5.416 0 0 1 2.89 4.498a15.09 15.09 0 0 0 10.913 5.573 5.185 5.185 0 0 1 3.434-6.48 5.18 5.18 0 0 1 5.546 1.682 9.076 9.076 0 0 0 3.33-1.317 5.038 5.038 0 0 1-2.4 2.942 9.068 9.068 0 0 0 3.02-.85 5.05 5.05 0 0 1-2.48 2.71z'/></svg>
</span>
</a>
</li>
<li class='btn-tumblr'>
<a expr:href='"http://tumblr.com/share/link?url=" + data:post.url + "&name=" + data:post.title + "&description=" + data:post.snippet' target='_blank' title='Share on Tumblr'>
<span class='btn-icon'>
<svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M18.02 21.842c-2.03.052-2.422-1.396-2.44-2.446v-7.294h4.73V7.874H15.6V1.592h-3.714s-.167.053-.182.186c-.218 1.935-1.144 5.33-4.988 6.688v3.637h2.927v7.677c0 2.8 1.7 6.7 7.3 6.6 1.863-.03 3.934-.795 4.392-1.453l-1.22-3.54c-.52.213-1.415.413-2.115.455z'/></svg>
</span>
</a>
</li>
<li class='btn-linkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url' target='_blank' title='Share on Linkedin'>
<span class='btn-icon'>
<svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M25.424 15.887v8.447h-4.896v-7.882c0-1.98-.71-3.33-2.48-3.33-1.354 0-2.158.91-2.514 1.802-.13.315-.162.753-.162 1.194v8.216h-4.9s.067-13.35 0-14.73h4.9v2.087c-.01.017-.023.033-.033.05h.032v-.05c.65-1.002 1.812-2.435 4.414-2.435 3.222 0 5.638 2.106 5.638 6.632zM5.348 2.5c-1.676 0-2.772 1.093-2.772 2.54 0 1.42 1.066 2.538 2.717 2.546h.032c1.71 0 2.77-1.132 2.77-2.546C8.056 3.593 7.02 2.5 5.344 2.5h.005zm-2.48 21.834h4.896V9.604H2.867v14.73z'/></svg>
</span>
</a>
</li>
<li class='btn-pinterest'>
<a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.title' target='_blank' title='Share on Pinterest'>
<span class='btn-icon'>
<svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M14.02 1.57c-7.06 0-12.784 5.723-12.784 12.785S6.96 27.14 14.02 27.14c7.062 0 12.786-5.725 12.786-12.785 0-7.06-5.724-12.785-12.785-12.785zm1.24 17.085c-1.16-.09-1.648-.666-2.558-1.22-.5 2.627-1.113 5.146-2.925 6.46-.56-3.972.822-6.952 1.462-10.117-1.094-1.84.13-5.545 2.437-4.632 2.837 1.123-2.458 6.842 1.1 7.557 3.71.744 5.226-6.44 2.924-8.775-3.324-3.374-9.677-.077-8.896 4.754.19 1.178 1.408 1.538.49 3.168-2.13-.472-2.764-2.15-2.683-4.388.132-3.662 3.292-6.227 6.46-6.582 4.008-.448 7.772 1.474 8.29 5.24.58 4.254-1.815 8.864-6.1 8.532v.003z'/></svg>
</span>
</a>
</li>
<li class='btn-whatsapp'>
<a data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%3A%20" + data:post.url' target='_blank' title='Share on Whatsapp'>
<span class='btn-icon'>
<svg height='90' viewBox='0 0 90 90' width='90' xmlns='http://www.w3.org/2000/svg'><path d='M90 43.84c0 24.214-19.78 43.842-44.182 43.842a44.256 44.256 0 0 1-21.357-5.455L0 90l7.975-23.522a43.38 43.38 0 0 1-6.34-22.637C1.635 19.63 21.415 0 45.818 0 70.223 0 90 19.628 90 43.84zM45.818 6.983c-20.484 0-37.146 16.535-37.146 36.86 0 8.064 2.63 15.533 7.076 21.61l-4.64 13.688 14.274-4.537A37.122 37.122 0 0 0 45.82 80.7c20.48 0 37.145-16.533 37.145-36.857S66.3 6.983 45.818 6.983zm22.31 46.956c-.272-.447-.993-.717-2.075-1.254-1.084-.537-6.41-3.138-7.4-3.495-.993-.36-1.717-.54-2.438.536-.72 1.076-2.797 3.495-3.43 4.212-.632.72-1.263.81-2.347.27-1.082-.536-4.57-1.672-8.708-5.332-3.22-2.848-5.393-6.364-6.025-7.44-.63-1.076-.066-1.657.475-2.192.488-.482 1.084-1.255 1.625-1.882.543-.628.723-1.075 1.082-1.793.363-.718.182-1.345-.09-1.884-.27-.537-2.438-5.825-3.34-7.977-.902-2.15-1.803-1.793-2.436-1.793-.63 0-1.353-.09-2.075-.09-.722 0-1.896.27-2.89 1.344-.99 1.077-3.788 3.677-3.788 8.964 0 5.288 3.88 10.397 4.422 11.113.54.716 7.49 11.92 18.5 16.223 11.01 4.3 11.01 2.866 12.996 2.686 1.984-.18 6.406-2.6 7.312-5.107.9-2.513.9-4.664.63-5.112z'/></svg>
</span>
</a>
</li>
<li class='btn-line'>
<a expr:href='"https://timeline.line.me/social-plugin/share?url=" + data:post.url' target='_blank' title='Share on Line'>
<span class='btn-icon'>
<svg class='icon icons8-LINE' viewBox='0 0 48 48'>
<path d='M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23 C6,39.09,8.91,42,12.5,42z' style='fill:#00C300;'/>
<path d='M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637 c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185 c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001 C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687 C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652 c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688 c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035 c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917 c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603 c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604 c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z' style='fill:#FFFFFF;'/>
</svg>
</span>
</a>
</li>
</ul>
</div>
</b:if>
</b:includable>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='share-btn-responsive'/>
</b:if>DEMO
 |
| photo of share button |
comment below if you have any questions concerning this post.