How to Add Customized Author Box Widget  on Blogger

How to Add Customized Author Box Widget on Blogger

Identify your sell to enable visitors know you and everything about you this can make you more popular or you can get an opportunity for a job through that way.

Remember that when doing this you increase quality of your blog  and in this widget you can put or summarize who you are and what you can do.

Features are

• simple and professional
• Easy to set or customize
• it has high loading ability
• it fits any screen size

Now follow this steps below

How to add customized Author box widget  on Blogger

Step 1
Visit www.Blogger.Com and select the blog you want to do it on from the dashboard

Step 2
Click on Template >Edit HTML

Step 3
Look or search for this code below using control F (CTRL+F)


Step 4
Now just before the codes above in step 3 copy and paste this CSS codes below

.i-author {overflow:hidden;padding:.7em;background: #ECF7FF;}.i-author img {float:left;height:5.5em;padding:2px;margin: 0px 5px2.5em 0px;width:5.5em;border: 1px solidrgb(0, 4, 91) !important;border-radius:50%;}.i-author h4 {color: #000000;font-size:1.5em;margin:0px;padding: 0px 0px.5em 0px;}.i-author p {color: #434343;font-size:1em;line-height:1.7em;margin: 0;}.i-social{font-size:1.3em;margin-top:5px;}

Step 5

Now search for this

<divclass='post-fotter-line post-footer-line-1'/>

Step 6
After that  just above the code copy and paste this code provided below

<!-- author box --><div class='i-author'><img alt='' src='http://3.bp.blogspot.com/-wRSZOB3TEUU/VVybKfnP3NI/AAAAAAAAA5s/mcZKlAfhwPQ/s200/Profile%2BPic.png'/><h4>Mathias Amodu</h4><p>Write something about yourself</p><div class='i-social'>Follow me on: <a href='http://twitter.com/@mathiasamodu' rel='nofollow' target='_blank'><font color='#00aced'>Twitter</font></a> | <a href='http://www.facebook.com/zealmat' rel='nofollow' target='_blank'><font color='#3b5998'>Facebook</font></a> | <a href='http://plus.google.com/+mathi' rel='nofollow'><font color='#dd4b39'>Google Plus</font></a></div></div><!-- author box end -->

Arrange it for your own blog

• replace the yellow URL with your profile image link

Mathias Amodu change it to your name

• write something about yourself  Remember identify yourself

• Replace all your social network Account url

I hope that this tutorial. Nice and I hope you finally put the box

Don't forget to Comment and subscribe


  1. Awesome... But what if I need to do same from a guest post, how do I go about it on my blog www.Mozentre.com

    1. You just need to put some of the HTML code inside the HTML/compose box

    2. You just need to put some of the HTML code inside the HTML/compose box

  2. This comment has been removed by the author.

  3. you made some mistake in the html above ]]<>/bskin> instead of ]]<>/b:skin>
    i rep Zeal Healthclinic