add author information and image for blogger

How to Add Author’s Profile and Image Below Posts in a Blogger Blog

Blogging Tips & Tweaks Tips & Tweaks

I have written about how to add an author’s profile image and description below every post in a Blogger blog which I have seen several people applying to their blog. Today I want to make a little change to that author box by adding social media buttons below the description so that visitors to your blog can follow you on the three of the major social media sites on the internet, and also a mouse hover effect on the author’s image which is purely made of CSS so as not to have any effect on your blog’s load time.

To add this widget to your Blogger blog, follow the steps below;

  • Login to your Blogger Dashboard.
  • Go to Template >>> Edit HTML.
  • On the Edit HTML page, search for any of the below codes with the help of Ctrl + F.

<data:post.body/>

OR

<div class=’post-footer-line post-footer-line-1′>

OR

<div class=’post-footer-line post-footer-line-2′>

OR

<div class=’post-footer-line post-footer-line-3′>

  • Copy the code below and paste immediately after/below any of the codes you found above.
<style>

.EdHelper-Lab-author{

float:left;

width:500px;

padding:15px;

border:1px solid #ccc;

margin-bottom:15px;

margin-top:15px;

background:url('https://www.educativehelper.com/wp-content/uploads/2019/12/EdHelper_background.png');

color:#444444;

-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0,

 .3);

-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3

);

box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);

}

.EdHelper-Lab-author h2

{

color:#b6e026;font-family:Helvetica,Arial;font

-weight:bold;text-shadow:#64665b 0px 1px 1px;

font-size:28px;margin-bottom:-6px;

}

.EdHelper-Lab-pic{

float:right;

margin:0 0 0 10px;

}

.EdHelper-Lab-pic img{

border:1px solid #999999;

-webkit-transition:-webkit-transform .15s

linear;

-moz-transition:-moz-transform .15s linear;

-o-transition:-o-transform .15s linear;

transition:transform .15s linear;

-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);

box-shadow:0 3px 6px rgba(0,0,0,.25);

padding:5px 5px 5px 5px;-webkit-transform:

rotate(+5deg);

-moz-transform:rotate(+5deg);-ms-transform:

rotate(+5deg);

-o-transform:rotate(+5deg);transform:rotate(+5

deg);float:left;

}

.EdHelper-Lab-pic img:hover{

background:#FFFFFF;

-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0,

 .3);

-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3

);

box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);

-webkit-transform:rotate(-1deg);

-moz-transform:rotate(-1deg);

-ms-transform:rotate(-1deg);

-o-transform:rotate(-1deg);

transform:rotate(-1deg);

}

.EdHelper-Lab-soc img

{

height:35px;

margin-bottom:-13px;

}

.EdHelper-Lab-soc  p

{

font:16px georgia;

color:#ffffff;

background:#b6e026;

display:inline;

border-radius:5px;

padding:5px;

margin-right:30px;

}

</style>

<b:if cond='data:blog.pageType == "item"'>

<div class='EdHelper-Lab-author'>

<div class='EdHelper-Lab-pic'>

<img alt='Author Image' height='150' src='

YOUR_IMAGE_URL' width='150'/>

</div>

<h2 >The Author :</h2>

<p> ENTER_AUTHOR_DESCRIPTION_HERE </p>

<div class='EdHelper-Lab-soc'>

<p> Follow him on : </p><a href='

FACEBOOK_ADDRESS '><img src='https://www.educativehelper.com/wp-content/uploads/2019/10/EdHelper_facebook.png'

title='Facebook'/></a>    <a href=' TWITTER_ADDRESS '> <img src='https://www.educativehelper.com/wp-content/uploads/2019/10/EdHelper_twitter.png' title='Twitter'/></a> <a

 href=' LINKEDIN_ADDRESS ' > <img src='https://www.educativehelper.com/wp-content/uploads/2019/10/EdHelper_linkedin.png'

title='Linkedin'/></a></div>

</div>

</b:if>

Changes to Make:

These are the changes you need to make to apply this author box to your Blogger blog;

  • Replace YOUR_IMAGE_URL with the URL link to the image you want to use as the author image. Make sure your picture has been resized to a dimension of 150 by 150 px.
  • Change FACEBOOK_ADDRESS, TWITTER_ADDRESS, and LINKEDIN_ADDRESS to your social media names for the three respective social media as required for the widget.

With that change made to the above code, the author widget will start displaying your information to visitors on your Blogger blog.

  • Finally click on Save Template and you are done.

For questions, please free to use the comment section below. I will be very glad to assist you.

Leave a Reply

Your email address will not be published. Required fields are marked *