Home » » How To Add Author Bio Box In Blogger Blogs

How To Add Author Bio Box In Blogger Blogs

Rendyon | 2:16 AM | 0 comments
The Author bio box is very popular now a days. It not only introduce the author to the world but also good for proving “Authorship of the article” in Google search results.You can learn more about Google authorship here – ” Display your picture in Google search results“. .
Bio box is not too much difficult for word press or normal website users, but what about Blogger users ?
Blogger is very popular in newbies and they also want to have a bio box on there blogs. So here is a great tip to create a author bio box in blogger blogs, these simple codes will put a author bio box at the footer of article.
Before using these codes, please make sure that every author of your blog have separate login and must have “Display name” as it will be used within these codes.
Here is how to add author bio box in blogger blogs -
Step 1 - Login to blogger and click the “Template” button. Now click on “Edit Html” button, a popup window will open.Click on “Proceed” button.Here you may see some HTML coding, click ”Expand widgets templates” check box at the top of popup window. Now find  ”</b:skin>” in the opened document.Now  just before ” ]]</b:skin> ”  place these codes -
.about-author-box {
background:#EBF3FB none repeat scroll 0 0;
border:1px solid #D4E2E8;
font-size:1em;
line-height:1.5em;
margin:0 0 20px;
padding:10px;
}
.about-author-box img {
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #9ED0DE;
display:inline;
float:left;
margin:0 15px 0 0;
}
Step 2 - Next step is to find these codes in the same document -
<div class=’post-footer-line post-footer-line-1′>
Then just after <div class=’post-footer-line post-footer-line-1′> place these codes  -
<div class=’about-author-box’>
<img alt=’Author name‘ height=’100′ src=’Author image URL here‘ width=’100′/>
<h4>Author : <a href=’Author profile URL here‘ target=’_blank’><data:post.author/></a></h4>
<p> Author’s short intro here</p>
</div>
</b:if>
Step 3 - Now click “Save template” that’s it …. Please do not forget to change Author name, Author image URL, Author profile URL and Author’s short intro in step 2….
Share this article :

0 comments:

 
Copyright © 2011. Find Updates - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger