MASIGNCLEAN102

Share Bar Gadget

Share Bar Gadget for BloggerThought i would design a gadget for sharing your blog. As easy as pasting it into your sidebar.

It's not just clean but also smooth and moderate. Didn't take to long to setup and is very easy to edit. If you have any troubles please let me know and i will be happy to assist. Enjoy and be sure to check out more great free stuff.


  • Instructions and Editing
Let's add FontAwesome to the <head> of your site if you don't already have it.
This gives us the icons we need.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

HTML: Just past this into your side bar or anywhere else you would like it.

<center>
<div class="sbsharbar">
<a class="sbshar1 sbsharma fa fa-facebook"  href="https://www.facebook.com/sharer/sharer.php?u=&amp;quote=" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&amp;quote=' + encodeURIComponent(document.URL)); return false;" target="_blank" title="Share On Facebook"></a>
<a class="sbshar2 sbsharma fa fa-twitter"  href="https://twitter.com/intent/tweet?source=&amp;text=:%20" onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + ':%20'  + encodeURIComponent(document.URL)); return false;" target="_blank"  title="Share On Twitter"></a>
<a class="sbshar3 sbsharma fa fa-linkedin"  href="http://www.linkedin.com/shareArticle?mini=true&amp;url=&amp;title=&amp;summary=&amp;source=" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&amp;url=' + encodeURIComponent(document.URL) + '&amp;title=' +  encodeURIComponent(document.title)); return false;" target="_blank" title="Share On LinkedIn"></a>
<a class="sbshar4 sbsharma fa fa-google-plus"  href="https://plus.google.com/share?url=" onclick="window.open('https://plus.google.com/share?url=' + encodeURIComponent(document.URL)); return false;" target="_blank" title="Share On Google+"></a>
<a class="sbshar5 sbsharma fa fa-pinterest-p"  href="http://pinterest.com/pin/create/button/?url=&amp;description=" onclick="window.open('http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.URL) + '&amp;description=' +  encodeURIComponent(document.title)); return false;" target="_blank" title="Share On Pinterest"></a>

<a class="sbshar6 sbsharma fa fa-link btn"  href="javascript:void(0)" title="Copy Page URL"></a>
</div></center>

href=: You can find this URL on most Social Networks. Some have URL Scripts that pickup the URL for you.
target="_blank": this will open the page in a new tab. Remove it if you would like to stay in the same window.
title="Share On": The text that appears when hovering. Set it to say anything you like.
fa-????: The Font Awesome icons. Find others HERE. if needed.

CSS: Lets add our styles. Just paste this with our HTML or right into the CSS file or part of your site.

<style>
.sbsharbar {width:100%;box-shadow: 0 2px 3px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);display: inline-flex;border-radius:12px;}

.sbshar1 {background-color:#4267b2;color:#fff;border-bottom:2px solid #34518d;border-top:2px solid #34518d;border-right:1px solid #eee;border-left: 2px solid #34518d;margin-right:-2px;border-radius: 10px 0px 0px 10px;}

.sbshar2 {background-color:#1da1f2;color:#fff;border-bottom:2px solid #0c85d0;border-top:2px solid #0c85d0;border-right:1px solid #1da1f2;border-left: 1px solid #eee;margin-left:-2px;margin-right:-2px;}

.sbshar3 {background-color:#007bb5;color:#fff;border-bottom:2px solid #005882;border-top:2px solid #005882;border-right:1px solid #eee;border-left: 1px solid #eee;margin-left:-2px;margin-right:-2px;}

.sbshar4 {background-color:#db4437;color:#fff;border-bottom:2px solid #bd2e22;border-top:2px solid #bd2e22;border-right:1px solid #eee;border-left: 1px solid #eee;margin-left:-2px;margin-right:-2px;}

.sbshar5 {background-color:#bd081c;color:#fff;border-bottom:2px solid #8c0615;border-top:2px solid #8c0615;border-right:1px solid #eee;border-left: 1px solid #eee;margin-left:-2px;margin-right:-2px;}

.sbshar6 {background-color:#ff5402;color:#fff;border-bottom:2px solid #ce4300;border-top:2px solid #ce4300;border-right:2px solid #ce4300;border-left: 1px solid #eee;margin-left:-2px;border-radius: 0px 10px 10px 0px;}

.sbsharma {width:inherit;height:50px;font-size:26px!important;text-decoration: none;line-height: 50px!important;}

.sbshar1:hover {color:#4267b2!important;-webkit-text-fill-color: #4267b2;background-color:#fff;
border-bottom:2px solid #eee;border-top:2px solid #eee;border-right:1px solid #eee;border-left: 2px solid #eee;}
.sbshar2:hover {color:#1da1f2!important;-webkit-text-fill-color: #1da1f2;background-color:#fff;
  border-bottom:2px solid #eee;border-top:2px solid #eee;border-right:1px solid #eee;border-left: 1px solid #eee;}
.sbshar3:hover {color:#007bb5!important;-webkit-text-fill-color: #007bb5;background-color:#fff;
  border-bottom:2px solid #eee;border-top:2px solid #eee;border-right:1px solid #eee;border-left: 1px solid #eee;}
.sbshar4:hover {color:#db4437!important;-webkit-text-fill-color: #db4437;background-color:#fff;
  border-bottom:2px solid #eee;border-top:2px solid #eee;border-right:1px solid #eee;border-left: 1px solid #eee;}
.sbshar5:hover {color:#bd081c!important;-webkit-text-fill-color: #bd081c;background-color:#fff;
  border-bottom:2px solid #eee;border-top:2px solid #eee;border-right:1px solid #eee;border-left: 1px solid #eee;}
.sbshar6:hover {color:#ff0000!important;-webkit-text-fill-color: #ff5402;background-color:#fff;
  border-bottom:2px solid #eee;border-top:2px solid #eee;border-right:2px solid #eee;border-left: 1px solid #eee;}

</style>

.sbsharbar: This is the container everything is set inside. The Width is set to 100% to fit into other elements like your side bar.
.sbsharma: Use this to set the button height, font size and font line height.
.sbshar1-6: This styles each buttons font color, border and background color.
.sbshar1-6:hover: Used to change the button styles on hover.

If you are looking to use the Copy URL Button you will need to add this Script. Just paste it with the HTML or right into your websites Script File.

<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js'/></script>
<script>

var url = document.location.href;

new Clipboard('.btn', {
  text: function() {
    return url;
  }
});</script>

And That's it. Your done. Comment below if you need help.


Copy The Full Code To Clipboard

Copy The Full Code To Clipboard

Copy The Full Code To Clipboard

Copy The Full Code To Clipboard

Thanks for stopping by. smile emoji
Please view our Terms of Use before using for any type of commercial use.
Thanks for being you! Come back for more great stuff monkey emoji
bell notification