How to add About author widget in blogger
I have seen in so many blogs that they are showing about author with image below each article posted on blog.About author widget can be added in to blogger just by simple coding.So many WordPress blog has plugin that are just installed on WordPress blog and that blog starts showing about author widget below that WordPress blog but in blogger there is no any plugin, you must do it by coding.You just need to add some information about you, means your short bio and if you wish to add your twitter and Facebook fan page link there , than you can add them too.
You too can add such about author box below each post of your blog.You can later modify it too.Just follow the simple steps to add about author widget in to your blogger blog.
1.Login to your blogger account.
2.Go to Design > Edit HTML & download/backup your full blogger template.
3.Now find ]]></b:skin> code by pressing Ctrl+F & add following code just above that code you just find.
4.Now search for the following code.
<div class='post-footer-line post-footer-line-1'/>
and past the following code just below that line.
5.Now Just change the following things from the code above,
Write About Yourself/Fellow Blogger Here!!!- write about your self instead of that phrase.
YOURUSERNAME - Add your twitter user name instead of that.
If you wish to add your image instead of that cartoon image, Just search for the https://sites.google.com/site/everythingaboutblogging/Home/twitterprofile.jpg and add your photo image location in place of that.
6.Now save the template and you have done.
Related Article : Where to upload/Host images for free
1.Login to your blogger account.
2.Go to Design > Edit HTML & download/backup your full blogger template.
3.Now find ]]></b:skin> code by pressing Ctrl+F & add following code just above that code you just find.
.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}
4.Now search for the following code.
<div class='post-footer-line post-footer-line-1'/>
and past the following code just below that line.
<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='https://sites.google.com/site/everythingaboutblogging/Home/twitterprofile.jpg' width='70'/><b>About the Author</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Write About Yourself/Fellow Blogger Here!!!<br/>
Follow Me on Twitter [at] <a href='http://twitter.com/YOURUSERNAME'>YOURUSERNAME</a>
<p style='margin:-8px 0'><br/><center>
<a href='http://ehowportal.blogspot.com/2011/07/about-author-below-every-post-in.html' style='text-decoration:none;font-size:70%;'>Add this widget to your blog</a></center></p></div></p>
</div>
</b:if>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='https://sites.google.com/site/everythingaboutblogging/Home/twitterprofile.jpg' width='70'/><b>About the Author</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Write About Yourself/Fellow Blogger Here!!!<br/>
Follow Me on Twitter [at] <a href='http://twitter.com/YOURUSERNAME'>YOURUSERNAME</a>
<p style='margin:-8px 0'><br/><center>
<a href='http://ehowportal.blogspot.com/2011/07/about-author-below-every-post-in.html' style='text-decoration:none;font-size:70%;'>Add this widget to your blog</a></center></p></div></p>
</div>
</b:if>
5.Now Just change the following things from the code above,
Write About Yourself/Fellow Blogger Here!!!- write about your self instead of that phrase.
YOURUSERNAME - Add your twitter user name instead of that.
If you wish to add your image instead of that cartoon image, Just search for the https://sites.google.com/site/everythingaboutblogging/Home/twitterprofile.jpg and add your photo image location in place of that.
6.Now save the template and you have done.
Related Article : Where to upload/Host images for free
Loading
