Custom Profile Badge 2 inspired by Linked In

By | April 9, 2017

Previously we had made a multi-profile badge which you can find here.

Now comes the version two of this badge. Which is nothing but the same badge with a cover background. Honestly it’s just a rip off of LinkedIn profile badges. But since they are limited to LinkedIn, you can use this profile badge to meet your need.

Output of this post will be a profile badge that looks something like this,

Since this is basically a modified version of the previous profile badge we are going to reuse the same code.

Step 1. Define the CSS for circular image, then a CSS for list of links, and then the badge border and a background cover which is nothing but a background image positioned properly.

.profileBadge img {
  1. border-radius50%;
  2. width150px;
  3. height150px;
  4. marginauto;
  5. displayblock;
  6. padding5px;
  7. text-aligncenter;
}
.profileBadge li {
  1. text-transformuppercase;
  2. list-stylenone;
  3. line-heigth1.4px;
  4. text-aligncenter;
  5. padding5px;
}
.profileBadge {
  1. border1px solid #ddd;
  2. border-radius4px;
  3. padding5px;
  4. background-repeatno-repeat;
  5. background-imageurl(http://yourCoverImageUrl.com/image.jpg);
  6. background-size100%;
  7. background-position0% -20%;
}
Step 2. This badge uses font awesome, include following link to font awesome css.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"/>

If you are not sure how to use font awesome further, go here.

Step 3. Go to page layout and add a gadget of HTML/Javascript. If you’re on WordPress you need to create a Text Widget and add the following.
<div class="profileBadge">
<img src="YOUR_PROFILE_PICTURE.png" alt="profile_picture" width="200" height="200" />
<p align='center'>Whatever you want to say goes here..</p>
<li><i class='fa fa-google-plus'></i> <a href="http://plus.google.com/u/0/+YOUR_USER_ID">YOUR_USER_ID</a></li>
<li><i class='fa fa-instagram'></i> <a href="http://instagram.com/YOUR_USER_ID">YOUR_USER_ID</a></li>
<li><i class='fa fa-facebook'></i> <a href="http://facebook.com/YOUR_USER_ID">YOUR_USER_ID</a></li>
</div>
With a little modification to the code above you can also make it look like this,

What I did was just included the icon and link in the same link row. 
That’s it.

And in case you are wondering what is that image I am using as cover. It’s Blink from X-men Days of Future Past fighting the Sentinels.
I’m using a smaller version of this image, just to reduce the load on my visitors. Let me know your thoughts.

Leave a Reply

Your email address will not be published. Required fields are marked *