How to Display Author Profile and Picture in Blogger Blog?

Hey guys, welcome to my post. This post tells you on displaying an Author Profile in Blogger Blog. Creating an author profile with the picture is a good idea for every blogger. Because every visitor wants to know about the author of the blog after reading the blog posts. So, in my opinion, it should not be avoided.

Here I will explain in details on how to make author bio with the picture in blogger. Let's get started-

1. Go to www.blogger.com with login.

2. Click on 'Layout' from the blogger dashboard.

3. Click on 'Add a Gadget'>>HTML/Javascript.
4. Now copy the codes below and paste into the 'HTML/Javascript box' and click on 'Save'.




<p><img alt="author" src="https://i.imgur.com/f67fKwx.jpg" class="avatar avatar-85 photo" height="85" width="85" />Hello, my name is Ranjan Barman. I'm a professional blogger. <br /><a href="#" style="
    color: #0288d1;
">Learn More →</a></p>

<br /><br />
<div id="footer-social-icons">
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a>
<a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
<a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>
<a href="URL-HERE" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
<a href="URL-HERE" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
</div>
<style>
#footer-social-icons a {
    background: #fff;
    color: #333;
    display: inline-block;
    text-align: center;
    font-size: 16px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 0 1px 6px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}
#footer-social-icons a:hover{
background: #0288d1;
color:#fff;
}

</style>
<style>
.avatar-85 {
    border: 3px solid #fff;
    border-radius: 85px;
    margin-right: 10px;
}
.avatar {
    float: left;
}
</style>


N.B: You have to change some of the codes. Replace the first red color code with your own picture link. The third red color code is replacing for your own autobiography. And the next # red color is for the link where more about you. Finally, you can replace URL-Here set there your own social profile or page link. If you do not understand it clearly, then please comment in the comment box below.

Tags: how to add an author bio in blogger, author bio widget blogger, author box for blogger ,how to add the author name to blogger posts, author widget for blogger stylish about me widget for blog, how to add an author in blogger, Blogger profiles Page navigation, Blogger about me profile widget, how to create author bio profile in blogger blog. About Me profile in blogger blog.


EmoticonEmoticon