Add About the Author Widget for Blogger:Digital Tech Inspiration

An About the Author gadget contains descriptive information about the person behind the blog. This gadget can include information such as the author's name, a short biography about the author and a small thumbnail picture of the author.

This helps you to represent yourself in a new AVATAR. You can add About the Author gadget to your right slider bar at the top or bottom of your blogger blog homepage. Even you can make it appear where ever you want it in your blog homepage.

Now I am going to share a tip that how to customize your About the Author gadget and make it more attractive for the visitors and especially for your loyal readers.

How to Add About the Author Gadget in Blogger?

STEP #1: First log on to Blogger.

STEP #2: Go to Dashboard>Layout.

STEP #3: Click on Add a gadget>HTML/JavaScript

STEP #4: Now Copy the below Code and Paste it into the gadget.

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

<style>

#profileAditya

{

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

}

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

#profileAditya

{

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

}

#profileAditya: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="profileAditya" src="YOUR PROFILE IMAGE LINK" align="left" /> WRITE FEW LINES ABOUT YOURSELF<a style="color:#888;" href="YOUR PROFILE LINK">...Read More</a>

</div>

</a>

</span>

</div>

Customization Part:

· You can also change the title of your widget by replacing highlighted About the Author with a text of your choice.

· To change you profile picture replace highlighted YOUR PROFILE IMAGE LINK with your image URL.

· Replace highlighted Write Few Lines about yourself with your first few lines of your introduction.

· Replace highlighted YOUR 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.

And you can also play with colors of heading and description. Take a profile picture of size height: 70px and width: 70px, you can also change it size in the blogger About the Author Widget by adding following code in Blogger.

Dashboard>Template>Customize>Advanced>Add CSS

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

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.