Monday 23 June 2014

How to Place Author Profile Box Below the Post In Blogger

 Professional blogs need author profile. For good blogs it should be placed below the blog post to visible for everyone. Adding author profile box below the blog post is a new way of making our blog beautiful and professional. Most of the bloggers trying to add their profile below the post only. But some of them adding author profile at the footer. It is not good idea. This author profile box contains your Google plus authorship. So hope me it will be a new one to your blog. It is looking cool and it shows your words with your profile information.
You have to add this box to your blog template. Let me explain how it can be added to your blogger blog. Follow the below simple steps.

Installation Guide

  • Go to Blogger Dashboard ---> Template ---> Edit HTML
  • Search for ]]></b:skin> using Ctrl+F
  • Add the below CSS code just before  ]]></b:skin>

/*-----Author profile box by trickstoo.com starts----*/
#administrator {
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;
}
.authorimg img {
float:left;
width:100px;
border:1px solid #eaeaea!important;
background:#f8f8f8!important;
margin:10px;
padding:15px!important;

Then, search for below code
<div class='post-footer-line post-footer-line-1'>
Just above it, place the below code
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='administrator'>
<div class='authorimg'><img height='115' src='IMAGE URL' width='53'/></div>
<div class='authornames'><h1>YOUR NAME</h1></div>
<div class='Authordesp'>AUTHOR DESCRIPTION<a href='https://plus.google.com/u/0/106333703247631617455? rel=author' rel='author'>Follow Him on Google +.</a></div>
</div>
</b:if>

Note: 


  • Replace 106333703247631617455 with your google+ page ID
  • Replace IMAGE URL, YOUR NAME, AUTHOR DESCRIPTION with URL of your image, Name and short description about you respectively.

Finally, Save your template.

That's all. You are done!

If you like this post share it. If you encounter any problem comment below to get solution. Share your experience with us to leave a comment.

1 comment:

  1. 4S IT Solutions offers a full range of IT services to support your business infrastructure outside of your data center, too. From networking to hardware to applications, our team of certified experts will monitor, manage and maintain your IT environment.
    This is our site please visit for further details...
    https://4sitsolutions.com/

    ReplyDelete