Stylish Author Box TOB v1.0 Free [TOB]

Author Box helps your Users get known about admin or who owned blog. It can be used to drive your users towards social media by adding Some Links. You can make People realize that how Admin Looks like by adding Image There is also.

You can do this all easily if You are familiar with HTML/CSS. But what if you can get a code without any difficulties and Wasting time. This all is Possible because I am going to provide You with the Author Box with easy Coding.

This is our First version of author Box. You can add this Box only in the sidebar, not Below Post. This helps your visitors see your information at a glance when they view your site. Isn`t that Cool.

You can recommend us about some improvement tips and Feedback through comments section for Making User-based Author Box...

Adding Author Box

• Goto Your Blogger Admin Site
• Layout > Add Widget (where you want The Box)
• Choose HTML/JavaScript

 The Code 

<div class="authorzo">
<div class="iadmin iadmin-about">

About Me
<div class="iadmin-about-img">

<img alt="Your Name Here" src="IMAGE LINK" />
</div>
<h3>Your Name HERE</h3>
<p>ABOUT YOUR DESCRIPTION</p>
<div class="social-ul">
<ul>
<li class="social-facebook"><a href="http://fb.com/ishworofficial" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li class="social-twitter"><a href="https://twitter.com/brainyishwor" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li class="social-google"><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li class="social-linkedin"><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li class="social-youtube"><a href="#" target="_blank"><i class="fa fa-youtube-play"></i></a></li>
<li class="social-email"><a href="mailto:yourmail.com@gmail.com" target="_blank"><i class="fa fa-envelope"></i></a></li>
</ul>
</div><!-- End social-ul -->
<div class="clearfix"></div>
</div></div>

The CSS

 

<style>
.authorzo {
    border-bottom: 1px solid #D3D5D7;
    box-shadow: 0px 0px 5px 0px #E2E3E4;
    position: relative;
    margin-bottom: 30px;
    padding: 20px 20px 5px;
    background-color: #4791D2;
    font-family:raleway;
    font-weight:400;
    max-width:350px;
}

.iadmin-about-img {

  border-radius: 50%;
border: 4px solid #FFF

}

.iadmin-about-img img {
  text-align: center;
  height: 100px;
  width: 100px;
}

.iadmin-about-img{height:100px;width:100px;overflow:hidden;margin:15px
auto 30px}.iadmin-about{text-align:center}

.iadmin-about {color:#FFF;font-size:50px;}
.iadmin-about h3{font-size:16px;margin-bottom:20px;text-transform:uppercase;color:#fff;font-weight:500;}
.iadmin-about p{color:#FFF;font-size:16px;}.iadmin-about .social-ul{float:none}
.iadmin-about .social-ul li{float:none;display:inline-block;margin-top:0;margin-bottom:0;padding-bottom:0;border-bottom:none;font-size:14px}
.iadmin-about .social-ul li a{border:1px
solid rgba(255,255,255,0.2);background-color:transparent;  padding: 4px 6px;  color: #fff;}
.iadmin-about .social-ul li a:hover{border-color:#263241;background-color:#263241;  color: #fff;}
.iadmin.iadmin-about li i.fa{float:none;margin-left:0;font-size:14px;width:14px}

</style>

When You are Done adding all these Codes make Sure to change The Information and Links.
One last thing is remaining which is to add Font-Awesome CSS file Link for Social Media Icon Fonts. Mostly Blogs do have Font-awesome pre-installed on their blog. They Don`t need to add the font-awesome code. Upper Code is Enough for them. If Not add The Following too on HTML/JavaScript

THE LINK

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

All Done. If You have Any Complain over this author box please contact me or Comment Below.