header ads

How to Add " About the Author " Box Below Every Blogger Post

Unknown October 08, 2015
 
You might have noticed such " About the Author " section on many of the posts at BLoggingeHow. This isn't meant to give all the information about the authors, instead its totally based on few lines describing authors blogging activity. It can link to other pages as per need.

So lets jump in to learn this beautiful tweak for Blogger.



Step 1:

Go to Design >> Edit HTML
Tick the check box.


 


Step 2:

Search for the following code : (Press Ctrl + F)

 ]]></b:skin>


Now just above this code add the following piece of code.


.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px 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;
}

By adding this code, we defined the CSS layout for the " About the Author Area ".
  
Tip : ( Note CSS is always added in the <head> tag.)



Step 3:

Now this is the part where you need to customize you own " About the Author Area " according to your need. Edit the following code as you want.




<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='author-box'>

<p><img alt='' class='avatar avatar-70 photo' height='70' src='Your Photo Link' width='70'/><b>About the Author</b><br/>

<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Write Something About yourself<br/>


Follow Me on Twitter <a href=' Your Twitter Link '>Your Twitter link Anchor text</a>

<p style='margin:-8px 0'><br/><center>

<a href=' Your Blog link ' style='text-decoration:none;font-size:70%;'>Your Blog Name</a></center>
</p></div></p>

</div>

</b:if>


 Change the following things as you wish them to be displayed

  • Your Picture Link
  • About the Author text ( In my case its About Casper Joe )
  • Write Something About yourself
  • Your Twitter Link
  • Your Twitter link Anchor text
  • Your Blog Link
  • Your Blog Name

 Step 4:

Add the above code ( once you are done with editing ) below the following code :



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



Step 5:

Chill out ! You have unlocked an achievement 

Credit:Hassam Ahmad Awan

Post a Comment

0 Comments