Customized About Author Widget for Blogger

Widgets are always make your blog more attractive on the eyes of visitors.It makes your blog more active and make your visitor believe how big techie you are in the field of techie blogging.So people love to try various widgets on their blog experimentally.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 above demo screenshot and if like it,then directly move on to the tutorial below and add it onto your blog.

Must Read : Create BackUp of Your Blogger Posts and Comment

Customized About Author Widget

First log onto blogger dashboard > Layout > Add a gadget > HTML/JavaScript
Now copy the below Code and paste it into a gadget.

/*About Me Widget Customization From http://techtrickhome.com*/<div class="widget HTML" id="HTML1"> <h2 class="title">About Author</h2> <div class="widget-content">  <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>  <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> </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("HTML1"));" target="configHTML1" title="Edit"> </a> </span> </span> <div class="clear"></div> </div>

Now save it and you're done

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;}

Must Read : Enable Auto Play Youtube Embed Video

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 for visiting.