Customize The Author Profile Widget In Blogger

Now you can easily customize your "Author Profile Gadget" Most of the blogs use the default style author profile and it is the only choice you have? No, you can style your author profile by editing some codes of your template. You can change the fonts, text color, add backgrounds, add borders and many more. We will add some CSS to style this widget we will also add mouse hover effects to this, let's make this possible. Just follow the simple steps and you will have cool author profile widget designed by your self in your style. So let's start working on it.

 

How to customize Author Profile Using CSS?

Just follow these steps and your profile widget will be done!

1. Go to blogger and jump to "TEMPLATES".  

2. Remember to backup your template!

3. Click on "EDIT HTML".

4. Now search for ]]></b:skin> (CTRL+F).

5. Just before/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 dashed #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/AVvXsEjXjCLuCfBGwNm-elOYNWRWRkSEZZRkUkpMzKmqqkMhKdEdTb7_sAk8NWqHgQmlTpyyu9Crj56WCN9ZJaiwccHXH9yqWR3QgJvO6Uc9gcSnN3Rj_GMirXXaKaOqqR43YMmL0QNOgxf00sw/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;
}

Customizing the widget!

Just follow the simple steps carefully to get your widget as you like!

1. Customizing the border!  

border:3px solid #289728;

lets explain what stands for what to make you understand what you are doing.

"border: 3px" in this the "3px" is the width of the border. Change the "3px" to any width you wish, like - 4px, 5px etc. remember that customize it as per your needs making, something bigger or smaller may effect the look of this widget!

2. Customizing the border hover effect!

 border:3px dashed #3B3A3B;

This is the border on hover effect. You can change the border width "3px" to any width you want, this is the effect on mouse over so if you keep "3px" is the code in step 1 and change the width to "4px" in step 2, the border width will change from "3px" to "4px" on mouse hover. You may have observed the "dashed" word, this indicates the type of border, in first step we had this as "solid", and in second step if we have this as "dashed", the image border will change from simple plain border to dashed border. And the last and important, change the #3B3A3B to the border color you want to set, you can find color codes on the web!

3. Customizing author name style!

color:#289728;

text-transform:lowercase;

color:#3B3A3B;

these are the styles of the author name on the widget, to customize this just change the following:

• color:#289728; Change #289728 to the color you want!
• color:#3B3A3B; Change #3B3A3B to the color you want!

That's it now you have a customized author profile widget on your blog. Make sure that you have added a author profile widget through "LAYOUT". Happy Blogging!