Custom Profile Badge 2 inspired by Linked In

Abhay Singh
9 Apr, 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-radius: 50%;
  2. width: 150px;
  3. height: 150px;
  4. margin: auto;
  5. display: block;
  6. padding: 5px;
  7. text-align: center;
}
.profileBadge li {
  1. text-transform: uppercase;
  2. list-style: none;
  3. line-heigth: 1.4px;
  4. text-align: center;
  5. padding: 5px;
}
.profileBadge {
  1. border: 1px solid #ddd;
  2. border-radius: 4px;
  3. padding: 5px;
  4. background-repeat: no-repeat;
  5. background-image: url(http://yourCoverImageUrl.com/image.jpg);
  6. background-size: 100%;
  7. background-position: 0% -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.

Next Post Previous Post
No Comment
Add Comment
comment url