Add About Author Box In Blogger With Social Buttons v1

About author box is a connection box with you and your blog/website users, as you can see all professional bloggers has nice reputation on all social media networks therefor I have added 4 social media buttons in this about author box, this about author box for blogger blogs have stunning features like author image rotating with shadow effects, you can add link of your about page in last line, more space for text and social media buttons for getting more social media subscribers, with out any time wasting lines I'm going to show you "How To Add a Fancier About Author Box in Blogger Blogs ?", read below simple steps. *You can see this widget live in footer area of this website*.
Add About Author Box In Blogger With Social Buttons v1

Why To Add About Author Box In My Blog ?

  1. With this box your blog users can quickly reached you with some clicks your blog users can tell you there problems and suggestions.
  2. I have added 4 major social media networks buttons in this box for getting more and more social subscription and reputation.
  3. With this box you can convert your blog visitors into users (daily visitors), also you can get more trust of Google for author rank with your blog queries in Google search results.

Features of This About Author Box

  1. I have added some awesome features in this box, like rotating image of author, yes this box have this feature you just need to add author image URL this feature will appear automatically.
  2. Another new and awesome feature of this author info box is its have 4 major social buttons, so can add your social profile links in this box.
  3. Simple yet classy : this box don't effect your blog's load time.

How To Add Author Bio Box In My Blog ?

Hey! now read below simple steps for adding this box into your blog.
  1. Go to (log in)
  2. Select your blog and go to its layout section
  3. Scroll down and click on add widget in footer menus
  4. Copy below coding and paste it into HTML area of new widget-
<!--[if !IE]> -->
border:2px solid #888888; margin:2px 5px 0px 0px; padding:2px;}

#profileumer:hover {
border:10px solid green;

.opacity  {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(6deg);
-o-transform: rotate(8deg);
-webkit-transform: rotate(9deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1; }
.opacity: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 #551111;}

border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;}

#profileumer:hover {
border:2px solid #ccc;

.opacity  {
opacity: 0.5;
-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;
zoom: 1; }
.opacity:hover  {
opacity: 2;
zoom: 2;
-moz-box-shadow: 1px 1px 4px #124123;
-webkit-box-shadow: 1px 1px 4px #643345;
box-shadow: 1px 1px 4px #sdafdf;}
<img class="opacity" id="profileumer" src="" align="left"/>
<div class="ts-fab-social-links"><a href="" title="Twitter"><img src="" alt="My Twitter profile" height="24" width="24"></a><a href="" title="Facebook"><img src="" alt="My Facebook profile" height="24" width="24"></a><a href="" title="Google+"><img src="" alt="My Google+ profile" height="24" width="24"></a><a href="" title="Pinterest"><img src="" alt="My Pinterest profile" height="24" width="24"></a></div>
Hi..! I am Umer Prince founder of GSS Network which offers Web Services and Online Business Solutions to clients around the globe.
Share This Blog For More Articles ..! Support Me I Will Do My Best For You All, Thanks In Advance..!<a style="color:#898;" href="">Contact To Me</a>  <br/> </![endif]--><Script Language='Javascript'>

Customization :

Change RED colored links with your profile links, Change GREEN colored link with your image link and Change BLUE colored text with your details (about author).

Final Words

So friends now I think you can easily add about author box into your blogs/websites, if not then let me know why ? in comments form below, and do me a favor share this article as much as you can.
Previous Post Next Post