Author Box: An awesome Blogger widget

Author Box: An awesome Blogger widget

I have seen many Author boxes for blogger templates but I was never very satisfied with them. Some had great designs but no effects and some were over styled with borders and colors and all that. So today I have invented my own Author Box for blogger which you can get too by reading this small tutorial in which you will know that how you can install this cool gadget.

Before starting the post we will first have a demo of the author box about which I am talking.

So click on the Demo link to have a live demonstration.

DEMO

Just scroll down the page and look at the awesome Author Box. Here’s a picture of it:

authorbox

Features:

  • Images transform on mouse hover.
  • Easy to install.
  • Compatible with all templates.
  • SEO friendly.

How to Install?

To install this awesome looking author box just Go to

Blogger>YourBlog>Template>Edit HTML

And press Ctrl + F and search for this tag

<div class="post-footer-line post-footer-line-1">

Now copy and paste the code given below just after the code which is given above.

<div class="author-box">
<img class="avatar avatar-70 photo" src="https://articlesteller.com/wp-content/uploads/2015/05/aa.jpg" alt="" width="70" height="70" /><b>About the Author</b>
<div style="text-align: justify; font-family: verdana; color: #000000;">Write Something About yourself

<center>

<a style="text-decoration: none; font-size: 70%;" href=" Your Blog link ">Your Blog Name</a></center></div>
<strong>Follow me on</strong>

<a href="http://facebook.com/Articlesteller"><img style="width: 16px; height: 17px;" src="https://articlesteller.com/wp-content/uploads/2015/05/fb_icon.png" alt="" /></a><a href="http://twitter.com/HusnainMz">
<img style="width: 16px; height: 17px;" src="https://articlesteller.com/wp-content/uploads/2015/05/download.png" alt="Mountain View" /></a><a href="https://plus.google.com/+HusnainMeerzadehh/posts"><img style="width: 16px; height: 17px;" src="https://articlesteller.com/wp-content/uploads/2015/05/google-plus-icon.png" alt="" /></a></div>

Now the HTML thing is done and it is time to add CSS, for this search for

</b:skin>

tag and just above it install this code:

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 4px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}

.author-box img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}

After doing everything correctly, the author box will start appearing just below your content. Now it’s time to add your own details in the description area.

For this search this line in the code

<div style="text-align: justify; font-family: verdana; color: #000000;">Write Something About yourself

and replace the irrelevant stuff(i.e. Write Something About yourself) with your original details.

Now let’s change social buttons’ URL, To do this just replace my social media URLs with your social media pages URLs. For instance facebook.com/ArticlesTeller with your original facebook page URL.

Wrapping it Up

If you have any further queries about installing this code into your template then don’t hesitate to ask in comments. If you want me to add more features in the author box then let me know by just leaving a comment.

For more, like our Facebook Fanpage or Follow us on Twitter. You can also subscribe our Newsletter to get latest updates on your email.

2 Comments

  1. Mohammad Adnan February 7, 2016
  2. quangmen93 May 28, 2016

Leave a Reply