Add Beautiful Author Bio Box to Blogger Home Page

By | August 17, 2013
Author BoxThis blog aims to provide best blogger resources to all of you who want to decorate their blogger blogs with beautiful widgets and effects. Today, I have a small but beautiful author bio box for your blogs, This author widget is actually added to the home page of your blog. This is not something, which you add below each post in Blogger, but this will be a nice widget, which you can easily add in the footer of your blog’s home page. It will contain a short bio of the author of the blog and a link to read more about him. Moreover, it will be having a picture of the author which will rotate upon user mouse hover. Let’s start how to add this widget to your blogger blog.
Before adding this small piece of blogger widget to your blog, kindly have a look at the footer of this blog, you’ll find an author bio box at the left side of the footer, so you are gonna add the same widget to your blog.

How to Add Author Box in blogger?

The procedure of adding this widget is just simple and easier. Just take below steps in order to add this widget to your blog:

  • Go to Blogger Dashboard >>> Layout
  • Add a widget >>> Add HTML/JavaScript Widget
  • Copy and Paste Below Code into HTML/JavaScript widget

<h3 class=”title”>About Me</h3>

<div class=”widget-content”>

<!–[if !IE]> –>

<style>

}

#bbc:hover

{

border:2px solid #ccc;

cursor:pointer;

}

.opacity

{

opacity: 0.5;

margin-right: 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);

}

.opacity:hover

{

-moz-transform: rotate(0deg);

-o-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

-moz-box-shadow: 1px 1px 4px #000;

-webkit-box-shadow: 1px 1px 4px #000;

box-shadow: 1px 1px 4px #000;

}

</style>

<!–[endif]—->

 

<style>

#bbc

{

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

}

#profileAditya:hover

{

border:2px solid #ccc;

cursor:pointer;

}

.opacity:hover

{

opacity: 1;

-moz-box-shadow: 1px 1px 4px #000;

-webkit-box-shadow: 1px 1px 4px #000;

box-shadow: 1px 1px 4px #000;

}

</style>

<img class=”opacity” id=”bbc” src=”http://4.bp.blogspot.com/-crOz5rKvC4E/UesduJflAfI/AAAAAAAAj4w/l3SPWAu_uw0/s1600/0000.jpg” width=”100″ />

<div style=”font-family: Arial Tahoma Verdana; font-size: 13px; text-align: justify; margin-top:-110px; padding-left:120px;”>

<b>Founder & Author:</b> Zeeshan Shaukat is a web designer, web developer and SEO expert currently working on several web projects, he is managing several blogs from his living </div>room alone. He has passion to create video tutorials. He currently makes video tutorials in English, Urdu and in Pashto..<a style=”color:#5634;” href=”http://www.bestbloggercafe.com/p/about-me.html” target=”_blank”>…Read More</a><!–![endif]—->

</div>

Just make these customization:

  • Change the Blue color image URL to your image URL
  • Change the Red color link to your About Me Page Link
  • Change the Description of the author to your description
Save the widget and all is done! Now view your blog you’ll see the widget live.
Remember:
This widget is always added in the footer of your blog, where it looks fine and don’t interrupt other content.
Have Fun Buddies, if you faced any difficulty, just let me know in comments. 🙂

10 thoughts on “Add Beautiful Author Bio Box to Blogger Home Page

  1. AZ Sn1ff3r

    hmmm nice share bro .

    bro i have a blog & i have done seo but still 20 to 40 pageviesw pae day bro help me plz guide where to start ?

    Reply
    1. Wali Khan

      Hello brother,
      You can wait up to few months for Google to fully index your site, because it takes time for Google to filter your content. Meanwhile you can publish new content on your blog. Hard work always bring some peanuts. Wish you all the best.

      Reply
  2. Kashif Bashir

    Wali bhai plz plz help me… my blog traffic dramatically decreased and keep decreasing since last two days… i have made no any changes regarding SEO at least since a week, but my daily page views are going down from (15000 page views/day avg) to now only 3000 page views/day approximately), ultimatly my adsense earning is also decreased very badly, plz help and suggest me, thanks in advance… here is my blog url: http://apkmanianew.blogspot.com/

    Reply
    1. Wali Khan

      It seems brother your blog is badly hit by any of Google Algorithms such as Panda or Penguin. For Blogger blogs it happens when there are plenty of copyright issues or duplicate content. Also if low quality content volume is greater than it happens in most of the cases.

      You better know about your blog, but one thing is sure that your blog is hit by Google, means removed from the search results.

      Reply
  3. waleed raza

    nice cute and gr8 ; thanks bro for sharing ; can we also chang this widget background color from yellow to anyone ?

    Reply
    1. Wali Khan

      You are always welcome brother, Yes you can change the background color, but there is no background color, actually in the picture that background color is for the default blogger widget, not for this widget, so if you add it to your blog it will be adjusted in your own widget style.

      Reply

Speak Your Mind