I Look 12

Blogging, Computers, Internet, Gaming, Make Money Online


Add "About The Author" Below Blogger Posts






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.

I also have one below this post.
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 -->

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 == &quot;item&quot;'>
<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!










What are the benefits of being a subscriber?
All subscribers will get these updates directly from their email.
  • Blogging/SEO tips and tutorials
  • Technology news and tips
  • Computer tips, guides and optimizations
  • Gaming tips, tricks and cheat guides
  • Online money making tips
If you wish to subscribe, just fill up the form below:
Email address:
Lijit Search

Followers

Translate