Amazing Blogger Tricks

"About Me" or "About Author" widget is one of the best widget that brings beauty to any blog or website. We see most of the bloggers online use a customized stylish "About Author" widget for their blogs or websites. The stylish widget will always enhance the look of your blog and makes the blog viewers know about the blog author. If the About Author widget looks routine and not attractive we can't expect the views for About Author page. This widget helps you to expand your social networking stength which could help you in publicizing your online content and could help you in getting more audience by simply adding an attractive "About Author" widget. So we should need a "About Author" widget and and is of no use if it's not attractive.

Let us see the process of adding "About author" or "About Me" widget on Blogger.

1. Go to: Dashboard -> Layout -> Add Gadget -> HTML/JavaScript

2. Paste the below code in Content area.

<h2 class="title">
About Me</h2>
<div class="widget-content">

<style>
}
#amazing-bloggertricks:hover
 {
border:2px solid #ccc;
cursor:pointer;
}
.opacity
{
opacity: 0.5;
margin-right: 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);
}
.opacity:hover
{
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}

</style>

.opacity:hover
 {
opacity: 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="amazing-bloggertricks" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR4xLCUpWMz3DhsAju-ETbj8c6EsgDqMxje4vu70wBPkSAOXPeQH3I9y3IM51-_E9OwhwiTJRpe6TTiD9zoJOxd5FQIEY0wBJX7u5EHODgrrrKtdGQwz2iaFCQhSM5KyxVIhs_cBfu_GdB/s1600/15694530_h8vngj9_1369589815.jpg" width="100" />
<div style="font-family: Arial Tahoma Verdana; font-size: 12px; text-align: justify; ">
<b>Founder & Author:</b> Hi Friends, my name is Arun Kumar Choppara. I am a Software Test Engineer working for a MNC company and also a blogger and addicted web developer. I have started blogging as a hobby and now addicted to it.</div>
<a style="color:#5634;" href="http://amazing-bloggertricks.blogspot.in/p/about-me.html" target="_blank">...Read More</a>
</div>

From the above code, you need to change few thinks as highlighted below.

<img class="opacity" id="amazing-bloggertricks" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR4xLCUpWMz3DhsAju-ETbj8c6EsgDqMxje4vu70wBPkSAOXPeQH3I9y3IM51-_E9OwhwiTJRpe6TTiD9zoJOxd5FQIEY0wBJX7u5EHODgrrrKtdGQwz2iaFCQhSM5KyxVIhs_cBfu_GdB/s1600/15694530_h8vngj9_1369589815.jpg" width="100" />
<div style="font-family: Arial; font-size: 12px; text-align: justify; ">
<b>Founder & Author: </b>Hi Friends, my name is Arun Kumar Choppara. I am a Software Test Engineer working for a MNC company and also a blogger and addicted web developer. I have started blogging as a hobby and now addicted to it.</div>
<a style="color:#5634;" href="http://amazing-bloggertricks.blogspot.in/p/about-me.html" target="_blank">...Read More</a>

Your image URL highlighted in Yellow.
Author Bio highlighted in Orange.
Author Bio text style highlighted in Red.
About Me page link of your Blog highlighted in Green.
Read more link colour in Blue.

3. Save the gadget.

4. Go to (Dashboard -> Layout) and move the gadget to the place whee you want to display on blog.

5. Click "Save Arrangement" and View blog to see the gadget added.

It's done! You have added "About Me" gadget to blogger.

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.