Update Notice (4 Dec. 2014) - Hi, We have started updating non-working scripts,demos and widget generators and it is almost done still if you find any broken script,demo or W.G then you can report it here. Provided link will be fixed within 24 hours.Thanks and regards.

Thursday, 8 March 2012

Add About The Author Widget Just Below Of Your Posts - V1


The author is the heart and soul of a blog. It is the author who creates a beautiful blog that shares knowledge and other wonderful things with other people. Its natural that people are curious to know more about the person behind the blog who writes the posts. At times the blog visitors want to talk with the author and discuss about the things that he blogs. At such times, the "About The Author" widget is very useful for both the Author and also the readers.In this post I will explain how to add About the author widget to a Blogger/Blogspot blog.I will try to keep it as simple as possible so that it becomes easy for everyone to add it to their blog.

Widget Preview


How To Add This Widget To Blogger?


We will add this widget in two steps :

  1. Adding the CSS
  2. Adding the HTML.
1. Adding The CSS

  1. Go to Blogger Dashboard > Design > Edit HTML.
  2. Backup/Download full template.
  3. Now find for ]]></b:skin>
  4. Add below code just above ]]></b:skin>
  5. Save your template.

#authorbox {
background:#333 url(http://2.bp.blogspot.com/-L5Tvv0yJrr4/TvsFt-Mh82I/AAAAAAAACC0/9eva5jXci8U/s1600/about_author.jpg) no-repeat scroll left top;
width:auto;
overflow:hidden;
color:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
margin:5px auto;
padding:40px 10px 10px 20px;
font-family:verdana;
}
#authorbox:hover {
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
}
#authorbox h4 {
font-size:16px;
color:#fff;
clear:none;
margin:0;
padding:10px 10px 5px;
}
#authorbox .author_small {
font-style:italic;
}
#authorbox img {
-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(1deg);
-moz-transform: rotate(1deg);
float:left;
border:4px solid #ff4408;
margin:10px;
padding:0;
}
#authorbox img:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(+9deg);
-moz-transform: rotate(-1deg);
}
#authorbox p {
color:#ffffff;
margin:0;
padding:0 10px 10px;
}
#authorbox a {
color:#ff4408;
text-decoration:none;
}


You can customize this widget by changing the above CSS values.For making this changes you can use our HTML Editor or HEX Color Code Generator.

2. Adding The HTML

  1. Now again back to Edit HTML page.
  2. Tick the expand widget template checkbox.
  3. Now find


<data:post.body/>


paste below code just below it.

<div id="authorbox">       
<img alt="" src="https://lh3.googleusercontent.com/-72e_nFhhcSw/T1gygkx0RyI/AAAAAAAABCc/k6U6EDy5XYk/h120/man_cartoon.jpg" height="100" width="100"></img>
<h4><a href="http://www.helperblogger.com/" title="Posts by Rahul Ippar" rel="author">Posts by Rahul Ippar</a></h4>
 <p>Hi,I my name is Rahul Ippar. I am author of this blog.I love blogging and I like to share things which I know.</p> <p>Follow Me On <a href="http://www.twitter.com/helperblogger">Twitter</a> Or <a href="http://www.facebook.com/btsnts">Facebook</a></p></div>

You can change all the part of the code in bold according to your needs. Now click on Save Template and check any post in your blog. Remember that this widget will appear only on Post Pages and not on the Home Page.

If you found this post useful then please share it with your friends and if you are facing any problem, then use the comments section below.



11 Comments : Read Them Below Or Add One

  1. Replies
    1. this my error help 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: The element type "img" must be terminated by the matching end-tag

      Delete
    2. I have updated the post.Try now...

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

    ReplyDelete
  3. rahul ji i have problem when i am insert jump break in post then in every post coming the about the author tell me plz www.loveasadreza.blogspot.com

    ReplyDelete
  4. itz not working man in my blog

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box).PLEASE DO NOT SPAM