You will found a lot of Wordpress blogs that include an "About the Author " box/widget below every blog post. So, I thought why not provide the same for the blogger/blogspot blogs.We previously gave about the author widget for blogger.And after making some changes we are publishing second version of about the author widget.
In this version we make this widget simple but attractive.You can edit this widget very simply by just changing the CSS values.For making these changes you can use our HTML Editor.Take a preview on widget.


Now lets see how to add this widget to blogger blogs.


How To Add About The Author Widget To Blogger?

You can add this widget in simple two steps.Just follow them carefully.

Step 1 - Adding the CSS

  • Go to Blogger Dashboard > Design > Edit HTML.
  • Backup/Download your template.
  • Search for ]]></b:skin>
  • Add below code just above  ]]></b:skin>
  • Save your template.


.author_info {
 float: left;
 width: 520px;
 padding: 10px;
 border: 1px solid #2EFE2E;
 margin-bottom: 15px;
 margin-top: 15px;
 background: #E0F8E0;
        font-family:verdana;
}
.author_info h3 {
 margin-bottom: 10px;
        font-family:consolas;
}
.author_photo {
 float: right;
 margin: 15 0 0 10px;
}
.author_photo img {
 border: 1px solid #666;
}



Step 2 - Adding the HTML

  • Now again move back Edit HTML page.
  • Tick expand widget templates checkbox.
  • Find <div class='post-footer-line post-footer-line-1'/>
  • Paste below code just below of  <div class='post-footer-line post-footer-line-1'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='https://lh3.googleusercontent.com/-72e_nFhhcSw/T1gygkx0RyI/AAAAAAAABCc/k6U6EDy5XYk/h120/man_cartoon.jpg'/ height="120" width="120"></div>
                    <h3>This post was written by:</h3>                 

                                        <p><a href='http://helperblogger.com' title='Posts by Rahul'>Rahul Ippar</a> - who has written 120 posts on<a href='http://helperblogger.com'> HelperBlogger</a></p>

                    <p>Rahul Ippar is a professional blogger and web developer. Follow him on <a href='http://twitter.com/helperblogger'>Twitter</a> or <a href='http://www.facebook.com/'>Facebook.</a><br style='clear:both;'/></p>
                   </div>

</b:if>


Edit your information according to your needs and save the template.

I hope you enjoyed this post!! For any help, please feel free to leave your comments here!! I will sort out any of the issue with respect to this hack. Also, try spreading this post to your friends if you feel it is worth spreading :)

Post a Comment

  1. Great Post Thanks
    http://www.insertknowledge.com/

    ReplyDelete
  2. Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: Element type "img" must be followed by either attribute specifications, ">" or "/>".
    i got this as error

    ReplyDelete
  3. I can't find the second line of code anywhere

    ReplyDelete
  4. thanks for this author bio widget i have applied this on my site also.
    Dynamictrick

    ReplyDelete
  5. Web-based social networking services make it possible to connect people who share interests and activities across political, economic, and geographic borders.

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top