About Author Box Widget: How To Add Professional About Author Widget In blogger

About Author Box Widget

You are a blogger or Social media marketer you are running a blog which has good rank on google. but you want it more handsome and like to be much preety in a professional look. maybe you thinking to add a box which showed on every post footer. you right this thing give you more result like visitors when scroll down a post they see your info which is showing "About Author"if you your niche is related to blogging then many beginners who looking for learn blogging will join your blog once they found your about author blog they will also want to add this in their own site so how can they add easily it in any where

I have added it in mine blogger also and think to share it with others also explain some simple steps to add this just follow these instructions and enjoy this trick.

you can also done it through my video on youtube and subscribe me on social media one thing more if you are intract with Coding then it will easy if nor no problem just follow my post. all code is given below.

First Step
Sign into blogger and open html tab and click on edit HTML

Second Step
Go into html and press CTRL+F and Enter this code ]]></b:skin> press enter and above this put follewing code
/*Professional Author Box CSS Code*/ .about-author { width : 750px; overflow : hidden; margin:10px 0px; border:0px; background: #f2f2ef; margin: 0 0 30px 0; padding: 10px; border: 1px solid #EAEDEF; overflow: hidden; color: #333333; font-size: 14px; font-family: Georgia, Tahoma, Verdana; line-height: 24px; } .about-author img { display: block; width: 90px; height: 90px; margin: 0 1.2em 0 0; float: left; background-size: cover; background-repeat: no-repeat; background-position: center center; -webkit-border-radius: 999em; -moz-border-radius: 999em; border-radius: 999em; border: 2px solid #ddd; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } .about-author h3{ font-family:georgia !important; font-size:18px !important; margin:9px 0px !important; color:#666 !important; border-bottom:2px solid #666 !important; border-top:0px !important; } .about-author p { margin:0px; text-align:justify; color:#666; } /*Professional Author Box CSS Code*/ Step Third Next search for After this past follewing code under on this tag. 

/*Professional Author Box HTML Code*/ <div class="about-author"> <h3> About Author:</h3> <img align="left" src="Paste Your Image URL Here"/><p> Write Something About Yourself</p> <br/> <p> Let's Get Connected: <a href="your twitter name" rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> | <a href="your Facebook url" rel="nofollow" target="_blank"><font color="#3b5998">Facebook</font></a> | <a href="http://plus.google.com/109208666606854207231" rel="nofollow"><font color="#dd4b39">Google Plus</font> </a></p> </div> /*Professional Author Box HTML Code*/ Now you need to change "write something about yourself"  with your info and change your url image with image code. after that add twitter user name and also Facebook.........Now You Done if you feel any hurdle feel free to contact me.Enjoy "About Author Box Widget"