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

1,139 views

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:
<style>
 .BSprofileBorder {
 margin:0 auto;
 padding:5px;
 width:290px;
 border-radius:5px;
 border: 5px #009999 solid;
 min-height:70px;
 }.BSprofileBorder1 {
 margin:5px auto;
 padding:5px;
 width:auto;
 border-radius:5px;
 border: 5px #80C8FE solid;
 min-height:70px;
 }#BSprofile{
 border:2px solid #888;
 margin:2px 5px 0px 5px;
 padding:2px;
 }
 #BSprofile:hover {
 border:2px solid #ccc;
 cursor:pointer;
 }
 .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;
 } 
</style>
<div>
 <div>
 <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>
</div>
</div>     

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

Comments

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