MASIGNCLEAN102

Contact Bar Gadget

Contact Bar 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.

image of mike coleman spadesberry

  • 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="sbconbar">
<a class="sbcon1 sbconma fa fa-facebook"  href="#" target="_blank" title="Connect On Facebook"></a>
<a class="sbcon2 sbconma fa fa-twitter"  href="#" target="_blank" title="Connect On Twitter"></a>
<a class="sbcon3 sbconma fa fa-linkedin"  href="#" target="_blank" title="Connect On LinkedIn"></a>
<div><img class="sbconpro" src="https://4.bp.blogspot.com/-56omcUqVkV8/WyhigmUP0dI/AAAAAAAAFQk/B8zEcPUxib8cj6KUM5FX1yo9b5pywjsVwCPcBGAYYCw/s250/toppic.png" alt="image of mike coleman spadesberry"></div>
<a class="sbcon4 sbconma fa fa-google-plus"  href="#" target="_blank" title="Connect On Google+"></a>
<a class="sbcon5 sbconma fa fa-pinterest-p"  href="#" target="_blank" title="Connect On Pinterest"></a>
<a class="sbcon6 sbconma fa fa-envelope"  href="mailto:youremail@example.com?Subject=this%20is%20your%20subject%20line" title="Email Us"></a>
</div></center>

href=: You just need to paste your social links here.
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.
Mail Button: Change youremail@example.com to your email. If using email subject just be sure to use %20 as space between words.
img src="link": Replace the image link with yours and change the image ALT tag to you.
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>
.sbconpro {width: 90px;
    border-radius: 100%;
    margin-top: -22px;
    margin-bottom: -23px;
    z-index: 10;
    position: relative;
    border: 2px solid #eee;
    margin-left: -8px;
    margin-right: -8px;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);}

.sbconbar {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;margin-top:16px;margin-bottom:16px;}

.sbcon1 {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;}

.sbcon2 {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;}

.sbcon3 {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;}

.sbcon4 {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;}

.sbcon5 {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;}

.sbcon6 {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;}

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

.sbcon1: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;}
.sbcon2: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;}
.sbcon3: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;}
.sbcon4: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;}
.sbcon5: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;}
.sbcon6: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>

.sbconbar: This is the container everything is set inside. The Width is set to 100% to fit into other elements like your side bar. you can change the top and bottom margin if you want the image to overlap another element.
.sbconma: Use this to set the button height, font size and font line height.
.sbcon1-6: This styles each buttons font color, border and background color.
.sbcon1-6:hover: Used to change the button styles on hover.
.sbconpro: You're image style. Used for border and setting the image where you need it.

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

image of mike coleman spadesberry

Copy The Full Code To Clipboard
image of mike coleman spadesberry

Copy The Full Code To Clipboard
image of mike coleman spadesberry

Copy The Full Code To Clipboard
image of mike coleman spadesberry

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