Add A Toggle Social Share Buttons Plugin In Blogger Blog
A social share buttons in the blogger blog is used to share the post or article. In this article, I will share jQuery-supported social sharing buttons for non-AMP blog sites.
When the share icon in the lower right corner of the page is clicked, Facebook, Twitter, Google+, and other social sharing buttons are opened and displayed vertically. . Before adding social sharing buttons, let's know about this blogger plugin.
This plugin had eight social share buttons and all the icons are in SVG type.
Follow the steps below to add toggle SVG social sharing buttons to your blog.How to Add Toggle SVG Social Share Buttons to Blog?
1- Use the following CSS codes </head> on your blog's template editor page. Add one line of code above.
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
.ss-btn,.ss_tool,.ss_tool h4{height:50px;width:50px}
.ss_tool{position:fixed;bottom:20px;right:20px;z-index:9999}
.ss-btn,.ss-btn li,.ss_tool h4{position:absolute;bottom:0;margin:0;left:0;padding:0}
.ss_tool h4{z-index:2}
.ss-btn{z-index:1}
.ss-btn:after{clear:both}
.ss-btn:after,.ss-btn:before{content:'';display:table}
.ss-btn li{box-sizing:border-box;height:100%;line-height:50px;list-style:none;transition:all .3s ease-in-out;opacity:0}
.ss-btn li.ss-line a{background:#00c300}
.ss-btn li.ss-facebook a{background:#3d5a9c}
.ss-btn li.ss-tumblr a{background:#37455c}
.ss-btn li.ss-linkedin a{background:#0077b5}
.ss-btn li.ss-twitter a{background:#1da1f2}
.ss-btn li.ss-googleplus a{background:#d64b3f}
.ss-btn li.ss-pinterest a{background:#cb2027}
.ss-btn li.ss-whatsapp a{background:#4dc247}
.ss-btn a:hover {opacity:0.9}
.ss-btn li a,.ss_tool .show-share .show-less,.ss_tool .show-share .show-more{background:#ccc;box-sizing:border-box;display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;height:50px;padding:0;position:relative;text-align:center;text-decoration:none;-webkit-transition:background .2s ease-in-out;transition:background .2s ease-in-out;width:50px;border-radius:100%;box-shadow: 0 2px 4px 0 rgba(0,0,0,.3)}
.ss_tool .show-share .show-less,.ss_tool .show-share .show-more{line-height:50px;margin:0;top:0;left:0;cursor:pointer;background:#0ca8ec}
.ss_tool .show-share .show-less{display:none}
.ss-btn li a .ss-icon{display:block;cursor:pointer}
.ss-btn li a .ss-icon svg{height:34px;width:34px;vertical-align:middle}
.ss_tool .show-share svg {height:24px;width:24px;vertical-align:middle}
.ss-btn li.ss-line a{padding:0}
.ss-btn li.ss-line a .ss-icon{padding-top:0}
.ss-btn li a .ss-icon svg circle,.ss-btn li a .ss-icon svg path{fill:#fff}
.ss_tool .show-share svg {fill:#fff}
.ss-btn li a .ss-text{color:#fff}
.ss-btn li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,.25)}
.ss_tool .show-share .rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-600deg);transform:rotate3d(0,0,1,-600deg);opacity:0}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}
@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-600deg);transform:rotate3d(0,0,1,-600deg);opacity:0}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}
/*]]>*/
</style>
</b:if>Replace right: 20px with the CSS code left: 20px to display the social share buttons in the lower-left corner of the screen.
2- The following jQuery code is </body> Add one line of code above.
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(".ss_tool .show-share .show-more").click(function(){$(".ss_tool .show-share .show-more").hide();$(".ss_tool .show-share .show-less").show();$(".ss-btn li.ss-twitter").css({bottom:"416px",opacity:"1"});$(".ss-btn li.ss-googleplus").css({bottom:"364px",opacity:"1"});$(".ss-btn li.ss-tumblr").css({bottom:"312px",opacity:"1"});$(".ss-btn li.ss-linkedin").css({bottom:"260px",opacity:"1"});$(".ss-btn li.ss-pinterest").css({bottom:"208px",opacity:"1"});$(".ss-btn li.ss-whatsapp").css({bottom:"156px",opacity:"1"});$(".ss-btn li.ss-line").css({bottom:"104px",opacity:"1"});$(".ss-btn li.ss-facebook").css({bottom:"52px",opacity:"1"});});$(".ss_tool .show-share .show-less").click(function(){$(".ss_tool .show-share .show-more").show();$(".ss_tool .show-share .show-less").hide();$(".ss-btn li.ss-facebook,.ss-btn li.ss-twitter,.ss-btn li.ss-googleplus,.ss-btn li.ss-tumblr,.ss-btn li.ss-linkedin,.ss-btn li.ss-pinterest,.ss-btn li.ss-whatsapp,.ss-btn li.ss-line").css({bottom:"0",opacity:"0"})})});
//]]>
</script>
</b:if>3- To add the social share buttons HTML code, find the code below with the help of CTRL+F on your blog's template editor page.
<b:includable id='post' var='post'>
.............
.............
.............
</b:includable>Add the following HTML code one line above the closing code of the above code (found code).
<b:if cond='data:blog.pageType == "item"'>
<div class="ss_tool">
<h4 class='show-share'>
<div class="show-more rotateIn">
<svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>
</div>
<div class="show-less rotateIn">
<svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</div>
</h4>
<ul class='ss-btn'>
<li class='ss-facebook'>
<a expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url' target='_blank' title='Facebook'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="Facebook" alt="Facebook"><path d="M22 5.16c-.406-.054-1.806-.16-3.43-.16-3.4 0-5.733 1.825-5.733 5.17v2.882H9v3.913h3.837V27h4.604V16.965h3.823l.587-3.913h-4.41v-2.5c0-1.123.347-1.903 2.198-1.903H22V5.16z" fill-rule="evenodd"></path></svg>
</span>
</a>
</li>
<li class='ss-twitter'>
<a expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.url' target='_blank' title='Twitter'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="Twitter" alt="Twitter"><path d="M27.996 10.116c-.81.36-1.68.602-2.592.71a4.526 4.526 0 0 0 1.984-2.496 9.037 9.037 0 0 1-2.866 1.095 4.513 4.513 0 0 0-7.69 4.116 12.81 12.81 0 0 1-9.3-4.715 4.49 4.49 0 0 0-.612 2.27 4.51 4.51 0 0 0 2.008 3.755 4.495 4.495 0 0 1-2.044-.564v.057a4.515 4.515 0 0 0 3.62 4.425 4.52 4.52 0 0 1-2.04.077 4.517 4.517 0 0 0 4.217 3.134 9.055 9.055 0 0 1-5.604 1.93A9.18 9.18 0 0 1 6 23.85a12.773 12.773 0 0 0 6.918 2.027c8.3 0 12.84-6.876 12.84-12.84 0-.195-.005-.39-.014-.583a9.172 9.172 0 0 0 2.252-2.336" fill-rule="evenodd"></path></svg>
</span>
</a>
</li>
<li class='ss-googleplus'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank' title='Google+'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="Google+" alt="Google+"><path d="M12 15v2.4h3.97c-.16 1.03-1.2 3.02-3.97 3.02-2.39 0-4.34-1.98-4.34-4.42s1.95-4.42 4.34-4.42c1.36 0 2.27.58 2.79 1.08l1.9-1.83C15.47 9.69 13.89 9 12 9c-3.87 0-7 3.13-7 7s3.13 7 7 7c4.04 0 6.72-2.84 6.72-6.84 0-.46-.05-.81-.11-1.16H12zm15 0h-2v-2h-2v2h-2v2h2v2h2v-2h2v-2z" fill-rule="evenodd"></path></svg>
</span>
</a>
</li>
<li class='ss-tumblr'>
<a expr:href='"https://tumblr.com/share/link?url=" + data:post.url + "&name=" + data:post.title + "&description=" + data:post.snippet' target='_blank' title='Tumblr'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="Tumblr" alt="Tumblr"><path d="M19.59 22.176c-.392.186-1.14.348-1.695.362-1.682.045-2.008-1.18-2.022-2.07V13.93h4.218v-3.18H15.89V5.403h-3.076c-.05 0-.138.044-.15.157-.18 1.636-.947 4.51-4.133 5.66v2.71h2.124v6.862c0 2.35 1.733 5.688 6.308 5.61 1.544-.028 3.258-.674 3.637-1.23l-1.01-2.996" fill-rule="evenodd"></path></svg>
</span>
</a>
</li>
<li class='ss-linkedin'>
<a expr:href='"https://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url' target='_blank' title='Linkedin'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="LinkedIn" alt="LinkedIn"><path d="M26 25.963h-4.185v-6.55c0-1.56-.027-3.57-2.175-3.57-2.18 0-2.51 1.7-2.51 3.46v6.66h-4.182V12.495h4.012v1.84h.058c.558-1.058 1.924-2.174 3.96-2.174 4.24 0 5.022 2.79 5.022 6.417v7.386zM8.23 10.655a2.426 2.426 0 0 1 0-4.855 2.427 2.427 0 0 1 0 4.855zm-2.098 1.84h4.19v13.468h-4.19V12.495z" fill-rule="evenodd"></path></svg>
</span>
</a>
</li>
<li class='ss-pinterest'>
<a expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.title' target='_blank' title='Pinterest'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="Pinterest" alt="Pinterest"><path d="M7 13.252c0 1.81.772 4.45 2.895 5.045.074.014.178.04.252.04.49 0 .772-1.27.772-1.63 0-.428-1.174-1.34-1.174-3.123 0-3.705 3.028-6.33 6.947-6.33 3.37 0 5.863 1.782 5.863 5.058 0 2.446-1.054 7.035-4.468 7.035-1.232 0-2.286-.83-2.286-2.018 0-1.742 1.307-3.43 1.307-5.225 0-1.092-.67-1.977-1.916-1.977-1.692 0-2.732 1.77-2.732 3.165 0 .774.104 1.63.476 2.336-.683 2.736-2.08 6.814-2.08 9.633 0 .87.135 1.728.224 2.6l.134.137.207-.07c2.494-3.178 2.405-3.8 3.533-7.96.61 1.077 2.182 1.658 3.43 1.658 5.254 0 7.614-4.77 7.614-9.067C26 7.987 21.755 5 17.094 5 12.017 5 7 8.15 7 13.252z" fill-rule="evenodd"></path></svg>
</span>
</a>
</li>
<li class='ss-whatsapp'>
<a data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%3A%20" + data:post.url' target='_blank' title='Whatsapp'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="WhatsApp" alt="WhatsApp"><path d="M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" fill-rule="evenodd"></path></svg>
</span>
</a>
</li>
<li class='ss-line'>
<a expr:href='"https://timeline.line.me/social-plugin/share?url=" + data:post.url' target='_blank' title='Line'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="LINE" alt="LINE"><path d="M27 14.926C27 10.006 22.065 6 16 6S5 10.005 5 14.926c0 4.413 3.913 8.11 9.2 8.808.358.077.845.236.968.542.112.278.073.713.036.995l-.157.942c-.048.28-.22 1.088.953.593 1.174-.494 6.334-3.73 8.642-6.386C26.236 18.67 27 16.896 27 14.925zm-4.247-.41a.577.577 0 0 1 0 1.153h-1.61v1.03h1.61a.578.578 0 0 1 0 1.155h-2.186a.578.578 0 0 1-.577-.577v-4.37c0-.32.26-.578.577-.578h2.186a.578.578 0 0 1 0 1.153h-1.61v1.033h1.61zm-3.537 2.762a.575.575 0 0 1-.578.577.58.58 0 0 1-.46-.23l-2.24-3.05v2.703a.577.577 0 0 1-1.154 0v-4.37a.577.577 0 0 1 1.038-.347l2.24 3.05v-2.703a.578.578 0 0 1 1.154 0v4.37zm-5.26 0a.577.577 0 0 1-1.154 0v-4.37a.577.577 0 0 1 1.153 0v4.37zm-2.262.577H9.508a.577.577 0 0 1-.576-.577v-4.37a.577.577 0 0 1 1.153 0V16.7h1.61a.577.577 0 0 1 0 1.155z" fill-rule="evenodd"></path></svg>
</span>
</a>
</li>
</ul>
</div>
</b:if>Make sure your blogger theme had a jQuery script link. If your theme hadn't jQuery link add this jQuery link code in your theme.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>
After completing the above steps correctly, save the template.
Conclusion
Social sharing buttons that can be opened and closed have been added to your blog. You can use the comment form for your comments and questions about the plugin.
Trick Level
Tricklevel.blogspot.com is a blog where we post blogging tips, blogger plugins, AMP, Templates, SEO, HTML CSS & JavaScript project, new awesome tools.
