-

How to Add Author Bio in Every Post (Quick Steps)

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

Step 1:

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

Vikasmantra.blogspot.com
HTML edit

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;<!- blackground colour-->
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 Hassam Ahmad Awan )
  • Write Something About yourself
  • Your Twitter Link
  • Your Twitter link Anchor text
  • Your Blog Link
  • Your Blog Name
like My Own Editing

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

    <div class='author-box'>

    <p><img alt='Vikasmantra.blogspot.com' class='avatar avatar-70 photo' height='70' src='https://lh5.googleusercontent.com/-Y_92usm6R6Q/AAAAAAAAAAI/AAAAAAAAAAA/L5odj0kPfKs/s250-c-k/photo.jpg' width='70'/><b>About Me</b><br/>

    <div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Hi I am a Software Developer from India Just Started BLogging for Improving My Knowledge and to make good contacts<br/>


    Like Our Fan Page on Facebook<a href='http://www.facebook.com/Vikastricksonline'>Vikastricksonline</a>
    Follow Me on Twitter <a href='http://twitter.com/vikasmantra'>VikasManta</a>

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

    <a href='Vikasmantra.blogspot.com' style='text-decoration:none;font-size:70%;'>Vikas Tricks Online</a></center>
    </p></div></p>

    </div>

    </b:if>
 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'/>

OR

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



Step 5:

Chill out ! You have unlocked an achievement 


Thank to  Hassam Ahmad Awan

No comments:

Post a Comment

Do you have any opinion, please leave a comment or share this post in your social network Also feel free to contact us OR drop your problem below in comment section.!!

Related Posts Plugin for WordPress, Blogger...