23 September 2014

Adding Author's Information and Image Below Every Post in a Blogger Blog


Author Profile

I have in the past 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.



Related Reading:


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

  • 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>
.ET-Lab-author{
float:left;
width:500px;
padding:15px;
border:1px solid #ccc;
margin-bottom:15px;
margin-top:15px;
background:url('http://2.bp.blogspot.com/-lFS9wv3qil4/VB3N0ku-WMI/AAAAAAAACig/2n2-7hC6lhw/s1600/ET_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);
}
.ET-Lab-author h2
{
color:#b6e026;font-family:Helvetica,Arial;font
-weight:bold;text-shadow:#64665b 0px 1px 1px;
font-size:28px;margin-bottom:-6px;
}
.ET-Lab-pic{
float:right;
margin:0 0 0 10px;
}
.ET-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;
}
.ET-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);
}
.ET-Lab-soc img
{
height:35px;
margin-bottom:-13px;
}
.ET-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='ET-Lab-author'>
<div class='ET-Lab-pic'>
<img alt='Author Image' height='150' src='
YOUR_IMAGE_URL' width='150'/>
</div>
<h2 >The Author :</h2>
<p> AUTHOR_DESCRIPTION_GOES_HERE </p>
<div class='ET-Lab-soc'>
<p> Follow him on : </p><a href='
FACEBOOK_ADDRESS '><img src='http://1.bp.blogspot.com/-2IZf9ufQpY0/VB3N05QxW8I/AAAAAAAACik/ePoJ2tOJuOw/s1600/ET_facebook.png'
title='Facebook'/></a>    <a href=' TWITTER_ADDRESS '> <img src='http://3.bp.blogspot.com/-GrxhQBgBWXE/VB3N1mfR8gI/AAAAAAAACiw/8ObuNQw7x2o/s1600/ET_twitter.png' title='Twitter'/></a> <a
 href=' GOOGLE_PLUS_ADDRESS ' > <img src='http://2.bp.blogspot.com/-aLBHt1EF6Eg/VB3N1A3S2nI/AAAAAAAACis/W2IZ9RuOW0g/s1600/ET_googleplus.png'
title='Google plus'/></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 GOOGLE_PLUS_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 the other tutorials on adding author box below every post in your Blogger blog, click on any of the related reading links above.

Share:

0 comments:

Post a Comment

IMPORTANT INFORMATION

Please do bear in mind that any Comment left on this Blog that is in no way related to the post under which it is being left, will not be accepted and so won’t be published. For any such unrelated question and enquiries, please use the Contact Us section to get in touch with us and we promise to get back to you 30 minutes after we get your message.

Popular Posts

Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS