How to Add a Minimal Style Author Box For Sidebar in Blogger

In today's world the lesser the design the greater is its impact.Hence following the trend we have built a minimal author box for sidebar.Previously we released a template for author bio.The template was viral soon.On popular demand we made a similar author box for sidebar.This author box features a photo and a content slide which helps increase viewership.I hope you use in your blog's.

Features

Flat design and colors
Awesome profile picture style
Flexible widths
Use of social icons : font-awesome

How to add this to blogger

Go to Blogger and login
Navigate to Template > Edit Html > Proceed
Search for ]]></b:skin>
Paste below code above it

.bx-author {
min-width: 300px;
max-width:300px;
max-width: 300px;
background: #FAFAFA;
border-top-style: solid;
border-color: #85C15D;
border-width: 10px;
}
.clear {
clear: both;
}
.bx-wrap {
margin: auto;
max-width: 290px;
}
.bx-image {
height: 120px;
width: 120px;
border-radius: 100px;
border-color: #E3E3E3;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
margin-top: -50px;
}
.bx-head {
text-transform: uppercase;
font-size: 20px !important;
line-height: 1.5em!important;
text-transform: uppercase!important;
color: #666666!important;
text-transform: uppercase!important;
font-family: 'Open Sans', sans-serif!important;
}
.bx-info {
font-size: 13px;
font-family: 'Open Sans', sans-serif;
color: #333;
text-align: center;
width: 80%;
clear: both;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
.bx-social {
background: #E3E3E3;
}
.bx-social ul {
list-type: none !important;
display: inline!important;
}
.bx-social li {
list-type: none !important;
display: inline!important;
}
.bx-social li a {
font-size: 20px !important;
color: #333 !important;
padding-left: 5px;
text-decoration: none;
}

Now search for </head> and paste the code above it

<link href="https://dl.dropboxusercontent.com/u/46317781/bxperts-fonts.css" rel="stylesheet" type="text/css" /><link href="https://dl.dropboxusercontent.com/u/46317781/bxperts-fonts-min.css" media="all" rel="stylesheet" type="text/css" />

Save your template.
Now go to Layout > Add a gadget > Html/Javascript
Paste this code in it

<div class="bx-author"><div class="bx-wrap"><center><img class="bx-image" src="http://lh3.googleusercontent.com/-ZoaAW8JC_cI/AAAAAAAAAAI/AAAAAAAAH70/HKh0W0ghJMs/s512-c/photo.jpg" /><div class="clear"/><br/><div class="bx-head"><b>GOAT007</b></div><br/><div class="bx-info">

In sollicitudin vulputate nisl. Vivamus sed mattis mauris, eu pellentesque velit. Integer eu vestibulum dolor. In pellentesque nunc nec ipsum malesuada condimentum. Suspendisse quis elit purus.

</div>
</div>
</center>
</div>
<div class="bx-social">
<ul>
<center>
<li><a href="#"><i class="fa-facebook"></i></a></li>
<li><a href="#"><i class="fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-gplus"></i></a></li>
<li><a href="#"><i class="fa-rss"></i></a></li>
<li><a href="#"><i class="fa-pinterest"></i></a></li>
<li><a href="#"><i class="fa-gmail"></i></a></li>
<li><a href="#"><i class="fa-dribble"></i></a></li>
<li><a href="#"><i class="fa-tumblr"></i></a></li>
<li><a href="#"><i class="fa-youtube"></i></a></li>
<li><a href="#"><i class="fa-instagram"></i></a></li>
</center>
</ul>
</div>
</div>

Change the link in blue to your profile pic
Change the red text to your name
Change the green text , and write something about yourself.Remember to keep it short as this is a minimal widget.
Change the puple hash tags to your social accounts.

I hope you enjoyed this widget from our side.Do keep reading our posts.Share our work !