Create a multi-profile badge for your Blog

Check out another version of this profile badge here. 

I just realized that there is no way to add multiple profile's link on your blog. It is either Google+ profile badge or you have to copy your badge code from other sites like facebook in a widget.
How about we make a custom badge with multiple links to our different profiles.

To do so I am going to use a simple CSS trick to encircle my profile picture and simply add the links to my various profiles.

We are making a profile badge which would end up looking like this

Step 1. We need to define some CSS for the box and list of profiles. Add following code in your CSS.

.profileBadge img {

    border-radius: 50%;

    width: 150px;

    height: 150px;

    margin: auto;

    display: block;

    padding: 5px;

    text-align: center; 

}

.profileBadge li {

text-transform: uppercase;

list-style: none;

line-heigth: 1.4px;

text-align: center; 

padding: 5px;

}

.profileBadge{

border: 1px solid #ddd;

border-radius: 4px;

padding: 5px;

}

Step 2. Since we are using fontawesome here. we need to call that CSS as well. For that add following line just before the </HEAD> in your template.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>

Step 3. Go to page layout and add a gadget of HTML/Javascript. Leave the title part empty if you like and add following code in the next part.

<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>

And change everything with your credits. Your custom profile badge is ready.