How You can Add WordPress Style Author Bio Box In Blogger

Hello friends, today’s feature is from Gautham A‘s tutorial on how you can add the WordPress style author bio box in your Blogger site. You must have noticed that many bloggers have those author bio box in their WordPress sites, and probably you want that to execute on your Blogger, no worries as you will be able to have similar bio box via this featured trick.
The Author Bio Box is very useful especially if run multi-author blogs because it automatically put the box in every article you post. It’s also used in Techgau.org.
Step 1: CSS For Author Bio Box -
Go to Blogger Dashboard > Edit HTML > “Expand Widgets”
Look for this code

]]></b:skin> (

Above that code, copy and paste this code:

.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;
 }

Step 2: Coding for For Author Bio Box
Search for the following 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>

Step 3: Please feel free to change the bold texts in the code.  Change the following: “Display Name” to show name of the author, “Image URL” to your image’s url, “Profile URL” to your site. Enter short description about you (author).
Step 4: Save.

Share it Please

Tweet

Islamicvideoportal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.