Beautiful Author detail widget

This blog aims to offer best blogger resources to all of you who painful sensation to prettify their blogger blogs once beautiful widgets and effects. Today, I have a little but beautiful author bio crate for your blogs, This author widget is actually added to the habitat page of your blog. This is not something, which you mass out cold each adding together in Blogger, but this will be a user-user-friendly widget, which you can easily grow in the footer of your blog's residence page. It will contain a curt bio of the author of the blog and a partner to entrance more about him. Moreover, it will be having a portray of the author which will interchange upon adherent mouse soar. Let's begin how to buildup this widget to your blogger blog.
Before calculation this small piece of blogger widget to your blog, devotedly have a see at the footer of this blog, you'll locate an author bio box at the left side of the footer, thus you are gonna hoard the same widget to your blog.

1: Go to Blogger
2: Click on Layout
3: Click on "Add Widget"
4: Choose Html and Javascript
5: Copy below code

<h3 class="title">About Me</h3>

<div class="widget-content">

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

<style>

}

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

<!--[endif]---->



<style>

#bbc

{

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

}

#profileAditya:hover

{

border:2px solid #ccc;

cursor:pointer;

}

.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="bbc" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTyIfPOx6vG7qH7QcO9JHPcSenAY_yW17pLNw96KgNtiBhY7fE4lWtnIgFFeK2xE2uYUudooOSwG6jQfRo7owKtGdoOejFUXIzJQOmSUa4_40D989B7uNp11j6zf9zzYjyWIz9Eadx8j5A/s1600/logo.png" width="100" />

<div style="font-family: Arial Tahoma Verdana; font-size: 13px; text-align: justify; margin-top:-110px; padding-left:120px;">

<b>Founder & Author:</b> Computer fun provide the free course of website, SEO and online marketing,make money more Android app,Ios Apps,Games,Unity 3d, Programming video tutorial.For entertainment Songs albums,News, Music instrument tutorial, Fashion,Books reading,Desktop wallpaper and Diy projects..<a style="color:#5634;" href="http://www.cmpfun.blogspot.com" target="_blank">...Read More</a><!--![endif]---->

</div></div>

5: Paste the Code
6: Save it