How to create a beautiful Post 'About Author' Box in Blogger with html and CSS

How to create a beautiful Post 'About Author' Box in Blogger with html and CSS
Here You Go :

1. From the blogger dashboard go to - lauout -> add a Gadget and select HTML/Javascript Gadget Option, 
2. put the below HTML and CSS in the Contend box
3. if you having gravatar Account you can use image from there for that Replace the blue marked text - 'gravatar hash' with Your gravatar hash, read how to get gravatar hash.
4. or you can place your image in the image tag url.

HTML

<div class="authorsure-author-box"> <img alt="" src="http://1.gravatar.com/avatar/a75309d876ec67238c076c702f9b424e?s=90&amp;d=&amp;r=G" class="avatar avatar-90 photo" height="90" width="90" /><h4>About <a rel="author" href="http://bhavinrana.blogspot.in/p/about-me.html" class="authorsure-author-link">Bhavin</a></h4> <p><a href="http://bhavinrana.blogspot.in/search/label/PHP%20Freelancing%20india">Professional & Experienced Freelance Developer </a> From India, Technologist, Software Engineer, internet marketer and Open Sources Developer with experience in Finance, Telecoms and the Media.</p>

</div>

CSS 

<style>
div.authorsure-author-box {
background-color: whiteSmoke;
width: 96%;
}

.authorsure-author-box {
background: whiteSmoke;
overflow: hidden;
margin: 10px 0px 40px 0px;
padding: 10px;
border: 1px solid #DDD;
}




.authorsure-author-box img {
float: left;
border: 1px solid darkGray;
margin: 0 10px 0 0;
padding: 4px;
position: relative;
}

.avatar, .featuredpage img, .featuredpost img, .post-image {
background-color: whiteSmoke;
border: 1px solid #DDD;
padding: 4px;
}


.authorsure-author-box h4, #content .authorsure-author-box h4 {
font-weight: bold;
padding: 0;
margin: 0;
clear: none;
}
.authorsure-author-box h4, #content .authorsure-author-box h4 {
font-weight: bold;
padding: 0;
margin: 0;
clear: none;
}


.authorsure-author-box p, #content .authorsure-author-box p {
margin-bottom: 10px;
}
.entry-content p {
margin: 0 0 25px;
}

</style>

How Simple ha ? :D

Hope you have enjoyed the post !
any more ideas about the same ? let me know by comments !

Know More About :
PHP Freelancing India