Wednesday

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)

            ]]<>/b:skin>







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

Share :

zealmatblog

10 comments:

  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

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

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

      Delete
  2. This comment has been removed by the author.

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

    ReplyDelete



Parse Your Adsense HTML code Here





We love to hear from you!

Sign in to comment "anonymously" without entering verification text.