I saw some Wordpress blogs that has "About The Author" below every of their posts. I just thought, why not implement it on blogger? And here it goes.
First, here's what it looks like.
Let's start,
1. Follow this guide on How To Edit Your Blog Template
2. Find(CTRL+F) ]]></b:skin>
3. Add these codes ABOVE ]]></b:skin>
<!-- ABOUT AUTHOR STYLES http://ilook12.blogspot.com -->
.author {
border: 0;
padding: 0;
}
#author-details {
background: #EBF3FB;
border: 1px solid #D4E2E8;
padding: 5px;
}
#author-details .author-image {
float: left;
margin-right: 10px;
}
<!-- ABOUT AUTHOR STYLES http://ilook12.blogspot.com -->
.author {
border: 0;
padding: 0;
}
#author-details {
background: #EBF3FB;
border: 1px solid #D4E2E8;
padding: 5px;
}
#author-details .author-image {
float: left;
margin-right: 10px;
}
<!-- ABOUT AUTHOR STYLES http://ilook12.blogspot.com -->
The codes in bold are the background and border colors of your author box. Change it to whatever color you want. You can go here for the HTML color codes. I also provided some colors for you.
Blue: #EBF3FB | #D4E2E8
Pink: #FDF9F9 | #E7BABA
Grey: #EFEFEF | #CECFD0
Orange: #FDF1D0 | #FAD163
The first code is the background and the second is the border.
4. Find(CTRL+F) <data:post.body/>
5. Add these codes BELOW <data:post.body/>
<!-- ABOUT AUTHOR http://ilook12.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<div class='author'>
<div id='author-details'>
<b>About the Author</b>
<div class='author-image'><img src='IMG-URL' height='80' width='80'/></div>
<div class='author-desc'>
AUTHOR DESCRIPTION
</div>
<div style='clear: both;'/>
</div>
</div>
</b:if>
<!-- ABOUT AUTHOR http://ilook12.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<div class='author'>
<div id='author-details'>
<b>About the Author</b>
<div class='author-image'><img src='IMG-URL' height='80' width='80'/></div>
<div class='author-desc'>
AUTHOR DESCRIPTION
</div>
<div style='clear: both;'/>
</div>
</div>
</b:if>
<!-- ABOUT AUTHOR http://ilook12.blogspot.com -->
IMG-URL: Change it to the URL of your image
AUTHOR DESCRIPTION: Change it to your description.
You can also change the height and width of the image.
6. Click Save Template
And you're done!
