Blogger Ever

"About me" box for light and dark backgrounds



Every author loves to tell about itself on its blog to let know the readers to get something about the author.I am a author and I know how does it feels.I've designed this widget with 2 styles.
  • for dark background
  • for light background
So lets see how to create a such attractive CSS3 widget.

Instructions

  • Go to layout > add widget > HTML/Javascript
  • at the heading section write your desire heading (like about me or something about me)
  • then add the following script in it.

For light background

<style>
.beaboutmelight img
{
border: 3px solid #3e3e3e;
float: left;
height: 60px;
margin: 5px 10px 5px 5px;
-moz-transition: all .3s ease-in-out;
-ms-transform: rotate(20deg);
-ms-transition: all .3s ease-in-out;
opacity: 0.5;
-o-transition: all .3s ease-in-out;
transform: rotate(20deg);
transition: all .3s ease-in-out;
-webkit-transform: rotate(20deg);
-webkit-transition: all .3s ease-in-out;
width: 60px;
}
.beaboutmelight img:hover
{
ms-transform: rotate(0deg);
opacity: 1;
transform: rotate(0deg);
webkit-transform: rotate(0deg);
}
.beaboutmelight
{
border: 1px solid #3e3e3e;
border-radius: 10px;
color: #3e3e3e;
float: right;
font-family: verdana;
padding: 10px;
}
</style>
<div class="beaboutmelight">
<img src="IMAGE_URL"/>
<b>AUTHOR NAME</b>
Author description
</div>

For dark background

<style>
.beaboutmedark img
{
border: 3px solid #f7f7f7;
float: left;
height: 60px;
margin: 5px 10px 5px 5px;
-moz-transition: all .3s ease-in-out;
-ms-transform: rotate(20deg);
-ms-transition: all .3s ease-in-out;
opacity: 0.5;
-o-transition: all .3s ease-in-out;
transform: rotate(20deg);
transition: all .3s ease-in-out;
-webkit-transform: rotate(20deg);
-webkit-transition: all .3s ease-in-out;
width: 60px;
}
.beaboutmedark img:hover
{
-ms-transform: rotate(0deg);
opacity: 1;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
.beaboutmedark
{
border: 1px solid #f7f7f7;
border-radius: 10px;
color: #f7f7f7;
float: right;
font-family: verdana;
padding: 10px;

}
</style>

<div class="beaboutmedark">
<img src="IMAGE_URL"/>
<b>AUTHOR NAME</b>
Author description

</div>
Now replace the following

  • IMAGE_URL  with the image of the author
  • AUTHOR NAME with the name of the author
  • Author description with the description of author
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.