Blogger Custom Profile

Blogger comes with a Profile (or About Me) gadget. Your display image and a small description about yourself will be shown in this gadget. However, there are few drawbacks with this conventional gadget. Say you have two or more blogs. One for your family, and another one for your work. Your default profile gadget will be the same for both these blogs. You might not want that, as you might prefer to show different information about yourself on each blog. That's when Custom Profile comes to your rescue.

Another scenario. If you have a team blog, your Profile gadget will automatically turn into a contributors-list gadget. If you want to show individual profile gadget for all (or some) of your contributors, you can use this custom profile gadget. Best part of all, it's so easy to add.

On top of that, you can stylize this gadget as you want. With the default profile gadget, you have to settle for this pre-existing unalterable format. With a custom profile gadget, you can give colors to your text, change 'View My Complete Profile' line to something else, position the contents of your profile however you want, underline/bold/blink certain text, insert table in your profile (what?), add border around text, change display image size, and much much more! Your creativity is the limit.

Step 1:

There are few things that you need prepare before adding this gadget.

1) Your Blogger profile address. You can get this by going to Dashboard (old interface) - View Profile. The address of that page is the address of your Blogger profile.
Example:

http://www.blogger.com/profile/15933400802430724429

2) A profile picture. You must upload this picture somewhere and have its address (yes you can upload to one of your posts). If you want to use your existing profile picture, go to Dashboard (old interface) - View Profile - View Full Size - Remove the '-h' from your address (change s220-h to S220)
Example:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7aFq2TfDoXRBdrMiiyvjVcT5QsELLQa2ipqAqw9RBpI0454rN0c154xrelDcVEoAL4j1gPnRvE-u7-nkbFaCESO6-qx-VvzzaMq7nh6e1EZx7L7Nv-5QY-rTDYk5-9DejjSiNmQweo8Q/s220/Mylogo.jpg
.

Step 2:

Now that you have all the information that you need, go add an HTML/Javascript gadget.

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

Choose HTML/Javascript - Paste the following content - make necessary configurations (see below) - Save.

<a href="PROFILE_ADDRESS">
<img width="80" height="80" src="PROFILE_PICTURE" class="profile-img"></a>
<dl class="profile-datablock">
<dt class="profile-data">YOUR_NAME</dt>
<dd class="profile-textblock">PROFILE_DESCRIPTION</dd>
</dl>
<a href="PROFILE_ADDRESS" class="profile-link">View my complete profile</a>

Configurations:

1. Replace PROFILE_ADDRESS in line 1 and 7 with your Blogger Profile Address (see Step 1)
2. Replace PROFILE_PICTURE in line 2 with the address of your profile picture (see Step 1)
3. Replace YOUR_NAME in line 4 with your name
4. Replace PROFILE_DESCRIPTION in line 5 with your description. This is where you input the actual content of your profile. Use <br> to insert a line break (pressing enter will not work).

Here's an example:

<a href="http://www.blogger.com/profile/15933400802430724429">
<img width="80" height="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7aFq2TfDoXRBdrMiiyvjVcT5QsELLQa2ipqAqw9RBpI0454rN0c154xrelDcVEoAL4j1gPnRvE-u7-nkbFaCESO6-qx-VvzzaMq7nh6e1EZx7L7Nv-5QY-rTDYk5-9DejjSiNmQweo8Q/s220/Mylogo.jpg" class="profile-img"></a>
<dl class="profile-datablock">
<dt class="profile-data">YoboY</dt>
<dd class="profile-textblock">Introvert alert. Keep yourself to yourself...
<br><br>
My 2011/12 Wishlist:<br>
1) Transformers DOTM Voyager Class Megatron<br>
2) Transformers DOTM Voyager Class Ironhide<br></dd>
</dl>
<a href="http://www.blogger.com/profile/15933400802430724429" class="profile-link">View my complete profile</a>

You're done! All you have to do now is customize your gadget however you want it to be (or leave it as it is). See below for some of the common HTML/CSS mods that you can add to your custom profile gadget.

Customization:

As I've mentioned before, you can do almost anything as the custom profile gadget uses a HTML/Javascript gadget. Of course, you need to use HTML to make these changes. I'll list some of the common ones here.

Colorize your text:
 Add a span tag before and after the text that you want to colorize. I'll demonstrate this with an example:

<span style="color: yellow;">This text will be yellow.</span>

This is what the above HTML will do:
This text will be yellow.

Align your text:
Add a div tag before and after the text that you want to align. For example:

<div style="text-align: right;">This text will be aligned to right.</div>
<div style="text-align: left;">This text will be aligned to left.</div>
<div style="text-align: center;">This text will be centered.</div>
<div style="text-align: justify;">This text will be justified.</div>

Result:

This text will be aligned to right.

This text will be aligned to left.

This text will be centered.

This text will be justified.

Decorate your text:
You can make your text blink, underlined, overlined or lined-through. Just add a span tag before and after your text. Example:

<span style="text-decoration: blink;">This text will blink.</span>
<span style="text-decoration: underline;">This text will be underlined.</span>
<span style="text-decoration: line-through;">This text will be lined-through.</span>
<span style="text-decoration: overlined;">This text will be overlined.</span>

The results:
This text will blink.
This text will be underlined.
This text will be lined-through.
This text will be overlined.

Adjust your font size:
Again, add a span tag before and after your text. For example:

<span style="font-size: 50%;">This line will be smaller than the rest.</span>
.

Result:
This line will be smaller than the rest.

Add border around text:
As usual, add a span tag before and after your text. For example:

This line will have a solid RED <span style="border: 3px solid red; padding: 1px;">border around its word.</span>
.

Result:
This line will have a solid RED border around its word.

Resize display picture:
Just change the value 80 in both 'width' and height' in the original code and your profile image will be resized accordingly. For example, I have changed the width and height from 80px to 140px in the code below:

<a href="PROFILE_ADDRESS">
<img width="140" height="140" src="PROFILE_PICTURE" class="profile-img"></a>
<dl class="profile-datablock">
<dt class="profile-data">YOUR_NAME</dt>
<dd class="profile-textblock">PROFILE_DESCRIPTION</dd>
</dl>
<a href="PROFILE_ADDRESS" class="profile-link">View my complete profile</a>

If you have particular customization in mind, leave a comment and I will assist you accordingly. Have fun!