Customized About Author Widget for Blogger

Wish to add an about author widget on your blog with a little customization?I bet it'll make your preference strong on your blog.Take a look below demo screenshot and if like it,then directly move on to the steps below to add it on your blog.

How to Do This?

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

• Now copy the below Code and paste it into a gadget and save it.

/*About Me Widget Customization From http://techtrickhome.blogspot.com*/<div class="widget HTML" id="HTML1">

<h2 class="title">About  Author</h2>

<div class="widget-content">

<!--[if !IE]> -->

<style>

#profiledeb{

border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;

}                  

#profiledeb: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>

#profiledeb{

border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;

}

#profiledeb: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="profiledeb" 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>

Customization

Press CTRL + F and find and replace the following things.

           A-     deb 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  Author with a text which you want.

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

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

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

Hope you like our tip of customization of About me Widget. Share you thoughts and if facing any problems feel free to ask questions in comments section. Thanks