Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » How To Add An Authors Bio With CSS Hover Effect

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How To Add An Authors Bio With CSS Hover Effect

How To Add An Authors Bio With CSS Hover Effect

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


If you’re looking to do something different for displaying your author’s information (a.k.a. author’s box) you can try out this nice HTML/JavaScript widget created by Mohammad Fazle Rabbi. It’s basically an author’s bio that features a nice CSS hover effect on your image.

You can check out his demo here.

Trying this out on your blog is as easy as adding a new gadget. Here’s how:

  • In your Blogger dashboard, head over to the Layout tab.
  • Select and click on an Add a Gadget button then choose HTML/JavaScript.
  • Copy and paste the code below:
 .BSprofileBorder {
 margin:0 auto;
 border: 5px #009999 solid;
 }.BSprofileBorder1 {
 margin:5px auto;
 border: 5px #80C8FE solid;
 border:2px solid #888;
 margin:2px 5px 0px 5px;
 #BSprofile:hover {
 border:2px solid #ccc;
 .BSprofileopacity  {
 opacity: 0.5;
 margin-left: 50px;
 -moz-transition: all 0.5s ease-out;
 -o-transition: all 0.5s ease-out;
 -webkit-transition: all 0.5s ease-out;
 -ms-transition: all 0.5s ease-out;
 transition: all 0.5s ease-out;
 -moz-transform: rotate(7deg);
 -o-transform: rotate(7deg);
 -webkit-transform: rotate(7deg);
 -ms-transform: rotate(7deg);
 transform: rotate(7deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
 zoom: 1;
 .BSprofileopacity:hover  {
 opacity: 1;
 margin-left: 0px;
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 transform: rotate(0deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
 zoom: 1;
 -moz-box-shadow: 1px 1px 4px #000;
 -webkit-box-shadow: 1px 1px 4px #000;
 box-shadow: 1px 1px 4px #000;
 <img id="BSprofile" height='50' src="YOUR_IMAGE_OR_PICTURE" width='50' align="left"/>
 I'm <a rel="me" href=https://plus.google.com/u/0/GOOGLE_PLUS_ID/ title="YOUR NAME" target="_blank"> YOUR NAME </a> YOUR OTHER INFORMATION </span> >>>
 <a style="color:#888;" href="ABOUT_ME" target="_blank">Read More &#187;</a>

Change the following details highlighted in red above:

YOUR_IMAGE_OR_PICTURE – the URL/link to your image or profile picture

GOOGLE_PLUS_ID – this is where you put your 21-digit Google+ ID

ABOUT_ME – the URL/link to your ‘About Me’ page

YOUR NAME – this is self-explanatory

YOUR OTHER INFORMATION – this is where you can put your country/location, your title (ex. Admin, Writer, etc.) or any other basic information about yourself.

NOTE: if you know enough about CSS, you can also edit the border color to your liking.

  • Save the widget and you’re done.
  • View your blog to see the result.

Liked It ? Please Share

Related Tricks & Tutorials


One Response | Post A Comment | Subscribe To Comments RSS Feed

  1. Thanks For this, i using it now

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here