Blog Improvement Center: Adding an Author Box

Pin It

Welcome to the Blog Improvement Center. Every Wednesday you will get a tip, hack, or writing advice to improve your blog. Be on the lookout for DIY projects that will have you blogging like a pro! Don't miss a post, subscribe today!

Have you wondered why Blogger does not have an Author Box like Wordpress?  I looked and I could not find a gadget or widget that supplied the information that I required and did so on every page.  If I am mistaken please, please, please, let me know in the comments.  But no worries, I have the HTML you need to create your own author box.  

Author Box

Join Me Like My Page Follow Me About Me Moms of Dyslexics

Richele McFarlin, author of Under the Golden Apple Tree, founder of Moms of Dyslexics and co-founder of CG Press, enjoys a good cup of coffee as she demonstrates her ability to wrestle HTML to the ground while writing what is on her heart.

I always envied these little boxes. Making it easy for someone to click on another site you own or one of your social media pages increases the likelihood of clicks.

Don't worry, this is very easy.  Keep in mind...this is for Blogger blogs.  Wordpress already has the means made easy for you to add one.   Also keep in mind, this requires you to go into your HTML, so back it up, just in case.

Let's get started!

Go to Template>HTML

Click on expand widgets.

Find this code:

<div class='post-footer-line post-footer-line-1'>

Your code may vary slightly.

You will post the next piece of code, after you customize it, directly above it.

<b:if cond="data:blog.pageType == &quot;item&quot;">

</b:if>

<div class="widget-content" style="background-color: #dfdfdf; color: #222222; font-family: Arial, Tahoma, 'Century gothic', sans-serif; font-size: 12px; margin: 0px; padding: 0px;">

<a href="YOUR GOOGLE PLUS PROFILE URL" style="color: #555555; margin: 0px; outline: none; padding: 0px; text-decoration: initial;"><img alt="My Photo" class="profile-img" height="80" src="URL OF YOUR IMAGE" style="border: 1px solid rgb(204, 204, 204); float: left; margin: 0px 5px 5px 0px; padding: 4px;" width="80" /></a>

<dl class="profile-datablock" style="margin: 0.5em 0px; padding: 0px;">

<dt class="profile-data" style="color: #999999; font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif; font-size: 9px; font-weight: bold; letter-spacing: 0.1em; line-height: 1.6em; margin: 0px; padding: 0px; text-transform: uppercase;"><a class="profile-name-link" href="https://plus.google.com/YOURGOOGLEPROFILE" rel="author" style="background-image: url(IMAGE URL); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">TITLE BESIDE ICON</a>

<a class="profile-name-link" href="YOUR SITE" rel="nofollow" style="background-image: url(IMAGE URL); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">TITLE BESIDE ICON</a>

<a class="profile-name-link" href="YOUR SITE" rel="nofollow" style="background-image: url(IMAGE URL); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">TITLE BESIDE ICON</a>

<a class="profile-name-link" href="YOUR SITE /" style="background-image: url(IMAGE URL); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">TITLE NEXT TO ICON</a>

<a class="profile-name-link" href=" YOURWEBSITE /" style="background-image: url(IMAGE URL); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">TITLE BESIDE ICON</a>

</dt><dd class="profile-textblock" style="line-height: 1.6em; margin: 0.5em 0px; padding: 0px;"><b> YOUR NAME</b>, YOUR BIO. </dd></dl>
</div>
</b:if>

Now, that may look like a jumbled mess but take the time to look closer.  Here it is broken down but remember the code must all go together.

 

<b:if cond="data:blog.pageType == &quot;item&quot;">

</b:if>

<div class="widget-content" style="background-color: #dfdfdf; color: #222222; font-family: Arial, Tahoma, 'Century gothic', sans-serif; font-size: 12px; margin: 0px; padding: 0px;">

<a href="YOUR GOOGLE PLUS PROFILE URL" style="color: #555555; margin: 0px; outline: none; padding: 0px; text-decoration: initial;"><img alt="My Photo" class="profile-img" height="80" src="URL OF YOUR IMAGE" style="border: 1px solid rgb(204, 204, 204); float: left; margin: 0px 5px 5px 0px; padding: 4px;" width="80" /></a>

<dl class="profile-datablock" style="margin: 0.5em 0px; padding: 0px;">

<dt class="profile-data" style="color: #999999; font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif; font-size: 9px; font-weight: bold; letter-spacing: 0.1em; line-height: 1.6em; margin: 0px; padding: 0px; text-transform: uppercase;"><a class="profile-name-link" href="https://plus.google.com/YOURGOOGLEPROFILE" rel="author" style="background-image: url(IMAGE URL); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">TITLE BESIDE ICON</a>

<a class="profile-name-link" href="YOUR SITE" rel="nofollow" style="background-image: url(IMAGE URL); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">TITLE BESIDE ICON</a>

<a class="profile-name-link" href="YOUR SITE" rel="nofollow" style="background-image: url(IMAGE URL); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">TITLE BESIDE ICON</a>

<a class="profile-name-link" href="YOUR SITE /" style="background-image: url(IMAGE URL); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">TITLE NEXT TO ICON</a>

<a class="profile-name-link" href=" YOURWEBSITE /" style="background-image: url(IMAGE URL); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">TITLE BESIDE ICON</a>

</dt><dd class="profile-textblock" style="line-height: 1.6em; margin: 0.5em 0px; padding: 0px;"><b> YOUR NAME</b>, YOUR BIO. </dd></dl>
</div>
</b:if>

Does that make it a bit easier to read?  Replace the red bolded text with the information asked.  When adding in your name and bio you simply type it out.  For image URL, you upload an image to an image hosting site like Photobucket and then click on share and finally copy the direct link.  Images in my author box are 16x16.

Also notice in purple,  rel="author".  Google author verification ready!  To complete that task you will need to link to your author page with rel="me" and then link your Google+ profile to your blog's author page. So, basically you are linking your posts to your author page and your author page to Google and back again. I may post on this process but to tell you the truth, I had a terrible time doing it.  I need to recover a bit. :)  

The HTML color code I highlighted in green is the author box's background color.  You can change it to match your blog or make it completely white.  Experiment to see what shows up best on your blog.

Once you add the code to your template, preview it first, to make sure it looks like you want it.

Happy blogging!

Add Social Media Icons to Your Blogger Header.