Awesome And Stylish Big Full Page Author Box For Web Pages

Author pages serve a variety of purposes. From establishing your online identity to giving you a chance to link to social profiles, author pages build credibility for your site as a whole and for the individual authors and their individual brands.

Now there are many snippet available online or on many others Blog and website but every one is not able to optimize your blog or website so your need some optimized code snippet. So now checkout out code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.

Features:

1.) No JQuery File Added.
2.) No JavaScript Code/File Added.
3.) No Extra CSS Added.
4.) Simple And Fast Loading Flash Files.
5.) Can Work With Any Browser.

How To Add In A WebPage OR Blog?

1.) Just Go To Your “Web Page File” or “Blog”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.

CSS:

<style type="text/css">
#authorBox {width:760px;margin:0 auto;padding:20px;display:table;background-color:#fafafa;border-bottom:4px solid #75C3B7;font-family:sans-serif;}
#authorBox h2.widgetTitle{font-size:16px;padding:10px 0 0 0;color:#57BCAC;display:block;margin:0;text-align:center;}
#authorBox .authorInfo_widget{float:left;width:260px;padding:30px;text-align:center;}
#authorBox .authorInfo_widget .profilePhoto{text-align:center;}
#authorBox .authorInfo_widget .profilePhoto img {width:160px;min-height:160px;object-fit:cover;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;background:#FFF;padding:5px;border:2px inset #e8e8e8;}
#authorBox .authorInfo_widget .profileDataBlock h3{color:#75c3b7;font-weight:normal;font-size:20px;margin:10px 0 0 0;}
#authorBox .authorInfo_widget .profileDataBlock h3 a{color:#75c3b7;text-decoration:none;}
#authorBox .authorInfo_widget .profileDataBlock p{font-size:14px;}
#authorBox .authorInfo_widget .profileDataBlock img{width:200px;}
#authorBox .authorDetail_widget{float:left;width:420px;}
#authorBox .authorDetail_widget .widgetContent{margin:10px;background-color:#FFFFFF;webkit-box-shadow:1px 1px 2px 1px rgba(0,0,0,0.222);-moz-box-shadow:1px 1px 2px 1px rgba(0,0,0,0.222);-o-box-shadow:1px 1px 2px 1px rgba(0,0,0,0.222);box-shadow:1px 1px 2px 1px rgba(0,0,0,0.222);}
#authorBox .authorDetail_widget .widgetContent p {padding:10px;font-size:14px;text-align:center;margin:0;}
/*--------Social Sharing Widget ------*/
#authorBox .authorDetail_widget .socialsharing{height:60px;text-align:center;}
#authorBox .authorDetail_widget .socialsharing a {display:inline-block;height:50px;width:50px;padding:0 5px;background:transparent url(https://4.bp.blogspot.com/-UTkPtPsw9bY/UKRoAPEVZ9I/AAAAAAAAFnM/qDPvUxpNfqM/s1600/Sharing+buttons.png) no-repeat;-webkit-transition:ease-in 0.2s all;-moz-transition:ease-in 0.2s all;-o-transition:ease-in 0.2s all;-ms-transition:ease-in 0.2s all;transition:ease-in 0.2s all;cursor:pointer;}
#authorBox .authorDetail_widget .socialsharing a.googleplus {background-position:0px -58px;}
#authorBox .authorDetail_widget .socialsharing a.googleplus:hover {background-position:0px 0px;}
#authorBox .authorDetail_widget .socialsharing a.twitter {background-position:0px -290px;}
#authorBox .authorDetail_widget .socialsharing a.twitter:hover {background-position:0px -232px;}
#authorBox .authorDetail_widget .socialsharing a.facebook {background-position:0px -406px;}
#authorBox .authorDetail_widget .socialsharing a.facebook:hover {background-position:0px -348px;}
#authorBox .authorDetail_widget .socialsharing a.rss {background-position:0px -174px;}
#authorBox .authorDetail_widget .socialsharing a.rss:hover {background-position:0px -116px;}
</style>

HTML:

<div id="authorBox">
<div class="authorInfo_widget">
<h2 class="widgetTitle">Hi, Here I am...!!!</h2>
<div class="profilePhoto">
<img alt="Irza Ahsan" title="Irza Ahsan" src="https://2.bp.blogspot.com/-QNMNntmYpSA/V6dkYDiXkVI/AAAAAAAAAAk/nV7YJ0Q5BSUHuCkpRbs3EJq_hE-lC_kHgCPcB/s1600/Irza-Ahsan-A-Blue%2B-Stocking.jpg">
</div>
<div class="profileDataBlock">
<h3><a href="######" title="Irza Ahsan">Irza Ahsan</a></h3>
<p>Far far away, behind the word mountains, far from the countries Consonantia.</p>
<img alt="Irza AhsanSign" title="Irza Ahsan Sign" src="https://lh3.googleusercontent.com/FI-AEbOT5AH83IGreF-Lcahq79oVtExkaJ2_WX5jSR51bvYIeO8AK59QZuYMB3E7Q-UXX2Fn1SOS=w1680-h1050-rw-no" >
</div>
</div>
<div class="authorDetail_widget" >
<div class="widgetContent">
<h2 class="widgetTitle">About Me</h2>
<p>I had only known the part of me on the surface, the bit I had carefully chosen for me to see. Underneath there is a whole vast area of my life that I had kept hidden. I am nothing but a by-product of nature unless you get to relish the tough cookie within me. The one who can trigger the emotions you have kept hidden, lurking within you, with merely playing with a few words. The world is twisted in undefined knots and me, an illegitimate person can only pen my emotions to survive.
<br/><br/>
I have power over you with my words. Words have their power over me. With a little color here and little color there I can paint a beautiful picture of words that the literature itself endorses it. After all, I am only an ergonomically free spirit with a wild heart.
</p>
</div>
<div class="widgetContent">
<h2 class="widgetTitle">Connect Me On</h2>
<div class="socialsharing">
<a class="rss" href="###" rel="external nofollow" target="_blank"></a>
<a class="googleplus" href="###" rel="external nofollow" target="_blank"></a>
<a class="facebook" href="https://www.facebook.com/irza.aiman?fref=nf" rel="external nofollow" target="_blank"></a>
<a class="twitter" href="###" rel="external nofollow" target="_blank"></a>
</div>
</div>
<div style="clear:both:"></div>
</div>
</div>

Customization:

1.) You can change the Codes if your are a Pro. Rest can ask for customization.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…