If you're running a multiple author blog on Blogger where you have a set number of authors, you can display a cute little Author Byline with profile image, name, short description and twitter follower button.
It's great to have such a short byline as the reader feels more attached to the content and engages far better. The widget can be used for multiple authors on your blog, though you have to add the details to the code manually.
Follow the simple steps below to add author bio byline below blogger post title.
Step #1 Add Your Author Details To The Code Bellow
Copy the following code to any text editor of your choice and replace the following tags as per your blog.
<b:if cond='data:post.author == "First Author Name"'>
<div class='sharetitle by-line by-line-inline'>
<a class='by-line-author-img' data-component='byLineDefault' data-ordinal='1' data-source='byLineDefault' data-type='authorId' href='First Author Profile Link'>
<img height='80' src='First Author Image Link' style='display:block;' width='85'/>
</a>
<div class='by-line-info' itemprop='author' itemscope='' itemtype='http://schema.org/Person'>
<a class='muted' data-component='byLineDefault' data-ordinal='1' data-source='byLineDefault' data-type='authorName' href='First Author Profile Link' rel='author'>
<div class='heading' itemprop='name'>By First Author Name</div>
</a>
<a class='muted' data-component='byLineDefault' data-ordinal='1' data-source='byLineDefault' data-type='authorSite' href='First Author Profile Link'>
<div class='site-expert'> First Author Description (e.g Founder BloggingeHow) </div>
<br/>
<a class='twitter-follow-button' data-show-count='false' data-size='medium' href='https://twitter.com/TwitterUserName'>Follow @TwitterUserName</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</a>
</div>
</div>
</b:if>
<style>
.site-expert{font-size:12px;}
.by-line {
margin-bottom: 13px;
margin-top: 4px;
}
.by-line .heading {
margin: 0;
}
.by-line.by-line-inline .by-line-info {
display: inline-block;
vertical-align: top;
}
.by-line.by-line-inline .by-line-author-img {
margin-right: 11px;
}
.by-line.by-line-stacked .by-line-author-img {
margin-bottom: 14px;
}
.by-line.by-line-guestauthor {
color: #989898;
font-size: 15px;
padding-top: 5px;
}
.by-line-author-img {
border-radius: 100%;
display: inline-block;
margin-top: -0.38em;
overflow: hidden;
vertical-align: top;
}
.by-line-info {
font-size: 15px;
line-height: 17px;
}
.by-line-info a {
display: block;
}
a.muted, a.muted:hover {
color: #989898;
text-decoration:none;
} </style>
Customization:
Now simply replace all the colored tags as per their description. You'd have to add the following details:
1- First Author Name
2- First Author Profile Link
3- First Author Image Link
4- First Author Description (e.g Founder BloggingeHow)
5- TwitterUserName
How To Add For Multiple Authors?
To implement it for more authors, simply paste more code for alternate authors as below:
<b:if cond='data:post.author == "Author Name"'>
<div class='sharetitle by-line by-line-inline'>
<a class='by-line-author-img' data-component='byLineDefault' data-ordinal='1' data-source='byLineDefault' data-type='authorId' href='Author Profile Link'>
<img height='80' src='Author Image Link' style='display:block;' width='85'/>
</a>
<div class='by-line-info' itemprop='author' itemscope='' itemtype='http://schema.org/Person'>
<a class='muted' data-component='byLineDefault' data-ordinal='1' data-source='byLineDefault' data-type='authorName' href='Author Profile Link' rel='author'>
<div class='heading' itemprop='name'>By Author Name</div>
</a>
<a class='muted' data-component='byLineDefault' data-ordinal='1' data-source='byLineDefault' data-type='authorSite' href='Author Profile Link'>
<div class='site-expert'> Author Description (e.g Founder BloggingeHow) </div>
<br/>
<a class='twitter-follow-button' data-show-count='false' data-size='medium' href='https://twitter.com/TwitterUserName'>Follow @yourusername</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</a>
</div>
</div>
</b:if>
Step #2 Add The Final Code To Blogger
Now to add the code to Blogger, navigate to Blogger Dashboard >> Edit HTML and search for the following code:
<div class='post-header-line-1'/>
Finally, now paste the code beneath the one you found above. Hit save and Enjoy!
I hope the widget would give a refreshing look to your blog. Stay blessed.
