Connect Window Gadget

connect window Gadget for BloggerConnect Window is a great way for people to connect with you, contact you and read more about you.

It also gives users away to see what you look like and allows you to choose a cool image that suits your Blog or Website style.

spadesberry logo for contact window image of mike coleman spadesberry
Welcome to My Blog.
Feel free to request anything and i will make it happen :)
View where the name came from: SPADESBERRY
Copy The Full Code To Clipboard

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

<link rel="stylesheet" href="">

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

<div id="contactsb">
<img src="" alt="spadesberry logo for contact window" id="contactbg" />

<span class="fa-stack fa-2x" id="msgstack">
  <i class="fa fa-circle fa-stack-2x fa-5x"></i>
  <a href="" target="_blank" title="Contact Me"><i class="fa fa-comments fa-stack-1x fa-inverse" id="msgicon"></i></a></span>
<img src="" alt="image of mike coleman spadesberry" id="contactpropic" />

<span class="fa-stack fa-2x" id="plusstack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <a href="" target="_blank" title="More About Me"><i class="fa fa-plus fa-stack-1x fa-inverse" id="plusicon"></i></a></span>
<span id="sbtexcon">
<br/>Welcome to My Blog.
<br/>Feel free to request anything and i will make it happen :)
<br/>View where the name came from:
<a href="" target="_blank" id="spadesread">SPADESBERRY</a></span>
<div class="sbshbor">
<a class="sbbtt1 sbico2 fa fa-facebook"  href="#" target="_blank" title="Connect On Facebook"></a>
<a class="sbbtt2 sbico2 fa fa-twitter"  href="#" target="_blank" title="Connect On Twitter"></a>
<a class="sbbtt3 sbico2 fa fa-linkedin"  href="#" target="_blank" title="Connect On LinkedIn"></a>
<a class="sbbtt4 sbico2 fa fa-google-plus"  href="#" target="_blank" title="Connect On Google+"></a>
<a class="sbbtt5 sbico2 fa fa-pinterest-p"  href="#" target="_blank" title="Connect On Pinterest"></a>
<a class="sbbtt6 sbico2 fa fa-youtube-play"  href="#" target="_blank" title="Connect On YouTube"></a>

href=: You just need to paste your social links here. Don't forget the contact link and more info button.
target="_blank": This will open the page in a new tab. Remove it if you would like to stay in the same window.
title="Connect On": The text that appears when hovering. Set it to say anything you like.
Last: Change the text to say anything you like and keep a link with your info or remove it.
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.

#contactsb {background-color: #f7f7f7;
    border: 4px solid #fff;
    border-radius: 14px;
    box-shadow: 0 2px 2px 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);margin-bottom: 20px;max-width:500px;min-width:270px;}
#contactbg {background-color: #fff;
    border-radius: 12px 12px 0px 0px;
    box-shadow: 0 2px 2px 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); width:100%;}

#msgstack {margin-top: -45px;padding-right: 20px;}
#msgicon {color: #4c4c4c; font-size:40px;text-shadow: -.2px -.2px .2px #4c4c4c, .2px -.2px .2px #4c4c4c, -.2px .2px .2px #4c4c4c, .2px .2px .2px #4c4c4c;}
#plusstack {margin-top: -45px;padding-left: 20px;}
#plusicon {color: #4c4c4c; font-size:40px;text-shadow: -.2px -.2px .2px #4c4c4c, .2px -.2px .2px #4c4c4c, -.2px .2px .2px #4c4c4c, .2px .2px .2px #4c4c4c;}

#msgicon:hover {color:#70c8ff;text-shadow: -.2px -.2px .2px #70c8ff, .2px -.2px .2px #70c8ff, -.2px .2px .2px #70c8ff, .2px .2px .2px #70c8ff}
#plusicon:hover {color:#ffa686;text-shadow: -.2px -.2px .2px #ffa686, .2px -.2px .2px #ffa686, -.2px .2px .2px #ffa686, .2px .2px .2px #ffa686}

.fa.fa-circle {
    color: #f7f7f7;font-size: 65px;
    text-shadow: -1px -1px .5px #f7f7f7, 1px -1px .5px #f7f7f7, -1px 1px .5px #f7f7f7, 1px 1px .5px #f7f7f7;}

#contactpropic {height: 80px;
    border-radius: 100%;
    border: 2px solid #fff;
    margin-top: -53px;}
#spadesread {-webkit-text-fill-color: #0000cd;text-decoration: none;}
#spadesread:hover {-webkit-text-fill-color: #75d4ff;text-decoration: none;}

#sbtexcon {font-size:13px;-webkit-text-fill-color: #4c4c4c;}

.sbshbor {border-top: 4px solid #fff;margin-top:6px;margin-bottom:-5px;}

.sbico2 {width:14%;height:50px;color:#4c4c4c;font-size:26px!important;text-decoration: none;line-height: 50px!important;}

.sbbtt1:hover {color:#4267b2!important;-webkit-text-fill-color: #4267b2;}
.sbbtt2:hover {color:#1da1f2!important;-webkit-text-fill-color: #1da1f2;}
.sbbtt3:hover {color:#007bb5!important;-webkit-text-fill-color: #007bb5;}
.sbbtt4:hover {color:#db4437!important;-webkit-text-fill-color: #db4437;}
.sbbtt5:hover {color:#bd081c!important;-webkit-text-fill-color: #bd081c;}
.sbbtt6:hover {color:#ff0000!important;-webkit-text-fill-color: #ff0000;}

#contactsb: Styles the full container. Width, Border, Background color, Border radius and Shadow
#contactbg: Adds a shadow and border radius to the top picture.
#msgstack: Sets the width from the profile picture.
#msgicon: Used for the color and size of the Contact button.
#plusstack: Sets the width from the profile picture.
#plusicon: Used for the color and size of the More Info button.
.fa.fa-circle: Needed for the background color of the Contact and More Info buttons.
#contactpropic: Adjusts the profile picture size and border.
.sbshbor: Adds the white spacing above the connect buttons.
.sbico2: Sets the size, width and height of the connect button at the bottom.
#spadesread: This is the color and style of the link wound in the text.
#sbtexcon: Used to edit the style and color of the text.
#msgicon:hover: Change the color of the Contact button on hover.
#plusicon:hover: Change the color of the More Info button on hover.
.sbbtt1-6:hover: Styles the hover of each connect buttons at the bottom.
#spadesread:hover: change the color of the link in description when hovering.

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