Customizing Blogger's New Feature - About Author Below Posts

Unknown
professional author box widget




I always wondered that why Bloggers never draws it's attention towards multi authored blogger blogs. And it's true that blogger was not having about author section in it's default blogs but now blogger has brought this feature in all of it's default templates.

I've already written a tutorial on how to add this widget in your blogger sites.


Before proceeding to this tutorial you must know that that this widget is linked to your Google+ id and it fetch out the description part and name of the author from your Google+ profile. Therefore this widget is very handy, because you don't need to do much of coding and and writing in your HTML editor. (may be beginners would be happy to listen this)

Screenshot of this widget looks something like this


Suryakant sao


Let's Start Implementing

Before implementing it you need to read the first tutorial otherwise there are the chances of making mistakes while implementing it. After you have read the posts open Blogger Dashboard → Template → HTML Editor then search for <div class='post-footer'> 





After that paste the below given code after it

XML

<div class='post-footer-line post-footer-line-1'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3 class='abt_author'>About The Author</h3>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<a expr:href='data:post.authorProfileUrl'>
<div class='auhtor-image'>
<img expr:src='data:post.authorPhoto.url' itemprop='image' width='100px'/>
</div>
</a>
</b:if>
<div>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<p class='description' itemprop='description'><data:post.authorAboutMe/></p>
</div>
</b:if>
</div>


So you've successfully added the HTML stuff, okay now in this step we'll customize it using CSS.
You need to find this code in your blogger template by pressing Ctrl+F ]]></b:skin>. Now paste the below given code just before it.


CSS

.author-profile {border-top: 1px solid #CCC;border-bottom: 1px solid #CCC;margin: 20px 5px 0 0px;padding: 25px 0 15px;position: relative;}
.author-profile img{border:1px solid #EFEFEF;float:left;margin-right:5px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%}
.author-profile > div > a{color:#444}
.author-profile > div{font-size:14px;font-family:helvetica;margin:0}
p.description{font-size:95%;margin:0;line-height:1.7em}
p.description a{color:#333;font-family:arial rounded mt bold}
a.g-profile{font-size:30px;font-family:brush script std;margin:15px 0 5px}
.auhtor-image img{color:#FFF;margin-right:2%;border-color:#FF6854;border-style:groove;border-width:10px;padding:0}
h3.abt_author{margin: 0;position: relative;bottom: -35px;z-index: 10;background: #FFF;display: inline-block;padding: 0 5px 0 0px;}

After successfully pasting the code save your template and you're done. So this was the simple thing made special using CSS. 
If you enjoyed this article, you might also like..

Followers