Announcement:

  Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.

Sunday, February 10, 2013

Simple Author Box Free HTML-CSS Template

This Article Was Live On: Sunday, February 10, 2013 And Till Now Have10 comments.
Simple Author Box Free Template For Blog And Website
Author bio boxes below posts make it easy for your visitors to recognize and communicate you. These boxes are much better than a tiny text name of the author which remains invisible for most visitors. But when you add an author bio box to your blog, it tells visitors strongly that you are the author of the post which they are reading. Author boxes increase the communication or commenting on your blog which is a necessary for a successful blog.

I am going to share a simple but easy to customize author bio box for your Blogger blog which can be added and customized to any Blogger template easily. I am also using this box on my blog and you can view its demo at bottom of this post. Here Is The Simple Template, Just Copy The Whole Code And Paste It To Below Of Your Post Through HTML Editor.Edit With Your Desire Data And Enjoy.This Will Help You To Show Your Profile And Extremely Best For Guest Writers.



Features:

1.) Awesome And Simple Design.
2.) Pure HTML-CSS, No JQuery, JavaScript Or Even Image.
3.) Quick To Load And Easy To Install.
4.) Best For Guest Post Accepted Blog And Site To View There Writer Profile.
5.) More Under Impression Instead Of Simple Name.
6.) Fully Customizable.
7.) Social Network (Facebook, Twitter, GooglePlus) Link Added.
8.) Can Be Added On Post HTML And Also On Blogger Template One To Show On All Post.
9.) Cross Browser Support Due To HTML-CSS2.
10.) Table-less Code With DIV Only.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To "Template".
4.) Click "Edit HTML" Where You Want To Add It.
5.) Click "Expand Your Widget Template" Check Box.
6.) Now Press To "CTRL+F" To Find The Below Code.
7.) Now Search The Below Code There.
<div class="post-footer-line post-footer-line-1">
8.) Copy The Below Code And Paste It After The Above Line.
9.) Click Save, Now You Are Done.

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between "<body> </body>".
3.) Save It, Now You Are Done.

<b:if cond='data:blog.pageType == "item"'>
<style>
#ath {
background:#f8f8f8;
margin:0 0 40px 0;
padding:10px;
border: 3px outset #e8e8e8; -moz-border-radius: 10px; border-radius: 10px;
overflow:hidden;
font-size: 14px;
}
.pro {
background:#FFF !important; float:left;
margin:0 10px 0 0;
padding:4px;
border: 2px inset #e8e8e8;
}
</style>
<div id="ath">
<div>
<img class="pro" height="120" src="Your Pic URL" width="120" /><i><strong style="font-size: 18px;">Your Heading:</strong></i>
Your Description Here.Your Description Here.Your Description Here.Your Description Here.Your Description Here.Not More Word.

Join Me On: <a href="http://www.facebook.com/##########">Facebook</a>, <a href="http://www.twitter.com/##########">Twitter</a>, <a href="http://plus.google.com/##########">Google Plus</a></div>
</div>
</div>
</b:if>

Customization:

1.) Change All The RED Text With Your Desire One Data.
2.) Save And Done, Feel Free To Ask For More Changing.

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



10 comments :

  1. Replies
    1. I Am Using This On My Blog, You Can See Guest Post Author Box, What's The Error You Are Getting...???

      Delete
  2. how can i add this BOX in blogger??

    ReplyDelete
    Replies
    1. If You Want To Add It Under All Post, Just Add This Code Is Blogger Template, Or If You Want To Add In Some Post, Just Add In Post HTML...

      Delete
  3. Very Informative Post For New bloggers Thanks For Sharing :)

    ReplyDelete
  4. Awesome, really helps me a lot!! Thank you very much.
    The width of the box was very large, but a little css trick fix it to me

    ReplyDelete
    Replies
    1. Thanks For Liking And Using. It's A Responsive Code And Will Be Stretched According To Your DIV.

      Delete
  5. Nice Author Box I tried it on my blog http://thetechsbot.blogspot.com/

    ReplyDelete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.