MASIGNCLEAN102

Share Gadget

Share 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
HTML: Just past this into your side bar or anywhere else you would like it.

<center>
<div class="spsharewid">

<a href='https://www.facebook.com/sharer/sharer.php?u=&amp;quote=' onclick='window.open(&apos;https://www.facebook.com/sharer/sharer.php?u=&apos; + encodeURIComponent(document.URL) + &apos;&amp;quote=&apos; + encodeURIComponent(document.URL)); return false;' target='_blank' title='Share on Facebook'>  <img class='sbsharebtn sbtl' src='https://4.bp.blogspot.com/-Wtjz6HlD7KQ/Ws6yiR2PpBI/AAAAAAAADPc/2nCy2qHsNucdwzr_yJKceD_-X14Lh817QCLcBGAs/s1600/facebook.png' alt="share button icon" onmouseover="this.src='https://1.bp.blogspot.com/-vjd1x3a8h0Q/Ws6wmCTq7OI/AAAAAAAADGE/mwXC407_p5IwpFdLHSQ-ystIvmYnUgo8QCLcBGAs/s1600/facebook.png'" alt="share button icon"onmouseout="this.src='https://4.bp.blogspot.com/-Wtjz6HlD7KQ/Ws6yiR2PpBI/AAAAAAAADPc/2nCy2qHsNucdwzr_yJKceD_-X14Lh817QCLcBGAs/s1600/facebook.png'"    border="0" alt="share button icon"></a> 

<a href='https://twitter.com/intent/tweet?source=&amp;text=:%20' onclick='window.open(&apos;https://twitter.com/intent/tweet?text=&apos; + encodeURIComponent(document.title) + &apos;:%20&apos;  + encodeURIComponent(document.URL)); return false;' target='_blank' title='Tweet'>  <img class='sbsharebtn' src='https://2.bp.blogspot.com/-oiXjfYxp-JU/Ws6yu6UTbDI/AAAAAAAADRI/mgG9YG2_1WIxzcnaOBFY68ZimjEKFG6KACLcBGAs/s1600/twitter.png' alt="share button icon" onmouseover="this.src='https://3.bp.blogspot.com/-Pz6dOgoScMQ/Ws6wwf0CPwI/AAAAAAAADHw/XrfsAKNyX14rAg08oQTXDZ8Ss3I_opsJACLcBGAs/s1600/twitter.png'" alt="share button icon"onmouseout="this.src='https://2.bp.blogspot.com/-oiXjfYxp-JU/Ws6yu6UTbDI/AAAAAAAADRI/mgG9YG2_1WIxzcnaOBFY68ZimjEKFG6KACLcBGAs/s1600/twitter.png'"    border="0" alt="share button icon"></a> 

<a href='https://plus.google.com/share?url=' onclick='window.open(&apos;https://plus.google.com/share?url=&apos; + encodeURIComponent(document.URL)); return false;' target='_blank' title='Share on Google+'>  <img class='sbsharebtn sbtr' src='https://3.bp.blogspot.com/-eh1PH9Mu3UE/Ws6yi7evbXI/AAAAAAAADPo/uG5U_GF-Mi4KaWys4G-UKiKOQCHV5MVRACLcBGAs/s1600/googleplus.png' alt="share button icon" onmouseover="this.src='https://4.bp.blogspot.com/-D0-ZzgmzMY4/Ws6wnruEJkI/AAAAAAAADGQ/7tqzDBOPVMo-SajR6pZIW8Ip80_QHiI-gCLcBGAs/s1600/googleplus.png'" alt="share button icon"onmouseout="this.src='https://3.bp.blogspot.com/-eh1PH9Mu3UE/Ws6yi7evbXI/AAAAAAAADPo/uG5U_GF-Mi4KaWys4G-UKiKOQCHV5MVRACLcBGAs/s1600/googleplus.png'"    border="0" alt="share button icon"></a>  

<a href='http://www.linkedin.com/shareArticle?mini=true&amp;url=&amp;title=&amp;summary=&amp;source=' onclick='window.open(&apos;http://www.linkedin.com/shareArticle?mini=true&amp;url=&apos; + encodeURIComponent(document.URL) + &apos;&amp;title=&apos; +  encodeURIComponent(document.title)); return false;' target='_blank' title='Share on LinkedIn'>  <img class='sbsharebtn' src='https://3.bp.blogspot.com/-81VmyZMuUqY/Ws6yk_JkBVI/AAAAAAAADP4/yzSXz1tqLxMyCdcYl6snRqk8EAw0cudrgCLcBGAs/s1600/linkedin.png' alt="share button icon" onmouseover="this.src='https://2.bp.blogspot.com/-8j8tOL4HWPQ/Ws6woTb1aYI/AAAAAAAADGg/LjxRw8vCzEo4ju5yDdt0RElAjhAmb-lHACLcBGAs/s1600/linkedin.png'" alt="share button icon"onmouseout="this.src='https://3.bp.blogspot.com/-81VmyZMuUqY/Ws6yk_JkBVI/AAAAAAAADP4/yzSXz1tqLxMyCdcYl6snRqk8EAw0cudrgCLcBGAs/s1600/linkedin.png'"    border="0" alt="share button icon"></a> 

<a href='http://pinterest.com/pin/create/button/?url=&amp;description=' onclick='window.open(&apos;http://pinterest.com/pin/create/button/?url=&apos; + encodeURIComponent(document.URL) + &apos;&amp;description=&apos; +  encodeURIComponent(document.title)); return false;' target='_blank' title='Pin it'>  <img class='sbsharebtn' src='https://4.bp.blogspot.com/-KSP1jrTnJIs/Ws6ypeYOWeI/AAAAAAAADQc/lOX-c0cdfZ4M8bD-v09IP--_qIZnLyNwgCLcBGAs/s1600/pinterest.png' alt="share button icon" onmouseover="this.src='https://3.bp.blogspot.com/-6Jzy_NCamp4/Ws6wq3enJnI/AAAAAAAADHE/6GR8qPOLLswZZL2Vb6b7oE4RVFRu5sJPwCLcBGAs/s1600/pinterest.png'" alt="share button icon"onmouseout="this.src='https://4.bp.blogspot.com/-KSP1jrTnJIs/Ws6ypeYOWeI/AAAAAAAADQc/lOX-c0cdfZ4M8bD-v09IP--_qIZnLyNwgCLcBGAs/s1600/pinterest.png'"    border="0" alt="share button icon"></a>  

<a href='http://www.tumblr.com/share?v=3&amp;u=&amp;quote=&amp;s=' onclick='window.open(&apos;http://www.tumblr.com/share?v=3&amp;u=&apos; + encodeURIComponent(document.URL) + &apos;&amp;quote=&apos; +  encodeURIComponent(document.title)); return false;' target='_blank' title='Post to Tumblr'>  <img class='sbsharebtn' src='https://4.bp.blogspot.com/-AlC6LYVrqLw/Ws6yuZNOW7I/AAAAAAAADRE/A68d0b7g11wnCJStUw8Ik3dJXDvnDSyJgCLcBGAs/s1600/tumblr.png' alt="share button icon" onmouseover="this.src='https://4.bp.blogspot.com/-pjXD2Ucl5Ds/Ws6wwPjo9aI/AAAAAAAADHs/o3AW471BbmM0l4YEwxqmS7RHzx3OZf9FgCLcBGAs/s1600/tumblr.png'" alt="share button icon"onmouseout="this.src='https://4.bp.blogspot.com/-AlC6LYVrqLw/Ws6yuZNOW7I/AAAAAAAADRE/A68d0b7g11wnCJStUw8Ik3dJXDvnDSyJgCLcBGAs/s1600/tumblr.png'"    border="0" alt="share button icon"></a> 

<a href='http://www.reddit.com/submit?url=&amp;title=' onclick='window.open(&apos;http://www.reddit.com/submit?url=&apos; + encodeURIComponent(document.URL) + &apos;&amp;title=&apos; +  encodeURIComponent(document.title)); return false;' target='_blank' title='Submit to Reddit'>  <img class='sbsharebtn sbbl' src='https://4.bp.blogspot.com/-FqkV4w5OShY/Ws6yq_uJGyI/AAAAAAAADQo/ATGDmu_PSu0LrI86x1GnEtWi-U23r-28QCLcBGAs/s1600/reddit.png' alt="share button icon" onmouseover="this.src='https://1.bp.blogspot.com/-Co8WYJ9Kv9I/Ws6wsu5uVcI/AAAAAAAADHQ/35tz7fC2o6cHpyqYgihPKioFRv1U0VquQCLcBGAs/s1600/reddit.png'" alt="share button icon"onmouseout="this.src='https://4.bp.blogspot.com/-FqkV4w5OShY/Ws6yq_uJGyI/AAAAAAAADQo/ATGDmu_PSu0LrI86x1GnEtWi-U23r-28QCLcBGAs/s1600/reddit.png'"    border="0" alt="share button icon"></a>  

<a href='mailto:someone@example.com?Subject=See%20What%20I%20Found%20On%20SPADESBERRY.COM' title='Email A Friend'> <img class='sbsharebtn' src='https://3.bp.blogspot.com/-njTbV8ctHrE/Ws6ymdpTtPI/AAAAAAAADQE/gjyU1F42SAwuHSyGH5HSOYWqxEE7UKkswCLcBGAs/s1600/mail.png' alt="share button icon" onmouseover="this.src='https://2.bp.blogspot.com/-0wUsJc0xEcs/Ws6wo98W8uI/AAAAAAAADGs/3U1EgxYZfQw8lTmAsisRuzTWaqc0ZWiUACLcBGAs/s1600/mail.png'" alt="share button icon"onmouseout="this.src='https://3.bp.blogspot.com/-njTbV8ctHrE/Ws6ymdpTtPI/AAAAAAAADQE/gjyU1F42SAwuHSyGH5HSOYWqxEE7UKkswCLcBGAs/s1600/mail.png'"    border="0" alt="share button icon"></a> 

<a href='javascript:void(0)' title='Copy Page URL'><img class='sbsharebtn sbbr btn' src='https://1.bp.blogspot.com/-siJLrwgU5l4/Ws6ykeTEEOI/AAAAAAAADP0/AzQRl3ofSeQ7mqLo7Qcjz0gq2xv5s-J6gCLcBGAs/s1600/link.png' onmouseover="this.src='https://4.bp.blogspot.com/-Or6YvaC78kw/Ws6woGVZIqI/AAAAAAAADGc/PJX3SEjGmsAKLpWuTySNy2wS4aIK0pXpQCLcBGAs/s1600/link.png'" alt="share button icon" onmouseout="this.src='https://1.bp.blogspot.com/-siJLrwgU5l4/Ws6ykeTEEOI/AAAAAAAADP0/AzQRl3ofSeQ7mqLo7Qcjz0gq2xv5s-J6gCLcBGAs/s1600/link.png'"    border="0" alt="share button icon"></a> 

</div></center>
All the social links are already to go. not need to set up links as it will work on any page.
src="" This is the link to the image you would like to see first.
onmouseover="" This would be the link to the image you would like to appear when hovering.
onmouseout="" We need to set the image back to the first one. Just copy the image url from src="". Or be weird and use a third image lol.
target="_blank" just to be sure viewers won't leave your page when sharing.
alt="" Always use alt="TAGS" on images to help with SEO
CSS: Lets add our styles. Just paste this with our HTML or right into the CSS file or part of your site.

<style> 
.spsharewid {width:90%;}

.sbsharebtn {z-index: 8; margin:-3px; width:33.33%; height:auto;transform: rotatey(0deg); -webkit-transform: rotatey(0deg); -moz-transform: rotatey(0deg); -ms-transform: rotatey(0deg); -webkit-transition: all 1.5s;-moz-transition: all 1.5s;transition: all 1.5s;}

.sbsharebtn:hover {z-index: 9; margin:-3px;width:33.33%; height:auto;transform: rotatey(360deg);-webkit-transform: rotatey(360deg); -moz-transform: rotatey(360deg); -ms-transform: rotatey(360deg);transition: all .01s;-webkit-transition: all .01s;-moz-transition: all .01s;}

.sbtl {border-radius:15px 0px 0px 0px;}
.sbtr {border-radius:0px 15px 0px 0px;}
.sbbl {border-radius:0px 0px 0px 15px;}
.sbbr {border-radius:0px 0px 15px 0px;}
</style>
.spsharewid Currently set to a width of 90% to help with looking good in your sidebar. just adjust if needed.
.sbsharebtn Use this to edit each image style before hover.
.sbsharebtn:hover Of course its used to set the style of your hover. you can change these setting with .sbsharebtn to set the way the images flip and the speed.
.sbtl, .sbtr, .sbbl and .sbbr these are to adjust the four corner images. currently just seeting the rounded edge.
Last is to add the script that Copy's the pages URL

<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>
Just past it in your script file or be lazy and paste it anywhere lol.
And That's it. Your done. Comment below if you need help.

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