Customize Author Profile In Blogger

Customize-Author-Profile-In Blogger Thanks to Blogger you can easily customize your templates and widgets fully. While designing the Cute Box template I came across the coding for “Author Profile Widget”. The widget was using official Blogger Styles by default and I thought why not try editing them with our own customized fonts and colors. Fortunately with a simple use of CSS, the entire look was changed to something that may be of interest to most of you. I added some mouse hover effects to Author Profile image and author name and also added a small image of admin that appears when you hover your mouse cursor on it.

Have a look at it first (Remember to hover you mouse on it),

 

Live Demo

 

 

How To Customize Author/Admin Profile Using Simple CSS

To add this effect to your personal profile follow these steps,

  1. Go To Blogger > Layout
  2. Click Add a Page element or Add a gadget
  3. Select Author Profile Widget
  4. Now Go to Edit HTML
  5. Backup your template
  6. Search For ]]></b:skin>
  7. Just above ]]></b:skin> paste this code

.profile-img {
  float: left;
  margin: 0 5px 5px 0;
  padding: 4px;
  border:3px solid #289728;
}
.profile-img:hover {
  border:3px dotted #3B3A3B;
}
.profile-data {
  margin:0 10px 20px 10px;
  padding:0;
  font: bold 10pt "ms sans serif", verdana,Arial;
  color:#289728;
  line-height: 1.6em;
  text-align:left;
  text-transform:lowercase;
}
.profile-data:hover {
  color:#3B3A3B;
}
.profile-datablock {
  margin:.5em 0 .5em;
}

.profile-datablock:hover {
  background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibQWCR4kTBUpcOo4XXFAkZDFsZf1oYoTafzQuZkwuS3ta_JRosXajaeeVWFpKwQxNJ-EXPsAm9JvGXK1g0RltruVfntkm3fg5MuY0-306kz5-rWW3s2c8usoV8HSvzvFzZXuLrW3aY6H8/s320/admin.png) no-repeat bottom right ;
}

.profile-textblock {
  color:#333;
  margin: 0.5em 0;
  line-height: 1.6em;
  padding:5px 0 5px 0;
  border-top:2px solid #289728;
  border-bottom:2px solid #289728;
}

.profile-link {
display:none;
}

 

     8.    Save your template and Done!

Preview your blog to see your profile standing out!

 

Customization Guide

Each bolded text in the code above is described below,

(1)  Customize Image Border

border:3px solid #289728;

This code defines the image border width, style and colour in active mode. To change the width change this value –>3px and to change style change solid to dotted, dashed or outset etc. and to change colour of border change  #289728 to a different colour of your choice. Use our Colour Chart

(2)  Customize Image Border Which Appears On Mouse Hover

border:3px dotted #3B3A3B;

This code can be customized in a similar way as for part (1)

(3)  Customize The Author Name

color:#289728;

text-transform:lowercase;

color:#3B3A3B;

To change the colour of Author Name in active mode, change  #289728

To change the colour of Author Name on mouse hover, change  #3B3A3B

To Change all letters to capital then change lowercase to uppercase or if you want to make the first letter of each word capital then change lowercase to capitalize

(4) Customize The Author Introduction Text

color:#333

border-top:2px solid #289728;
  border-bottom:2px solid #289728;

To change the colour of the introduction text change #333 

To change the the width, style and colour of the two borders that appear below and above the text then change 2px, solid and #289728 respectively

How to show or hide the link in Author Profile

By default I have removed the link that says “View My Complete Profile”  If you want to show this link then simply delete the following code from the above code,

.profile-link {
display:none;
}

If you want to hide the link then leave the above code as it is.

That’s All!

I hope you will find it easy and interesting. Any question is welcomed :>

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

19 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Mohammad thank you so much. Worked like 123!

    ReplyDelete
  2. Where are U from my friend? Coz U made me write sincerely...

    ReplyDelete
  3. I give you a 950X60 banner over the header.
    please provide me a html code or something at lucky_flaush@yahoo.com
    You already have on my site one text link and one clichet you provided.
    I have about 300 unique visitors daily.
    All is free because I like you!

    ReplyDelete
  4. @Lucky Flaush

    I am sorry for late reply, here are the asnwers,

    Friend I am from Afghanistan and I live in Pakistan (Karachi)

    For banners and back-links I am extremely thankful for your love and support and all those who did the same. For me your visit, comment and feedback is already an honour and far bigger than a banner :>. Thanks for making my day a memorable one!

    ReplyDelete
  5. Is there away to increase the size of the profile picture size? Any help or direction would be greatly appreciated. Thanks in advance.

    ReplyDelete
  6. @chris,


    Add

    height: 30px;
    width: 30px;

    To

    .profile-img {
    float: left;
    margin: 0 5px 5px 0;
    padding: 4px;
    border:3px solid #289728;
    }

    You can play with size which is 30px in this case. Hope that would be helpful :>

    ReplyDelete
  7. great. worked. thanks so much. i have enjoyed your site and recommend it to blogspot users all the time.

    ReplyDelete
  8. View my complete profile

    My profile not showing this link so any solution for that

    ReplyDelete
  9. @Chris Pris

    You are always welcome here dear! :>

    @esyrecipes

    Simply Find and delete this code from your template,

    .profile-link {
    display:none;
    }

    It will then certainly appear :>

    ReplyDelete
  10. hi mohammad,

    how can i put an image to my profile link widget in blogger?
    the problem is my blog have 2 author.default blogger widget will only put a link using my profile name without the picture.

    i tried this

    img src='MY.PIC.URL' style='border:0px;width:38px;height:42px;'

    at the last line of the widget but it doesnt make any sense cause the widget will randomly change the author link location.help me

    ReplyDelete
  11. Thanks for this Mohammad. Could you kindly share how to reduce the font size of the Author Profile content? It would be very much appreciated, thank you.

    ReplyDelete
  12. very cool..

    Awesome

    ReplyDelete
  13. Assalammualaikum...
    Nice tutorial..

    I wanna ask, can you help me on how to make blogger profile back to normal? I mean the blogger profile unsatisfied me.

    Firstly, please visit my blog, http://aiharas.blogspot.com/, then LOOK at my blogger profile on TOP of the SIDEBAR..
    You'll see that the description on the blogger profile is below the profile photo which was originally and usually beside the profile photo like yours and other bloggers.

    Once, I edited the HTML code to be like that and now, I forget on how to make it back to normal.
    If you dont mind, please reply me in my email, suriaszira_flowers@yahoo.com. but if you think it's hard to do so, just reply in your comment threads.

    I'll be appreciate your help. Thanks. :)

    ReplyDelete
  14. hello mohammed i just add the css code and nothing happened no there other codes to do it or something to show the name ?

    ReplyDelete
  15. Salam Bro! i want a Costum Author Profile for Posting...

    ReplyDelete