Saturday, November 16, 2013

How to Put Author Box Bio Below post on Blogger

How to put Author Bio Box below post on BloggerFor a more professional Blogging experience, You will also need to put an author box on your every post for your visitors to know who the author is and who you are. And also many Bloggers use this technique and it makes their site have a bit more professionalism and a more user friendly Blog. And it can also contain your Google Plus Authorship so you will not be inserting it anywhere in your Blog.

Author Box DEMO:

If you want to see the DEMO of the Author Box below post for your Blogger Blog, Just see the image below. And if you may like to insert it inside your Blog, Just follow the procedure and make your site add a bit of awesomeness.


How to put Author Bio Box below post on Blogger

Procedure on How to put Author Bio Box below post on Blogger:

  • First thing to Login to your Blogger Account ( I assume that you know how to login to your account).
  • Go to Templates > Edit HTML.
  • Then search for this code
<div class='post-footer-line post-footer-line-1'>
  • Just above it, Paste the below code: 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='adminprofiler'>
  <div class='Authoravata'><img height='115' src='http://s12.postimg.org/62h5f8719/justine.jpg' width='53'/></div>
<div class='authornames'><h1>YOUR NAME</h1></div>
  <div class='Authordesp'>AUTHOR DESCRIPTION <a href='https://plus.google.com/u/0/114545248902716466414? rel=author' rel='author'>Follow Him on Google +.</a></div>
</div>
</b:if>
  • Then next is paste the below code just above: ]]></b:skin>
/*-----Author Box by http://tronicflow.blogspot.com----*/
#adminprofiler {
float:left;
width:100%;
border-top:1px solid #eaeaea;
margin-top:30px;
border:1px solid #eaeaea;
padding-top:10px;
padding-right:10px;
background:#fdfdfd!important;
margin-bottom:30px;
}
.Authoravata img {
float:left;
width:100px;
border:1px solid #eaeaea!important;
background:#f8f8f8!important;
margin:10px;
padding:15px!important;
}
.Authordesp {
padding-bottom:20px;
font-size:13px;
}
/*------Author Bio close--------*/

CUSTOMIZATIONS:

  • http://s12.postimg.org/62h5f8719/justine.jpg - Replace it with your own image's Direct Link.
  • 114545248902716466414 - Replace it with your own Google Plus URL.
  • YOUR NAME - Replace with your own name.
  • AUTHOR DESCRIPTION  - Your Identity description, Just make it short.
If you have any problems applying it on your Blog, Please just put your comments below.

Credit Expert

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

0 comentarios:

Post a Comment

 

Copyright @ 2013 Mybloggerzone.

Designed by Templateiy & CollegeTalks