About Me Author Profile Widget Customization For Blogger

Hi, in our today’s post we have a simple tip for you and for every blogger which helps you to represents yourself in a new look and also helps to decrease bounce rate of your blog by giving at least one more pageviews. Yeah, now I think you got my point. So, now we are going to share a tip that how to customize your ABOUT Me gadget and make it more attractive for visitors and especially for your loyal readers.

Before start customization scroll down page and see my About Me gadget, after completion it will look like this.

Steps To Change About ME Widget:

First go to blogger > Layout > Add a gadget > HTML/JavaScript

Now copy the following Code and paste it into a new gadget.

<div class="widget HTML" id="HTML1">
<h2 class="title">About The Author</h2>
<div class="widget-content">
<!--[if !IE]> -->
<style>
#profileSyedShah{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profileSyedShah:hover {
border:2px solid #ccc;
cursor:pointer;
}
.opacity  {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.opacity:hover  {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}

</style>
   <!--[endif]---->

<style>
#profileSyedShah{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profileSyedShah:hover {
border:2px solid #ccc;
cursor:pointer;
}
.opacity  {
opacity: 0.5;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
zoom: 1;
}
.opacity:hover  {
opacity: 1;
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
</style>


<img class="opacity" id="profileSyedShah" src="PROFILE PICTURE" align="left" /> Write Few Lines about yourself <a style="color:#888;" href="PROFILE LINK">...Read More</a><!--![endif]---->
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="blogID=10.......21&widgetType=Profile&widgetId=Profile1&action=editWidget&sectionId=lowerbar1" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML1&quot;));" target="configHTML1" title="Edit">
</a>
</span>
</span>
<div class="clear"></div>
</div>

 Then press CTRL + F and find and replace the following things.

           A-     SyedShah and replace it with your name

           B-      blogID=10.......21 with yours one

           C-      Write Few Lines about yourself with your first few lines of your introduction

           D-    PROFILE LINK with your Google plus profile about link or if you have a separate page or post in your blog then replace with it.

           E-       You can also change the title of your widget by replacing About the Author with a text which you want.

          F-     To change you profile picture replace Profile PICTURE with your image URL

Moreover you can also play with colors of heading and description. If your profile picture is large or small in size, you can change its size in the blogger about me widget by adding following code in Blogger > Template > Customize > Advanced > Add CSS

.profile-img{height:124px;width:124px;}

The major credit goes to Mustafa Ahmed Zai for writing this awesome peice of code (as seen on mybloggertricks.com) . I just modify it little. Hope you like this tip about customization of About me Widget. Share you thoughts and if facing any problems feel free to ask questions in comments section. Thanks