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.

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.

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 == "item"'>

<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 == "item"'>

    <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'/>

Find

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

Step 5:

Chill out ! You have unlocked an achievement

Thank to Hassam Ahmad Awan

TIPS N TRICKS ONLINE By Vikas

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

About The Author

No comments:

Post a Comment