Many Blogger Blog users want to have an Author Bio Box, like those seen in WordPress hosted blogs.There is a really simple Blogger Trick to get an Author Bio Box in Blogger Blogs.
Author Bio Box can be useful for those who run multi-author blogs (Blogger Multi-Author Blogs Tutorial Coming Soon!), this tool will automatically put the author box in every article written by a specific author.The Author Bio Box is also useful for blogs like Techgau.org which receive a lot of guest-posts.
Remember, for this tool to work, your authors must have separate log-in to the blogger blog.They must choose a display name which will be used in the code.
So here it is - How To Add WordPress Style Author Bio Box In Blogger Blogs?
Step1) CSS For Author Bio Box -
Visit your Blogger Edit HTML option and press the "Expand Widgets" box.Find this code in your Blogger Blog HTML Template -
Now find this code -
Save! Your author box is now ready, you need to use this code for every author.When an author posts something, the article will contain the author box at the bottom.
I have customized the author box to meet my requirements, you can do so too.Recommended - Blog Name Generator
Gautham On Google+
Author Bio Box can be useful for those who run multi-author blogs (Blogger Multi-Author Blogs Tutorial Coming Soon!), this tool will automatically put the author box in every article written by a specific author.The Author Bio Box is also useful for blogs like Techgau.org which receive a lot of guest-posts.
Remember, for this tool to work, your authors must have separate log-in to the blogger blog.They must choose a display name which will be used in the code.
So here it is - How To Add WordPress Style Author Bio Box In Blogger Blogs?
Step1) CSS For Author Bio Box -
Visit your Blogger Edit HTML option and press the "Expand Widgets" box.Find this code in your Blogger Blog HTML Template -
]]></b:skin> (
Just above it, paste the following Author Bio Box CSS code, this will style the author bio box.You can change the CSS to meet your own style requirements.
.about-author {
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 img {
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #9ED0DE;
display:inline;
float:left;
margin:0 15px 0 0;
}
Step2) Code For Author Bio 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 img {
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #9ED0DE;
display:inline;
float:left;
margin:0 15px 0 0;
}
Now find this code -
<div class='post-footer-line post-footer-line-1'>
Immediately after this code, paste the following Author Bio Box Code -
<div class='about-author'>
<img alt='Display Name' height='100' src='Image URL' width='100'/>
<h4>Author: <a href='Profile URL' target='_blank'><data:post.author/></a></h4>
<p> Short Description</p>
</div>
</b:if>
Step3) Change the bold text in the code, change "Display Name" to the display name chosen by the author, change the "Image URL" to the URL of the image of the author, change "Profile URL" To the website of the author or the profile of the author. Enter a Short Description about the author.<img alt='Display Name' height='100' src='Image URL' width='100'/>
<h4>Author: <a href='Profile URL' target='_blank'><data:post.author/></a></h4>
<p> Short Description</p>
</div>
</b:if>
Save! Your author box is now ready, you need to use this code for every author.When an author posts something, the article will contain the author box at the bottom.
I have customized the author box to meet my requirements, you can do so too.Recommended - Blog Name Generator
|
Get free daily email updates! |
Follow us! 
|
