Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Monday, January 3, 2011

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:
http://4.bp.blogspot.com/_VZprIDHV4-Q/SmFlfAtk4DI/AAAAAAAAAAk/CDO3yXr7vOY/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="http://4.bp.blogspot.com/_VZprIDHV4-Q/SmFlfAtk4DI/AAAAAAAAAAk/CDO3yXr7vOY/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!

36 comments:

  1. Thank You, YoboY. I was thinking the same thing. But, then, I haven't the foggiest about CSS and Javascript. I'm sure glad you do.

    ReplyDelete
  2. I've only known CSS and HTML for 2-3 months or so. I have not received any formal education on them, and I self-taught them to myself. I believe anyone can do it too. It's not that difficult to learn. This is a good website to polish your CSS skill:
    CSS Tutorial

    Same goes for HTML. You can try some of the basic ones with the help of some online tutorials. Can't say the same about Javascript though. But you won't be using much of that in Blogger, so it's not really an essential toy.

    ReplyDelete
  3. Got that all done up.

    www.luxeboulevard.blogspot.com

    ReplyDelete
  4. @Stephanie {Luxe Boulevard}: Glad you're finding these posts helpful. Cheers.

    ReplyDelete
  5. Does this mean that after creating a custom profile gadget, when I post on my blog it will show the profile name I just made up? That's what I want to do so I have different profile names depending on which of my blogs I'm posting on. One is for fun and one is for business. Thanks!

    ReplyDelete
  6. @Anon: Nope, it doesn't work that way. This custom profile is for cosmetic only.

    If you're the only author is your blogs, then in one of your blogs, say your business blog, you can hard-code your name directly into your template. That way the hard-coded name will appear each time you post something, regardless of what your profile name is. Simply go to Dashboard - Design - Edit HTML - Expand Widget Templates - Find for <data:post.author/> - replace that tag with your name. You may need to do this few times as there are more than one <data:post.author/> tag in your template (for 'posted-by', 'comments' and so on)

    ReplyDelete
  7. It's me, Anon! You are awesome! That worked perfectly. That is, assuming it doesn't list my hard-coded name for everyone who posts! I'll have to test that. Likewise comments. Anyway, that was the simplest explanation I've seen anywhere, and will make it possible for me to maintain two blogger blogs for very different purposes. THANKS!

    ReplyDelete
  8. @Anon: Sure thing. Give it a try. As long as you're the sole-author of your blog, this method should work fine.

    Cheers.

    ReplyDelete
  9. Okay, I like that. Here's what I need now: I want to truncate what i wrote in "about us" (it's quite lengthy) and have a READ MORE button (to replace the VIEW MY PROFILE button) which links to the profile page or, even better, another static page.

    Also, is there a way to modify my profile page so it doesn't have the plain blogger look.

    ReplyDelete
  10. @GJE: I see you've already done that. You're exactly on the right path. As for the Blogger profile page, unfortunately, it is not something we can control. That is why I've totally replaced my profile page's link with my custom profile page.

    ReplyDelete
  11. Any way to make line breaks work in the standard Blogger Profile text box? I see lots of questions over several years about it but nothing for sure.
    definitely doesn't.

    ReplyDelete
  12. @Hank Roberts: I see lots of questions over several years about it but nothing for sure.

    Your search ends here. I have line breaks in my standard profile box. Have a look:
    http://yoboy-testblog7.blogspot.com/

    Just use <br> for a single line break, or <br> for double line break.

    Cheers.

    ReplyDelete
  13. Thank you for this tutorial, it is really easy to understand! But how do you make your image round instead of square using css/html?

    ReplyDelete
    Replies
    1. Hi Layla,

      You need the cut the corners off of your image to make it round - it can be done. But the code depends on where the image is located. Are you referring to your post images, sidebar images or all the images in your blog?

      Delete
    2. I'm referring to my sidebar images, the one for the blogger custom profile.

      - Layla

      Delete
    3. Hi Layla,

      Here, use this:

      .profile-img{
      -moz-border-radius: 100px !important;
      -webkit-border-radius: 100px !important;
      -goog-ms-border-radius: 100px !important;
      border-radius: 100px !important;
      }

      Cheers :)

      Delete
    4. Thank you, it works perfectly! :)

      - Layla

      Delete
  14. Hi Yoga. I went to edit my custom profile to put a new image in, put the image doesn't show up! Can you please tell me how to solve the problem?

    ReplyDelete
    Replies
    1. Hi Akisame,

      Something looks off in your code. I think you've accidentally swapped the src field and the class field. This is what I can see for your image now:

      img width="80" height="80" src="PROFILE_PICTURE" class="http://data.whicdn.com/images/42139938/tumblr_mb0q1aN4NH1rx4r3bo1_500_large.png"

      It should have been:

      img width="80" height="80" class="PROFILE_PICTURE" src="http://data.whicdn.com/images/42139938/tumblr_mb0q1aN4NH1rx4r3bo1_500_large.png"

      Try making these changes and let me know how it goes. Sorry for the late reply btw.

      Cheers :)

      Delete
    2. Thank you for the help, Yoga. I was able to sort out my problem. :)

      Delete
  15. Does this work for dynamic template? I'm having difficulty getting it to work for me. Ultimately, my teammates and I want a thumbnail of our logo below the pages/header bar on the left-hand side. I've tried the floating icons code and this about me code, but I haven't had any luck :/ here's my thumbnail image url just in case: http://2.bp.blogspot.com/-0Efs95Jm_4w/UW2tAAzMrCI/AAAAAAAAAxw/cqv47AlReH8/s1600/logo.png

    By the way, you're blog is so informative and so helpful and i appreciate all the time you take to write these codes.

    ReplyDelete
    Replies
    1. Hi Shelby,

      Unfortunately, I haven't come across a feasible way to make this work in Dynamic View templates, due to the difficulties in adding mods to the native template scripts (in Dynamic View, the Edit HTML section of the template isn't the actual template - surprise surprise)..

      Delete
  16. Hello, thank you so much, your advice has helped plenty! No how do I center the customer profile picture once applied?

    ReplyDelete
    Replies
    1. Hi Ursh,

      Sorry for the ridiculously late reply. Your profile picture appears centered to me. Have you got this sorted?

      Delete
  17. How do you put that icon orange B for blogger beside my name?

    ReplyDelete
    Replies
    1. Are you referring to your Profile gadget? Your name would appear in quite a number of places in your blog.

      Delete
  18. Yes the profile gadget the orange b beside my name. How do I add that?

    ReplyDelete
    Replies
    1. The Blogger icon used to appear in profile gadget in the past, but they have removed it since. Some older gadgets that remain unedited will still show this icon. I reckon we can add it to yours if we can find a blog that still uses this older version of the gadget. Have you seen one around?

      Delete
  19. My blog ishttp://webbyssecondgrade.blogspot.com How do make my About Me link my name Shea to my profile page as well as where it says view my complete profile and how do I put the image blogger beside my name? like this blog http://firstgradealacarte.blogspot.com I want my About Me to do what hers does.

    ReplyDelete
    Replies
    1. Excellent, an example. Let's work this way. Go to www.pastebin.com, and paste the content of your profile gadget. Then get back to me with its link. I'll modify your code and let you know once it is done. Cheers :)

      Delete
  20. How do i reduce the space between each line? when i reduced the font size to 80% there were large gaps between lines....help?

    ReplyDelete
    Replies
    1. Hey sorry for the late reply. Let's have a look at your blog. What's your URL?

      Delete
  21. Hey Yoga, I'd also like to make my image circle like Layla ^, I'm not sure where to place the extra code, though. Is it before line 1? I pasted your code there but I must've missed a step, the code itself shows up :) Can you also help me center it so it's not right-justified?

    ReplyDelete
    Replies
    1. Hey Huske Pup sorry for the late reply. Here's the fix for both your problems (circle image and right justify). Go to your Blogger's Dashboard - Template - Customize - Advanced - Add CSS - Paste the following code, and press enter after the last line of the code. Then apply to blog :)

      .profile-img{
      -moz-border-radius: 100px !important;
      -webkit-border-radius: 100px !important;
      -goog-ms-border-radius: 100px !important;
      border-radius: 100px !important;
      padding-left: 0 !important;
      }

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.