CSS Based Author Box For Blogger!

Hi Guys. This is Mehul Mohan and this is my first post on TTF. So, in this post, I will give you a cool stylish author box for your site. Author box means a lot for any blogger who want to look professional in front of his visitors. In this post, I will give you coding for author box and also show you how to implement it in your templates. So, what are you waiting for? Start the tutorial!

What Is Author Box?

Author box is basically a box placed on the top or in the bottom of the post with an aim to inform users about yourself, your taste, your other sites, a little description or any other product or services promotion.

Why Author Box Is Necessary?

1. Gives Professional Look To Site.
2. Visitors know more about you.
3. Place your G+, FB, Twitter links in it.
4. Keep your guest authors happy.
5. And more!

Features of TTF Author Box:

1. Elegant
2. Professional Look
3. Light Weight
4. All In One!
5. Hover Effects
6. Image Included
7. And More!

How To Install Author Box In Blogger?

Okay, here comes the techie part. Follow the tutorial in order to install your own author box in blogger!

Coding :

<style>
.black-box {
    background-color: rgb(251, 251, 251);
    margin: 30px 0px;
    padding: 30px;
    text-align: center;
}

.black-box:hover {
box-shadow: 10px 7px 10px 7px rgba(0, 0, 0.7);
transition: all 0.5s ease-out 0s;
}
</style>

<div class="black-box"><img alt="Author" height="64px" src="AUTHOR PROFILE PIC" style="float: left;" /> <span style="font-weight: bold;">About The Author</span><br />
<!------AUTHOR DESCRIPTION [LINKS, TAGS, ETC..] <br />
Follow Him: <a href="TWITTER LINK">@Twitter </a>| <a href="FACEBOOK LINK">Facebook</a></div>

How To Use?

If you want to use it, follow the guide below:

1. Go to Blogger » Template » Edit Template - Check Expand Widget Templates
2. Now, find this line :

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

OR

<div class='post-footer-line post-footer-line-2'>

Note: This may vary according to your templates.

3. Just below it, paste the above coding.
4. You are done!

About The Author
His name is Mehul Mohan and he runs the blogger's blog MyPremiumTricks.com. He is crazy about discovering new tips and tricks in the blogosphere and newly emerged tech toys.
Follow Him: @Twitter | Facebook