We all know that when it comes to web site design, Authors bio boxes with their images and description plays a huge role in the sites/blogs that have multiple authors playing their role in making the blog better and bringing out high quality content to their readers. In today's online community where people tend to related content with the reader behind it, its too important to display an authors profile beside the article so that at least readers would know who they are listening to.
So looking forward to that, we are sharing another great authors profile widget that features a 90x90 image of author with a new style description area that divides its self into to section. Before we move further sharing the widget code, you may get through our previous author profile articles too:
Go to Blogger Template >> Edit HTML and backup your template. Find the following code below (Ctrl + F)
Once you've found the above code line, simple paste the following code below with authors image link, his name and description edited. (as shown in the step 2.)
Now added the highlighted text that includes authors image link, authors name and description in the code above. Once done, simply hit save and your done.
Do let us know how you found this authors profile box. Should we post more of such widgets in the future? Leave your queries below in case you need any help regarding this widget, i would come back to you guy as soon as possible.
So looking forward to that, we are sharing another great authors profile widget that features a 90x90 image of author with a new style description area that divides its self into to section. Before we move further sharing the widget code, you may get through our previous author profile articles too:
- Top 18 WordPress 'Author Bio Boxes' Plugins
- How to Add " About the Author " Box Below Every Blogger Post
- How To Add Multiple Author Box/Bio In Blogger
How To Add The Author Box?
Step #1
Go to Blogger Template >> Edit HTML and backup your template. Find the following code below (Ctrl + F)
<div class='post-footer-line post-footer-line-1'>
Once you've found the above code line, simple paste the following code below with authors image link, his name and description edited. (as shown in the step 2.)
<div id="author-info">
<div id="author-image">
<img width="90" height="90" class="avatar avatar-80 photo" src="AUTHOR IMAGE LINK" alt=""> </div>
<div id="author-bio">
<p id="author-name">by <strong>AUTHOR NAME</strong></p>
<div id="author-desc"><p>AUTHOR DESCRIPTION</p></div>
</div>
<span class="last-child" style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:55px;
"><a style="color:#D3D3D3;" href="http://www.bloggingehow.com">Widgets</a></span>
</div>
<style>
#author-info {
background-color: #BBBBBB;
border: 1px solid #999999;
box-shadow: 0 0 25px #A0A0A0 inset, 0 2px 2px #E0E0E0;
margin: 0 -35px 25px;
padding: 25px;
position: relative;
}
#author-bio {
margin: 0 50px 0 135px;
}
#author-image {
left: 50px;
position: absolute;
}
#author-image img {
border-radius: 4px 4px 4px 4px;
box-shadow: 2px 2px 0 #999999;
}
#author-name {
background-color: #F9F9F9;
border-radius: 2px 2px 2px 2px;
box-shadow: 2px 2px 0 #999999;
display: inline-block;
font-size: 16px;
margin-bottom: 16px;
padding: 3px 8px;
}
#author-desc p {
background-color: #F9F9F9;
border-radius: 2px 2px 2px 2px;
box-shadow: 2px 2px 0 #999999;
display: inline-block;
font-size: 13px;
line-height: 1.1;
margin-bottom: 4px;
padding: 4px 6px;
color: #444444;
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size: 13px;
}
p {
line-height: 1.5;
padding-bottom: 15px;
}
</style>
Step #2
Now added the highlighted text that includes authors image link, authors name and description in the code above. Once done, simply hit save and your done.
Help Desk
Do let us know how you found this authors profile box. Should we post more of such widgets in the future? Leave your queries below in case you need any help regarding this widget, i would come back to you guy as soon as possible.
No comments