MASIGNCLEAN102

Contact Gadget

Contact Gadget for BloggerEveryone needs a way to contact you. so make it easy for them. 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. Plus you can also use it to show your viewer what you look like. 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="sbconnectwid"><a href='yourfacebookurl' target='_blank' title='Connect on Facebook'>  <img class='sbconnectbtn sbtl' src='https://4.bp.blogspot.com/-Wtjz6HlD7KQ/Ws6yiR2PpBI/AAAAAAAADPc/2nCy2qHsNucdwzr_yJKceD_-X14Lh817QCLcBGAs/s1600/facebook.png' alt="connect button icon" onmouseover="this.src='https://1.bp.blogspot.com/-vjd1x3a8h0Q/Ws6wmCTq7OI/AAAAAAAADGE/mwXC407_p5IwpFdLHSQ-ystIvmYnUgo8QCLcBGAs/s1600/facebook.png'" alt="connect button icon"onmouseout="this.src='https://4.bp.blogspot.com/-Wtjz6HlD7KQ/Ws6yiR2PpBI/AAAAAAAADPc/2nCy2qHsNucdwzr_yJKceD_-X14Lh817QCLcBGAs/s1600/facebook.png'"    border="0" alt="connect button icon"></a> 

<a href='yourtwitterurl' target='_blank' title='Connect on Twitter'>  <img class='sbconnectbtn' src='https://2.bp.blogspot.com/-oiXjfYxp-JU/Ws6yu6UTbDI/AAAAAAAADRI/mgG9YG2_1WIxzcnaOBFY68ZimjEKFG6KACLcBGAs/s1600/twitter.png' alt="connect button icon" onmouseover="this.src='https://3.bp.blogspot.com/-Pz6dOgoScMQ/Ws6wwf0CPwI/AAAAAAAADHw/XrfsAKNyX14rAg08oQTXDZ8Ss3I_opsJACLcBGAs/s1600/twitter.png'" alt="connect button icon"onmouseout="this.src='https://2.bp.blogspot.com/-oiXjfYxp-JU/Ws6yu6UTbDI/AAAAAAAADRI/mgG9YG2_1WIxzcnaOBFY68ZimjEKFG6KACLcBGAs/s1600/twitter.png'"    border="0" alt="connect button icon"></a> 

<a href='yourgoogleurl' target='_blank' title='Connect on Google+'>  <img class='sbconnectbtn sbtr' src='https://3.bp.blogspot.com/-eh1PH9Mu3UE/Ws6yi7evbXI/AAAAAAAADPo/uG5U_GF-Mi4KaWys4G-UKiKOQCHV5MVRACLcBGAs/s1600/googleplus.png' alt="connect button icon" onmouseover="this.src='https://4.bp.blogspot.com/-D0-ZzgmzMY4/Ws6wnruEJkI/AAAAAAAADGQ/7tqzDBOPVMo-SajR6pZIW8Ip80_QHiI-gCLcBGAs/s1600/googleplus.png'" alt="connect button icon"onmouseout="this.src='https://3.bp.blogspot.com/-eh1PH9Mu3UE/Ws6yi7evbXI/AAAAAAAADPo/uG5U_GF-Mi4KaWys4G-UKiKOQCHV5MVRACLcBGAs/s1600/googleplus.png'"    border="0" alt="connect button icon"></a>  

<a href='youryoutubeurl' target='_blank' title='Connect on YouTube'>  <img class='sbconnectbtn' src='https://2.bp.blogspot.com/-60HgPmg82kg/Ws6yxpeGkiI/AAAAAAAADRc/mP2QM3SoCJgZrbLaaJBaaQ95Lw9BqUvYQCLcBGAs/s1600/youtube.png' alt="connect button icon" onmouseover="this.src='https://1.bp.blogspot.com/-G4eLC7nhlVc/Ws6wyoy0B7I/AAAAAAAADIE/w8mbANF5P_UQCcgOtbWd4qXDFnEhh7Q8wCLcBGAs/s1600/youtube.png'" alt="connect button icon"onmouseout="this.src='https://2.bp.blogspot.com/-60HgPmg82kg/Ws6yxpeGkiI/AAAAAAAADRc/mP2QM3SoCJgZrbLaaJBaaQ95Lw9BqUvYQCLcBGAs/s1600/youtube.png'"    border="0" alt="connect button icon"></a> 

<img class='sbconnectpro' src='https://4.bp.blogspot.com/-japmAopFyJs/WxSeuFvB1qI/AAAAAAAAFDY/Bk5DPmq4V7Mk40nvXa2D1YtAkFxA4FVAQCLcBGAs/s1600/toppic.png' border="0" alt="picture of me">

<img class='sbconnectbtn' src='https://4.bp.blogspot.com/-AlC6LYVrqLw/Ws6yuZNOW7I/AAAAAAAADRE/A68d0b7g11wnCJStUw8Ik3dJXDvnDSyJgCLcBGAs/s1600/tumblr.png' border="0" alt="connect button icon">

<a href='yourinstagramurl' target='_blank' title='Connect on Instagram'>  <img class='sbconnectbtn' src='https://1.bp.blogspot.com/-zfAJij1pyzY/Ws6ykIbUhDI/AAAAAAAADPw/0IzesCFpAgYYLl7ENjA1azVQHW-5brtvQCLcBGAs/s1600/instagram.png' alt="connect button icon" onmouseover="this.src='https://4.bp.blogspot.com/-DOKy9lBteC0/Ws6woOnN2II/AAAAAAAADGY/7_kDbuUFLz8r1-bAvcMcdROpdx5LX20qgCLcBGAs/s1600/instagram.png'" alt="connect button icon"onmouseout="this.src='https://1.bp.blogspot.com/-zfAJij1pyzY/Ws6ykIbUhDI/AAAAAAAADPw/0IzesCFpAgYYLl7ENjA1azVQHW-5brtvQCLcBGAs/s1600/instagram.png'"    border="0" alt="connect button icon"></a>

<a href='yourpinteresturl' target='_blank' title='Connect on Pinterest'><img class='sbconnectbtn sbbl' src='https://4.bp.blogspot.com/-KSP1jrTnJIs/Ws6ypeYOWeI/AAAAAAAADQc/lOX-c0cdfZ4M8bD-v09IP--_qIZnLyNwgCLcBGAs/s1600/pinterest.png' onmouseover="this.src='https://3.bp.blogspot.com/-6Jzy_NCamp4/Ws6wq3enJnI/AAAAAAAADHE/6GR8qPOLLswZZL2Vb6b7oE4RVFRu5sJPwCLcBGAs/s1600/pinterest.png'" alt="connect button icon" onmouseout="this.src='https://4.bp.blogspot.com/-KSP1jrTnJIs/Ws6ypeYOWeI/AAAAAAAADQc/lOX-c0cdfZ4M8bD-v09IP--_qIZnLyNwgCLcBGAs/s1600/pinterest.png'"    border="0" alt="connect button icon"></a> 

<a href='yourlinkedinurl' target='_blank' title='Connect on LinkedIn'>  <img class='sbconnectbtn' src='https://3.bp.blogspot.com/-81VmyZMuUqY/Ws6yk_JkBVI/AAAAAAAADP4/yzSXz1tqLxMyCdcYl6snRqk8EAw0cudrgCLcBGAs/s1600/linkedin.png' alt="connect button icon" onmouseover="this.src='https://2.bp.blogspot.com/-8j8tOL4HWPQ/Ws6woTb1aYI/AAAAAAAADGg/LjxRw8vCzEo4ju5yDdt0RElAjhAmb-lHACLcBGAs/s1600/linkedin.png'" alt="connect button icon"onmouseout="this.src='https://3.bp.blogspot.com/-81VmyZMuUqY/Ws6yk_JkBVI/AAAAAAAADP4/yzSXz1tqLxMyCdcYl6snRqk8EAw0cudrgCLcBGAs/s1600/linkedin.png'"    border="0" alt="connect button icon"></a>   

<a href='mailto:admin@spadesberry.com?Subject=I%20was%20on%20your%20site%20and%20wanted%20to%20connect' title='Email Me'> <img class='sbconnectbtn sbbr' src='https://3.bp.blogspot.com/-njTbV8ctHrE/Ws6ymdpTtPI/AAAAAAAADQE/gjyU1F42SAwuHSyGH5HSOYWqxEE7UKkswCLcBGAs/s1600/mail.png' alt="connect button icon" onmouseover="this.src='https://2.bp.blogspot.com/-0wUsJc0xEcs/Ws6wo98W8uI/AAAAAAAADGs/3U1EgxYZfQw8lTmAsisRuzTWaqc0ZWiUACLcBGAs/s1600/mail.png'" alt="connect button icon"onmouseout="this.src='https://3.bp.blogspot.com/-njTbV8ctHrE/Ws6ymdpTtPI/AAAAAAAADQE/gjyU1F42SAwuHSyGH5HSOYWqxEE7UKkswCLcBGAs/s1600/mail.png'"    border="0" alt="connect button icon"></a> </div></center>
'yourfacebookurl', 'yourtwitterurl', 'yourgoogleurl', 'youryoutubeurl', 'yourinstagramurl', 'yourpinteresturl' and 'yourlinkedinurl' Paste all of your Social Links here
Mail Button Change admin@spadesberry.com to your email. If you would like to chage the email subject just be sure to use %20 as space between words
img class='sbconnectpro' Change this URL to the image of yourself.
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> 
.sbconnectwid {width:90%;}

.sbconnectpro {z-index: 4; margin:-8%; width:43.33%; height:auto;border:solid 2px #d4d4d4;border-radius:50%;box-shadow: 0px 0px 0px 2px #424242;-moz-box-shadow: 0px 0px 0px 2px #424242;-webkit-box-shadow: 0px 0px 0px 2px #424242;position: absolute;}

@media only screen and (max-width: 190px){ .sbconnectpro {margin:-9%;}}

.sbconnectbtn {z-index: 2; 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;}

.sbconnectbtn:hover {z-index: 3; 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>

.sbconnectwid Currently set to a width of 90% to help with looking good in your sidebar. just adjust if needed.
.sbconnectpro This will chage the size of your picture. Also set the margin:-8%; untill its centered if needed.
@media only screen and (max-width: 190px){ .sbconnectpro {margin:-9%;}} set the if the image changes from centered on other screen types .sbconnectbtn Use this to edit each image style before hover.
.sbconnectbtn: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.
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