Home Blogging Tips & Tweaks How to Add Author's Profile and Image Below Posts in a Blogger...

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

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

Please enter your comment!
Please enter your name here

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments