Saturday 1 December 2012

Filled Under: , ,

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

Posted By: Unknown - 10:07

 Adding About the Author box below every blog post is fairly easy. It gives a professional  look to the blog. You might havecome across   such widgets in WordPress blogs, but unfortunately there is non for blogger so we need to add some code in Edit HTML.

After working out this post you will end up something like this : 
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 Zaib Abbasi )
  • 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

Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

2 comments:

Subscribe to: Post Comments (Atom)

© 2013 iPRESS. All rights resevered. Designed by Templateism